Design your Product Tour programmatically?

Learn how to set up a Product Tour programmatically in this step-by-step article.

Answer

With Product Tours, you can create a sequence of messages to guide customers around your product to drive faster adoption. You can create a sequence of posts, images, videos, and social proof to guide customers. 

Here are the steps for the programmable product tours -

Step 1. Start function 

faqBotStartJsonOnboarding(<variable contains the onboarding code say myOnboardingCode>);

Step 2: To define the onboarding code in the onboarding variable. 

Say your variable is myOnboardingCode, it should contain either of these two functions i.e. faqbotInsertOnboardingBanner or faqbotInsertOnboarding with the right DOM, 'next'/'finish', question id and index. Last function call shall have the mandatory 'finish'.

Example 

var myOnboardingCode = "faqbotInsertOnboardingBanner('next', 78, 0); faqbotInsertOnboarding('HTML > BODY:nth-child(2) > SECTION:nth-child(6) > DIV:nth-child(1) > DIV:nth-child(2) > DIV:nth-child(3) > DIV:nth-child(1)', 'finish', 82, 1);";

faqBotStartJsonOnboarding(myOnboardingCode);

List of functions:

  • faqbotInsertOnboardingBanner: To put a banner on the centre of the page (not associated with any element).
    • Parameters (in the same order): 
      • Button: 'next' or 'finish' small case last function should have 'finish'
      • Question Id: Number
      • Index: number, starts from 0 and should be 1 higher than the previous function.
  • faqbotInsertOnboarding: To put the onboarding on an element 
    • Parameters (in the same order): 
      • Dom Path: DOM of the element.
      • Button: 'next' or 'finish' small case last function should have 'finish'
      • Question Id: Number
      • Index: number, starts from 0 and should be 1 higher than the previous function.

 

Q. How to get the DOM Path of an element?

Inspect element, right-click, and copy selector to find the DOM path of the element.

...