How to set up a product tour programmatically?

Question

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

Answer 1

With Faqprime, you can design your product tour programmatically. This involves creating a sequence of messages, posts, images, videos, and social proof to guide your customers. You can use functions like faqBotStartJsonOnboarding, faqbotInsertOnboardingBanner, and faqbotInsertOnboarding to define the onboarding code

 

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. The 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);";

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 the last function should have 'finish'

    • Question Id: Number

    • Index: number, starts from 0 and should be 1 higher than the previous function.

 

To get the DOM Path of an element: Inspect element, right-click, and copy selector to find the DOM path of the element.