Product Tours

Product Tours let you display guided walkthroughs that help users understand and navigate a product's features and functionality. This can be to all your site visitors or a specific List or Segment of your users. Tours are available to both free and paid accounts.

Prerequisite: Set up the Engage JS SDK

To build a Product Tour for your web app, you need to have set up the Engage Javascript SDK on your website. If you have done this already, you can skip the step. If not, simply copy the code below and paste it before the closing </body> tag of your webpages.

!function(n){if(!window.Engage){window[n]=window[n]||{},window[n].queue=window[n].queue||[],window.Engage=window.Engage||{};for(var e=["init","identify","addAttribute","track"],i=0;i<e.length;i++)window.Engage[e[i]]=w(e[i]);var d=document.createElement("script");d.src="//d2969mkc0xw38n.cloudfront.net/next/engage.min.js",d.async=!0,document.head.appendChild(d)}function w(e){return function(){window[n].queue.push([e].concat([].slice.call(arguments)))}}}("engage");
Engage.init('api_key')

Replace api_key with your Public key. You can find this on your Engage dashboard via Settings → Account. Remember, that you should only use your Public key. Your Private key should be treated as a password and should only be used in server-side applications where it cannot be publicly exposed.

How to Create a Product Tour

• Visit Campaigns → Tours on your Engage dashboard

• Click the Create a Tour button

• Enter a title for your Tour.

• If you want all your visitors to see the Tour, check the “Show to all page visitors” option. Otherwise, select your target Segments and/or Lists.

• Click the “Next” button to start creating the Tour steps.

• Enter the URL of the webpage you want to design the Tour on. This will typically be the page you want to show the Tour on. The page must have the Engage JavaScript SDK installed.

• The Product Tour editor will show on the URL you have entered. (Ensure the Engage JavaScript SDK is installed on the page).

• Click the “Add your first step” button to start creating the Tour. If you want to create the Tour on another page, you can navigate to that page.

• Select the Step type. You can create a Modal step or Tooltip step. Modal steps show at the middle of the user’s page with a gray backdrop. Tooltips anchor and point to specific elements of the page.

• Add Text, Image, and Button elements to the step.

• Click the Save button at the bottom of the editor.

• Repeat the process to add more steps to the Tour.

• Once done, you can click the “Close” button at the bottom right side of the editor. Your Tour steps are automatically saved to your dashboard.

• Review the steps on the dashboard and click the “Start Showing” button once ready.

Customize the Tour colors

You can change the default Tour Colors (background, text, button, links, e.t.c) to match your brand colors. To do this, click the “Color theme” button.

• If you would love to save the changes as a Theme so that you can apply it to other Tours, click the “Save as New theme” button.

• If you want the changes to only apply to the Tour, click the “Set Theme” button to update your Tour with the colors.

Personalization

You can personalize the text content of your Product Steps. You can personalize the content with standard attributes like email, first_name, last_name, number or any of the user’s custom attributes. 

To add personalization during text editing, click on the personalization icon on the text toolbar. This will show when you select a text or when starting a new paragraph. Select the personalization tag you want.

Remember that you need to be identifying users with the JS SDK to do this. This helps the SDK know if the current visitor is mapped to a profile on your account and if so, it can use the user’s data to personalize the content they see.

We recommend you use fallback values in your personalization tags especially if you will be showing the Product Tour to all visitors and not a custom audience or if the tag is not an attribute all users on your Engage account have. The fallback value is what shows in place of the personalization tag if the tag does not exist.

Learn more.

Targeting specific users

If you want to target only specific users with your Product Tour, you can uncheck the Show to all visitors option when creating the Product Tour. You can also edit an existing Product Tour to do this. You need to have created a Segment or List for the users you want to target so that you can select them here.

The second part of targeting users is to let the JS SDK know who the current site visitor is so they can only get Tours targeted at them. The way you do this is that on logged-in pages, call the identify method of the SDK with the same unique ID their Engage profile was created with.

// ...Integration code here
Engage.init('api_key')
Engage.identify({
  id: 'unique_user_id_here'
})

Learn more about identifying users with the JS SDK.

Editing a Product Tour

To update your Product Tour, 

1. Go to “Tours” on the Engage dashboard.

2. Click on the Tour

3. Click on the “Actions…” button (top right) on the Tour page and select “Edit”

4. Make the changes you want to make. Note that while editing, the Tour will stop showing to users. Once you are done making the needed changes, remember to “Start Showing” the Tour again.

Updating a Tour will not affect the existing views and will not show the Tour to users that have already dismissed or completed it. If you want want this, simply duplicate the Tour and delete the old one.

Running multiple Product Tours

When multiple Product Tours are active, they are displayed newest first. The newer one will continue to display till:

1. The display duration elapses (if set)

2. It is dismissed by the user

3. The Tour is completed, i.e, the user navigated to the end of the Tour and clicked the “Done” button.