Skip to content

Commit

Permalink
Updates to tutorial-onboarding.md
Browse files Browse the repository at this point in the history
  • Loading branch information
WashingtonKayaker committed Jan 16, 2020
1 parent f2517b2 commit e8a655a
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 10 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/media/onboarding/done.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/media/onboarding/home.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/media/onboarding/previous-next.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 37 additions & 10 deletions docs/tutorial-onboarding.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,51 @@
# Onboarding

Bot Framework Composer provides an `Onboarding` functionality to get new users familiar with their bot creation journey. This functionality includes coach marks and teaching bubbles informing users of the basics when they learn how to create their first bots using Composer. To enable `Onboarding`, follow the steps:
The Bot Framework Composer provides `Onboarding` functionality to help you get familiar with the bot creation process. This functionality consists of a _product tour_ that includes five sections with each section containing one or more tips.

Click **Settings** (the wheel-shaped icon) on the navigation pane then click **Onboarding**. Toggle **Onboarding** to **Enabled**. See the screenshot below:
1. To run the Composer _product tour_:

![enable-onboarding](./media/onboarding/enable-onboarding.png)
1. Select **Settings** (the cog-shaped icon), in the menu on the left side of the Composer screen.
2. Once in the **Settings** screen, select **Onboarding** in the navigation pane.
3. Once in the _Onboarding_ screen, Toggle the **Onboarding** switch to **Enabled**.

After you enable the `Onboarding` functionality you will see the overview pane popup at the bottom right corner of the screen. The overview pane contains five steps for the onboarding process. Each step includes the number of tips in the brackets. Click **Learn the basics** and you will start your bot creation journey.
![enable-onboarding](./media/onboarding/enable-onboarding.png)

![onboarding-popup](./media/onboarding/onboarding-popup.png)
The Onboarding feature is now enabled. You can now start the _product tour_.

You can navigate the tips back and forward by clicking the `Next` or `Previous`button in the middle of one step.
2. To start the product tour, select the **Design button** on the menu.

![previous-next](./media/onboarding/previous-next.png)
![design button on menubar](./media/onboarding/design-button-on-menubar.png)

Click anywhere outside the overview pane you will see a popup window asking if you would like to `Leave Product Tour`. If you select **Yes** your onboarding process will end. If you select **Cancel** your onboarding process resumes.
> [!TIP]
> Optionally you can start the product tour by selecting the **Home** button:
>
> ![previous-next](./media/onboarding/home.png)
![leave-product-tour](./media/onboarding/leave-product-tour.png)
3. You will see the _Onboarding_ **Welcome!** screen appear at the bottom right corner of the screen. The Onboarding tour consists of five sections. Each section consists of one or more tips. Select **Learn the basics** and you will start your Onboarding tour.

Whenever one step finishes you will be navigated back to the overview pane and you should click the next step until the whole onboarding process is completed. You need to enable the `Onboarding` functionality every time you want to start a new onboarding process.
![onboarding-popup](./media/onboarding/onboarding-popup.png)

4. You can navigate backwards or forward through the tips of a section by using the **Previous** or **Next** buttons.

![previous-next](./media/onboarding/previous-next.png)


> [!TIP]
> You can exit the tour at anytime by simply selecting anywhere outside the overview views. If you do, you will see a popup window asking if you would like to **Leave Product Tour**. If you select **Yes** your onboarding process will end. If you select **Cancel** your onboarding process resumes.
>
> ![leave-product-tour](./media/onboarding/leave-product-tour.png)
5. Once you complete a section, select done and you will return to the the _Onboarding_ **Welcome!** screen where you can continue to the next section of the tour.

![previous-next](./media/onboarding/done.png)

> [!NOTE]
> Sections that only contain a single tip will not have the **Previous**, **Next** or **Done** buttons but instead you can select the **Got it!** button to move to the next section. Once you complete a section, you cannot go back to it without restarting the onboarding tour.
6. Once you complete the tour, select **Done!**. The **Onboarding** switch in your settings will automatically be set to **Disabled**.

You can restart the onboarding tour anytime by repeating these steps.

## Next
- Learn [how to build a weather bot](./tutorial/bot-tutorial-introduction.md).

0 comments on commit e8a655a

Please sign in to comment.