Guide Designer: Adopt Studio

Adopt Studio is the name of the designer that allows you to create in-app guides, communications, polls, and content, with no technical expertise required.

Adopt Studio panels

When you first open Adopt Studio, it launches a side panel over your application. The side panel consists of two parts. The top part allows you to edit the guide's name, save the guide, and exit the designer. The bottom allows you to begin building your guide.

Adopt Studio's side panel can be shifted to either the left or right of the page.

 

 

You can also hide the bottom by selecting the arrow in between the two top and the bottom parts. Select the down arrow when you'd like to view the bottom part of the panel again.

 

 

Once you’ve accessed Adopt Studio, it’s important to leave Adopt Studio by selecting Exit rather than by closing the tab. This takes you back to the guide's details page.

 

 

Create a guide

To create a new in-app guide in Adopt Studio, select Guides in the left-side navigation, then select + Create Guide in the top-right of the page. 

 

 

Name your guide, select an application, and enter the URL you would like to place your in-app guide on. Then choose whether you want to create a Guide or a Badge.

• Choose Guide if you want to create a step-by-step product walkthrough, which can consist of both Tooltips and Lightboxes.
• Choose Badge if you want to create in-line support that's accessed through an icon that you place on your application. 

 

For information on how these options are activated, see Guide activation methods.

 

 

Select Launch Adopt Studio in the bottom-right to open the guide designer. This launches Adopt Studio over your application.

When Adopt Studio opens, navigate to the page that you want to build your guide on before selecting Start Building Guide, or Place Your Badge if adding a Badge instead.

If creating a classic Guide rather than a Badge, you can choose between two types to begin with: Lightbox and Tooltip. You can continue to choose either type for subsequent steps in your Guide.

Lightbox

A lightbox overlays the guide on your app. Lightboxes are commonly used for global announcements such as outages or major new feature releases.

If a Lightbox is the first step in your guide, you can use Guide Persistence to activate the guide when an element appears on your page. For more information, see Select step settings and Guide activation methods.

Tooltip

Tooltips are in-app messages that appear when users navigate to a specific area or perform a certain action in the product. Tooltips are primarily used to provide supplemental explanations for features that would otherwise clutter the UI if permanently displayed. 

When you choose Tooltip, you enter Selection Mode, where you're given the option to select what element of the UI that the Tooltip is associated with based either on an existing Tagged Feature or by using the Anchor tool. 

Selection Mode allows you to choose an element on your page to attach the guide to. In this case, Selection Mode opens after selecting Start Building Guide. If a Tooltip is your first step, you can also use Element Contains Rule to conditionally display your guide based on the contents of the target element. For more information, see Guide activation methods.

Selection Mode

Selection Mode is activated when you need to select an element or feature in your UI to attach your guide or badge to. You have two options: anchor to a surface element in the UI using the Anchor tool, or attach to an existing Tagged Feature.

 

Anchor

Choose Anchor if you want to quickly build a guide or place a badge based on surface elements of the UI without first having to tag a Feature. Unlike Features, which are created to collect analytics, anchoring doesn't require you to inspect the underlying HTML of the UI element.

If you choose to use the Anchor tool, the system chooses an element on your screen, as indicated with a red bounding box around the element, which you can then edit. To choose a different element, select the Edit Anchor icon in the bottom left of the container, and either adjust the CSS or choose Re-select from the top of the Anchor Settings window.

 

 

To help you choose, Anchor Settings shows you the element's underlying CSS under Suggested Match and how many people have interacted with that element in the last 12, 24, or 36 hours under Total Element Clicks.

 

Tagged Feature

Choose Tagged Feature if you want to position a guide or badge on an existing Feature.

Features are named objects used for analytics, and persist even if you make changes to the pages they're on. This means that guides and badges that are positioned based on Features are more stable than guides and badges that are anchored to surface elements, but take more time to set up. You can't tag Features while in Selection Mode. For more information on Features, see Tagging and viewing Features.

Tagged Features are highlighted in pink. The name of the tagged Feature appears when you hover over it. 

Note: Not every clickable element on the page can be tagged. 

Editor Mode

Once you've selected Lightbox or placed your Tooltip, you enter Editor Mode. Editor Mode allows you to add content to your guide.

