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 between the top and 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.

 

 

Guide types and options

There are three types of guide to choose from: Guide, Badge, and Confirmation. For information on how to use, activate, and customize the three guide types, see the Guide activation article.

Regardless of the guide type you choose, you can add multiple steps that consist of any combination of Lightboxes and Tooltips.

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 Step Settings in this article, and the Guide activation article.

Tooltip

Tooltips are in-app messages that appear next to specific elements in the UI.

After selecting a tooltip as a step in your guide, you enter Selection Mode, which allows you to choose an element on your page to attach the tooltip guide to. 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 the Guide activation article.

Create a guide

To create a new in-app guide in Adopt Studio:

1. Select Guides in the left-side navigation

2. Select + Create Guide in the top-right of the page. 

 

 

3. Name your guide, select an application, and enter the URL of the page you want to place your in-app guide on.

4. Choose whether you want to create a Guide, Badge, or Confirmation. For guidance on the difference between these options, see the Guide activation article.

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

6. Navigate to the page that you want to build your guide on and then to the Adopt Studio panels to start building your guide.

7. Start building your guide using the options available for the guide type you chose: Guide, Badge, or Confirmation.

Guide

If creating a walkthrough Guide, select Start Building Guide from the Adopt Studio panels on the right side of the page, and then choose between Lightbox or Tooltip. If your first step is a Tooltip, you're first prompted to choose its location on the page. For more information, see Selection Mode in this article. For instructions on how to add and edit content in your guide, see Editor Mode in this article. 

Badge

If creating a Badge, select Place Your Badge from the Adopt Studio panels on the right side of the page, and then choose between Lightbox or Tooltip. This opens Selection Mode so that you can position your badge. You then enter Editor Mode, where you're prompted to add content. You can also change the icon appearance and other display options. To learn more about badge customization, see Badge options in the Guide activation article.

Confirmation

If creating a Confirmation, select Pick an Element from the Adopt Studio panels on the right side of the page, and then choose between Lightbox or Tooltip. This opens Selection Mode so that you can select the button that opens a confirmation modal before allowing the user to continue. You then enter Editor Mode, where you're prompted to add content. To learn more about confirmations, see the Guide activation article.

Selection Mode

Selection Mode is activated when you need to select an element or feature in your UI to activate your guide from. You enter Selection Mode when you choose the Tooltip content type for a guide, when you add a Badge, or for the first step of a Confirmation.

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, Badge, or Confirmation, 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. 

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

 

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. You can also choose a text style (title, subtitle, or paragraph), and use numbered or bulleted lists. 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.

 

You can resize your images based on percentage (%) or on pixel (px) width of the guide container. By default, images are uploaded at 100% width.

 

If you switch over from percentage to pixel width, the default pixel width number translates to 100% width of the guide container. The default number is based on whether the image is for a Lightbox guide or a Tooltip guide.

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.

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.

You can resize your videos based on percentage (%) or on pixel (px) width of the guide container. By default, videos are uploaded at 100% width.

If you switch over from percentage to pixel width, the default pixel width number translates to 100% width of the guide container. The default number is based on whether the image is for a Lightbox guide or a Tooltip guide.

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.

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.

 

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.

 

 

Step Settings

While adding content or editing a step, you can edit the step's settings, including screen position, backdrop, page location, and so on.

 

 

To open a step's settings, select the gear icon at the bottom of Editor Mode. Select your step settings and select Done when finished.

Step settings are organized by tabs on the left of the window. Options are specific to each step. If you want the same settings to apply to the entire guide, check your settings at each step.

Properties

All step types include the Properties tab. The individual options within the tab differ depending on whether you're editing a lightbox or tooltip.

• Toggle on Full Width Container to make a lightbox the full width of the screen. This is only available if you're editing a lightbox step in your guide.
• Use Container Width to change the size of the guide for this step. If editing a lightbox, Full Width Container must be toggled off to use this setting.
• Use the Show Backdrop toggle to choose whether to darken the page behind your guide during this step.
• Toggle on Show Step Number to show the counter for the step.

 

Location

All step types include the Location tab. The individual options within the tab differ depending on whether you're editing a lightbox or tooltip.

• Use Page Location to choose whether you want this step to appear sitewide or only on your current page.
• Use Z-Index to set the z-order of the guide's step in the UI.
• For a lightbox step, use Screen Position to change the alignment of a lightbox step. This is only available if you're editing a lightbox step in your guide.

 

• For a tooltip step, use Position to Element option to specify where the tooltip should be placed relative to an element on the page. Your options are automatic (default), top, bottom, right, or left of the element.

 

Badge

Only guides activated with a Badge include this tab. You only see this tab for the first step of this type of guide. Use the scroll bar on the right to see all the options available in this tab. For more information about badge options, see Guide activation.

• Use Badge Icon to change or upload a new icon for your badge.
• Use Position to choose where the badge appears in the UI
• Use the Offset fields to adjust the positioning of the badge in relation to the target element.
• Use Color to change the color of one of the default icons.
• Use Z-index to set the z-order of the badge in the UI.
• Use ARIA Label – Accessible Name to create an alternative accessible (ARIA) name for your badge.
• Use Guide Behavior to choose whether you want the guide to appear only when it's selected, or also when the user overs over the badge.
• Use Badge Behavior to choose whether you want the badge to always be present, or only when the user hovers over the element it's attached to.

 

Advanced

The Advanced tab only appears in specific scenarios, and gives you options that are relevant only to these scenarios.

• If your first step is a lightbox, toggle on 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.
• For tooltips and badges, toggle on Enable Element Contains Rule to conditionally display the step based on the contents of a target element on the page. For more information, see Guide activation.
• Toggle on Advance on Anchor Click or Advance on Feature Click if you want to use an element on the screen rather than the Next button to move the user on in the walkthrough.

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.

Once you've added one or more buttons, you can choose to realign them. You have the following options: left alignment, center alignment, right alignment, and distributed. The alignment option you choose applies to all buttons in the step. Hover over one of the buttons in the step, select the alignment icon, and choose one of the alignment options from the dropdown menu.

 

 

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.