Add content

To begin adding content to your guide, select the text within the dotted rectangle and start typing. The text can be italicized, bolded, underlined, aligned, and hyperlinked.

Add more content by selecting one of the plus (+) icons in the Editor. For information on the type of content you can add, see Content Block Types, below.

 

Select step settings

To edit a step's settings, including screen position, backdrop, and page location, select the gear icon at the bottom of Editor Mode.

 

 

Select your step settings and select Done when finished.

• Use Screen Position to change the alignment of the guide during this step. This is only available if you're editing a Lightbox in your guide.
• Use the Show Backdrop toggle to choose whether to darken the page behind your guide during this step.
• Use Page Location to choose whether you want this step to appear Sitewide or on your current page.
• If your first step is a Lightbox, use Guide Persistence to activate your guide when a particular element appears on your page, and to ensure the guide persists even if that element then disappears. For more information, see Guide activation methods.

 

Note: These options are specific to each step. If you want the same settings to apply to the entire guide, check your settings at each step.

Exit Editor Mode

When you're done editing your step, select Save & Close at the bottom of the editor box. This exits Editor Mode for that step and re-opens the Adopt Studio panel, where you can add and edit steps. 

Selecting Delete closes Editor Mode, removes the step you were creating, and re-opens the Adopt Studio panel.

 

Content Block Types

You can add text, images, and polls to your Guides. After selecting one of the plus (+) icons in Editor Mode, select either a Text block, Image block, Open Text Poll, Number Scale Poll, or Video.

 

Text block

You can bold, italicize, underline, hyperlink, and realign your text. Select your text and then choose the formatting options you want.

 

Image block

To add an image to a content block, you can either:

• Upload an image from your computer.
• Upload your image to an image-hosting service like Imgur, Flickr, or Dropbox, and then copy the URL of the image into the Image URL field.

 

For accessibility, add Alt Text for your image. Alt text is read aloud by screen readers and displays on the page if the image fails to load.

Open Text Poll

An Open Text Poll consists of two components: a question and an answer. Edit the question and the format of the text in the same way you do for a Text block.

 

 

Number Scale Poll

A Number Scale Poll collects ratings from your users. It can be used to elicit feedback on a specific feature or process by asking your users to rate it, or to determine the degree to which users are satisfied with their experience.

Edit the question and the format of the text in the same way you do for a Text block, and then edit the options you want to give respondents by hovering over your poll and selecting the edit icon on the right side.

 

 

Your scale can range from anywhere between and including 0 and 10. You can relabel these to suit your question. You can also choose to not show labels using the toggle at the top of the edit window. When you're done editing your Number Scale Poll, select Update to continue.

 

Video

We support the following platforms for embedding videos into your guide:

• YouTube
• Vimeo
• Wistia
• Brightcove
• Microsoft 365 Stream
• Vidyard
• Loom

 

 

Use the video URL to embed videos from supported streaming platforms. The embed formatting is applied automatically. Autoplay is turned off automatically to provide the best guide experience.

For accessibility, add Alt Text for your video. Alt text is read aloud by screen readers and displays on the page if the video fails to load.

Add, edit, and delete buttons

You can add and edit buttons at the bottom of your guide to progress users through your intended process, which could be to open a next step, submit a poll, launch a guide, and so on. 

To add a button, select the plus (+) icon next to the default button at the bottom of the Editor, or select + Add Button if there is no button there.

To edit or delete an existing button, including its actions and style, hover over the button and select the edit or the trash icon as appropriate.

 

 

When creating a new button, or in edit mode, you can:

• Choose different button controls and navigation actions. For information on the different button actions available to you, see Guide button actions.
• Customize the text in your button label, for example, “Next”, “Dismiss”, “Submit”, and so on.
• Create an alternative accessible (ARIA) name for your button for the benefit of users of assistive technologies.
• Choose a button style: Primary, Secondary, or Tertiary.

 

View poll responses

Poll responses are collected in the Poll Responses tab of the guide that you've published. Select a specific poll to open a poll question's details.

The poll details table displays the app in which the poll was displayed, the poll type, the poll step, and how many Visitors have seen the poll.