How to create Product Tours/Flows?

Product Tours (PT)

A product tour is an interactive onboarding tool designed to guide users through the key features or functionalities of a web page or application. These tours aim to enhance the user experience by providing context-sensitive explanations or walkthroughs for various elements on a page.

Beacon Hybrid Product Tours provide an advanced, customizable, and dynamic solution that addresses the limitations of traditional tours. By integrating features like cross-page navigation, modal support, and enhanced control, these tours redefine the onboarding experience, ensuring users have an efficient and engaging journey throughout the application.

Beacon Product Tour Highlights with Hybrid approach:

Beacon Hybrid Product Tour goes beyond the limitations of traditional walkthroughs, offering a dynamic and interactive experience for users. Here's how it stands out:

1. Cross-Page Navigation Unlike traditional product tours that are confined to a single web page, our hybrid product tour allows users to seamlessly navigate across connected pages. This ensures a unified and comprehensive onboarding experience.

2. Enhanced Control Administrators can define who sees the tour, where it appears, and when it is triggered. This level of customization ensures that the tour is contextually relevant and user-specific.

3. Modal Integration The hybrid system supports the addition of modals—popups, pages, or feedback forms. These can be used to:

• Collect user feedback.

• Showcase forms for additional input.

• Provide detailed explanations or additional resources.

1. Versatility and Expansion The ability to integrate modals, navigate across pages, and customize the user experience makes the hybrid product tour ideal for complex web applications with interconnected workflows.

Brief of Creation and Management

The creation of product tours, along with adjustments to their functionality, can be handled via the Beacon extension & dashboard. Here’s how it works:

1. Client-Side Creation

Using the Beacon extension, administrators can design product tours directly on their applications interface.

Customization options include:

• Designing the look and feel of the product tour.

• Adding tooltips, modals, and other interactive elements.

1. Dashboard Adjustments

From the Beacon dashboard( Engagement > Journeys > Product Tour ), administrators can:

• Adjust settings like delay times between tooltips.

• Configure triggers for invoking specific tours.

• Manage user-specific visibility.

• Changes made through the dashboard can also be applied via the client-side editor.

• Only a few changes can be done through the dashboard, remaining all should be done only through the extension in the front end.

Note: Since most of the options remain the same across different scenarios, there will be some repetition. This is intentional, allowing users to start from any scenario based on their specific requirements.

Using Beacon Editor

Steps to initiate “Create product tour” Ensure the latest Beacon extension is installed and that the Beacon Bar & Visual Editor are enabled.

Note: Enabling this will activate the Beacon-related features on your Website/application.

1. Navigate to the “footer section” of the page to locate the Beacon Visual Editor as shown in the above image.

2. In the footer section we can navigate to creation of flows page in two ways. To create a “product tour (PT)", The first way is to select the “choose existing” button in the footer section which will open a pop-up window, and in that pop-up window choose “Flows”. This will open an editor which consists of existing product tours as well as options for creating new ones.

Note: Do not modify the “Dropdown” on the editor page, as it is set to “flows” by default. If changed, it will navigate to different feature lists within the same pop-up window based on the selection.

Another way of navigating to the flows page is in the footer section we can find the “Create” button. On clicking this will open a popup window from that choose “flows” that will navigate to the same editor flows page as above in that we can find the existing product tours as well as creation for new ones.

1. After clicking on the “create” button in the editor will open a popup page, where the user has to select some options such as modal, tooltip, actions and surveys, from it.

2. By selecting “tooltip” will open the existing saved designed tooltips templates or an option for creating from scratch. As this will be applicable for the “modals” and “surveys” also. But in the case of “actions” this is used for adding a navigation for the state.

When Opted for “Default Template” Option:-

1. Selecting the “Default Template” will navigate you to the “Create Page,” pre-configured with the default settings of the chosen template. The configuration settings of BLOCKS will vary depending on the selected template.

• On selecting the option of “Tooltips” will give the default tooltips templates which are pre-existing and the user can select the desired design from them which will suit the existing web page.

• On Selecting the “Modals” option will give the default modals which are pre-built designs for the modals and users can select among them which will best suit the current page.

• On Selecting the “Surveys” will open a default forms page which will be designed with some input fields if the design and the fields required satisfies with the existing forms then user can select with the existing ones.

• Actions can be incorporated into the product tour to enable seamless navigation between pages, both at the beginning and during the tour itself.

Note :- If none of the pre-designed templates fit their needs, users can create custom designs from scratch for each element by using the option “create from scratch”. The creation of scratch for tooltips and other elements are discussed below.

1. The current screen is divided into three main sections:

• Section 1: Displays the “PT flow frame”, here all the created tour flow will be shown in this section and for enabling the frame we have to click on the info icon in the footer. Section. 1.1 Here it is a report message which indicates the element for the tooltip is either not added or the tooltip is not in the page where the path is given.

• Section 2: Shows the “Beacon Editor” pop-up page, which is draggable.

• Section 3: Contains the “The Beacon Editor” toolbar with the “Preview,” and “Publish” buttons.

Here is the image reference for the sections within the creation of the product tour

If Default Tooltip is selected then attributes which have to be given manually.

• After selecting the default tooltip then the tooltip is not automatically displayed we have to select where it should be displayed. (Refer Above point 2,Section. 1.1)

• And after selecting the tooltip there is a report message where it says “navigate to the page and choose the element where you intend to generate a tooltip. Go to the Page” because at the current state there is no path or position set. In order to do that we use “Reselect element”, and the report message will be automatically disabled after selecting the element.

• Here After selecting a default template the tooltip will be displayed under the product tour flow frame where all the tooltips and flow of the product is shown in a tree structure, which will be invoked through the info icon in the center of the section 3.

SECTION 1: Product Tour Flow Frame

After opening the popup for viewing the flow and there are multiple other options within that. Let us see the options that are available after the creation of the tooltip and within the flow.

1. Add a Group before & Add a Group After: Here with the two add buttons in the top and the bottom of the flow will be used to add a group of tooltips in the top of the flow or in the bottom of the flow.

2. Delete whole flow: Here the delete button in the bottom of the flow will delete all the tooltips that are added.

3. Add button within the tooltip: There are two add buttons within a single tooltip. One in the top of the tooltip and one in the bottom of the tooltip. These are used for adding tooltips in the top or bottom of the specific tooltip. Here with the add button in the bottom of the element will also contain an option of branching which is explained in a detailed way below.

4. Copy Button within the tooltip: There are two copy buttons within a single tooltip. One in the top of the tooltip and one in the bottom of the tooltip. These are used for cloning the same tooltip to the top or bottom of that specific tooltip.

Note: Cloning a specific tooltip to the top or bottom will achieve all the functionalities of the original tooltip and can edit the position and content within the tooltip so that the design will look alike in the entire product tour.

1. Edit : There is an edit in every tooltip where on clicking that will open the specific tooltip in the dashboard and can make changes to the tooltip.

2. Delete within the tooltip: There is a delete button within the specific tooltip where on clicking that will delete the specific tooltip from the product tour.

Note:

1. While editing a tooltip, in the flow that specific tooltip will be highlighted along with the tick mark in the top of the tooltip under the to indicate that the user is editing that specific one in the front end.

2. Once the product tour ‘flow frame’ popup is opened then there is an auto scroll with the popup which will scroll up to the tooltip where the user is currently editing.

3. The whole process of creation of the product tours is an auto saving process and no need to save them manually.

Here is an image for reference of how a flow will be shown after creation in the popup page when clicked on the info icon in the footer section will be visible as

Without Branching, refer below image

With Branching, refer below image

Here is the video referral of working of the flow options in the flow frame.

Flow Frame options explaination.mp4 ( Non Voice Video )

SECTION 2: Beacon Editor

The editor settings for the tooltip are discussed below.

Engagements Tab:

1. Name: Here we have to add the name of the product tour, which will be used for invoking the product tour.

2. Magic Selector: By using this we can select where the tooltip should be displayed. By that it will automatically generate the location of displaying the particular tooltip and also Suggests the auto generated LABEL NAME & DESCRIPTION CONTENT to be displayed within the specific tooltip.

• If Magic Selector is not used then the below fields should be manually filled.

1. Selector Type: In this we have to select the attribute by which we will instruct the tooltip to find the specific element.

Classname+xpath: This is a selector field where we have to give the classname and x-path for the specific element where the tooltip refers to.

Id : we have to give the id for the specific element.

Data-beacon-id: This option is used when no specific attribute is available on the DOM. In such cases, Beacon prompts you to set an attribute with the key ‘data-beacon-id’ and assign it a corresponding value. Path: Here in this section we have to select whether the path(url) is static or dynamic and also have to specify the path for the same without domain.

Note: the above discussed field is filled automatically when we use the magic selector and remaining fields will take default values and also if required then we can change according to the requirement.

1. Settings: In this section we have to select the tooltip to trigger “immediately” or else we can add a “Delay in seconds” for triggering of the tooltip, And this setting will apply for the currently selected Tooltip specifically.

2. Offset distance: Through this we can move the tooltip position even after selecting through the magic pen we can change these to adjust accordingly. Most of these are done to achieve accuracy for the placements, which is explained in the next point.

3. Placement: Here we have to mention on which side of the element frame, the tooltip should be shown, there are a total 12 positions.

4. Padding: Here we can adjust the padding for the over all tooltip here. We can give the four sides the same padding or else each side as required.

5. Width: Here we can set the overall width for the tooltip

6. Box: the options inside this will be “color” or “image” → by selecting color we can give a background color for the tooltip as well as the border radius and → if we select the image then there is an option to upload the image as well as to set up the border radius for the tooltip.

7. Overlay: This option is used to blur the background and to show only the tooltip highlighted in the page. And to avoid the user interactions between the flow. ( This is handled on each tool tip level only. )

8. Stroke: Here we can add the border stroke for the tooltip and as well as the border color for the same.

Here is the video referral for the engagement settings for the tour

Engagements Tab working and fields for the tour.mp4 ( Non Voice Video )

Flow Settings Tab:

Flow settings which will be used while creating the product tours. These have to be given for the tooltip after the general settings. The flow settings include the following.

1. Who: This field allows you to define the segmentation for determining which users will see a specific product tour. Segmentation can be configured both through the dashboard and the client-side editor. By setting segmentation criteria, you can restrict access, ensuring only the targeted users can view the product tour.

Settings > Who specifies the audience for the modal:

• “Everyone” radio button: Enables the modal for all users of the application.

• “Segment” radio button: Restricts the modal to specific users or user groups based on defined “Segment” rules within Beacon.

Segmentations are defined based on application requirements and function as rules with various conditions to determine "who should see" the product tour and "who should not."

1. Where: This field specifies the pages where the product tour should appear. You can configure this setting through the client dashboard, enabling you to target specific pages or sections of your application. By defining the "where" criteria, you ensure the product tour is displayed only on the relevant pages, providing a tailored user experience.

Settings > Where determines where the modal is shown:

• “Everywhere” radio button: Displays the modal on any page within the application.

• “Segment” radio button: Restricts the modal to specific pages or URLs based on defined “Segment” rules.

Segmentations are defined based on application requirements and function as rules with various conditions to determine "where to show" the product tour and "where not to show".

1. When: This field is used to set up the when to trigger the particular product tour means on clicking some element on opening a specific client page and all other trigger related issues are set here. These settings can also be set from the dashboard as well as the editor from the user end. This particular field contains multiple sub fields which will be used to set up with the product tour.

Settings > When provides options to customize the display timing of the modal:

1. Frequency: Determines how often the PT is shown to users, such as the number of appearances per day, as well as with the user.

• Number of Times per user: Specifies the total number of times the PT can appear for a user login to the specific account.

• Number of Times per Day: Here we specify the number of times a PT will be visible to the user on the specific day.

• Delay in Seconds: Defines the time delay between each appearance within the set frequency.

1. Trigger: Controls when the PT is activated:

• Immediately: Displays the PT right away based on the configured settings.

• Delay: Shows the PT after a defined time delay.

• On Event: Activates the PT when a specific event is triggered.

1. Till: Sets the duration for displaying the PT:

• Number of Times per User: Limits how many times an individual user will see the PT.

• Number of Days: Defines how long the PT remains active and visible to users.

Here is the video referral for the flow settings within the tour.

Flow settings tab for a tour.mp4 ( Non Voice Video )

Note: If the tooltip is cloned from one tooltip then the flow settings for the second tooltip will automatically set and otherwise if we changed the whole tooltip then we have to update the flow settings for the tooltip.

SECTION - 3 : The Beacon Editor Toolbar

The footer section mainly consists of three parts which are choose existing, info bar and preview and publish button.

Choose Existing: It is basically a drop down which is used to switch between the flows of any other feature within the beacon, in this dropdown we can find the features that are editable within the editor are shown here. Here above is the image reference where the dropdown popup page is visible when clicking on the choose existing in the footer section.

Flow Frame invoking Section : On clicking the info icons in the footer section will open the “section 1” popup page where we can find the flow that is present within the specific tour.

Preview: Here by this button we can check with the execution of the product tour when it is in draft state, if we confirm the tour is working fine in preview then we can make it “public”. If we want to stop execution of the tour in preview then the close preview button will appear while executing.

The image reference for the preview execution and the close preview.

Publish: Here through this button we can make a particular tour live (Public). If a particular tour is live then in the place of the “publish” we will find it with the “unpublish” button.

Here is the video referral for the footer section which will be visible for every tour.

Footer Section explaination.mp4 ( Non Voice Video )

When Opted as “Create From Scratch” : -

1. When opted for “Create From Scratch”, then this will lead to the “Create Page” & its basic configs as default.

2. The current screen will contain 3 Major sections.

   1. Section 1: Here the flow for the tour will be shown, in the initial state the element that can be added within the tooltip is shown in this section.

   2. Section 2: Right side of the screen, “The Beacon Editor - Pop-up page” which is drag-able.

   3. Section 3 : At the footer “The Beacon Editor” - with current section “Preview”, “Save” and “Publish” Buttons.

In the process for creating a tooltip from scratch then first of all we have to use the magic selector to select the element and after selection we can design with the tooltip. The creation of tooltip will involve the following steps and when the magic selector is used then the auto generated content will be shown which will be used as content in the tooltip as description.

1. After the selection of the tooltip from the popup page which will appear after clicking on create in the editor, then there are multiple options for designing a single tooltip. Let us discuss in one by one

2. The types of blocks that can be added inside a tooltip can be:

   1. Text Block: To insert content or text.

   2. Header Block: To add header content or text.

   3. Button Block: To include buttons.

   4. Image Block: To insert images.

   5. Video Block: To embed videos.

   6. Embed Block: To include website content or specific URLs.

   7. HTML Block: To write custom HTML code for a specific block and design the modal accordingly.

   8. Select: To add a selection of one option within multiple elements in the tour itself

   9. Attachments: Here we can provide an option for adding files with the tour.

Let us discuss in detail about how a block can be used while the creation of the tooltip.

Here is an image of the fields that can be used to create a tooltip from scratch.

Text Block: This particular block is used to add the text in the tooltip that is used as a description block for the tooltip.

Header Block: This is also a text block that is used as a heading block which will be in high font size and used as a headings block for a tooltip.

Button Block: When clicking on the “Button block > Edit (pen icon)”, only the text-related block is highlighted, displaying all associated settings along with an “Editing Widget”.

1. Available Editing Options: The following settings can be modified:

   1. Font size

   2. Font color

   3. Button alignment

   4. Button background color

   5. Button padding

   6. Button border configurations

   7. Button actions

   8. ‘Block’ background color

   9. ‘Block’ padding

   10. ‘Block’ margin

   11. ‘Block’ alignment

2. With the “Button Actions” option we can apply action such as

   1. Command : (Mostly Used)

      1. This option allows the user to select from “pre-defined actions”.

      2. When the button is clicked, the specified action is executed (e.g., navigating to another page, opening a new pop-up page, etc.), based on the command configuration.

      3. These actions are defined within the beacon for specific applications or clients.

      4. These are not default suggestions but are manually configured and shown as dropdown options.

   2. Help : Allows users to connect to their documents that are synced with the beacon. These are not default suggestions but are configured manually and shown as dropdown options. Users can also search for specific documents to show when a user takes an action.

   3. Modal : Enables users to select and connect to another created modal within the beacon.

   4. Tooltip: Provides the option to select and connect to a created tooltip within the beacon.

   5. Flow ; Allows selection of a created flow (e.g., a product tour or a journey of specific featured pages) and connects to it.

   6. NPS (Net Promoter Score) or Survey Forms: Users can select and connect to an NPS survey form to record analytics within the beacon.

   7. Next: (Mostly Used) Provides an action to proceed to the next step or section.

   8. Submit: (Mostly Used) Allows the action “Submit & Close” for the modal.

   9. Back : (Mostly Used) Enables the action to go “Back” from the current state of the modal.

   10. Skip: (Mostly Used) Allows users to “Skip” the current flow of the modal, if applicable.

   11. Skip Group: Provides the option to “Skip” an entire group if there are further connections . ( If a modal is connected to another modal or any other flow etc)

   12. URL: Allows placement of a URL as needed.

3. Image Block: Here in this particular block users can add the image to the tooltip. This image in this field can be uploaded through two ways one is just by giving the image url and another way is to upload the image from the system.

4. Video Block: Here this block is used to insert a video within the tooltip. This is done by inserting the url of the video.

5. Embed Url: This block is for adding a url within the tooltip. After clicking on it will navigate to the url.

6. HTML Block: This is for designing the tooltip using the html code. The code given within the block will appear in the front end.

7. Select Block: This will be used to add a section for the selection of the choice from the provided options from the user. Here we can provide a label and key and options for the selection. Those will be shown as the selection field in the front end and that selected is stored for that particular field through the key in that field.

8. Attachments: This section will be used for the adding a section in the front end where users can upload a file which will be saved in that product tour. This block will be used for creating the attachments block.

Here is the video referral with all the fields that are used while creating a tooltip from scratch is shown below

creating tooltip from scratch.mp4 ( Non Voice Video )

Note : After creating a specific tooltip using the above ways then the whole process which is discussed above, when a tooltip is selected default will be applicable here after adding the tooltip

Branching

Branching introduces conditional logic into product tours, similar to "if-else" statements in programming. This feature allows a single step (or block) to connect with multiple subsequent steps based on user actions or predefined triggers. By doing so, branching offers a more interactive and context-aware experience, guiding users through different workflows based on their choices or actions.

How Branching Works in our Product Tours

1. Single Block to Multiple Blocks

• A single tooltip, modal, or any other interactive element can lead to multiple follow-up elements.

• For example, a tooltip can have two action buttons, each leading to a different set of tooltips or modals, creating unique pathways.

1. Using Modals, Surveys, or Tooltips in Branching

• Elements like modals, survey forms, or tooltips can be added to a branching structure.

  • Example:

    • A tooltip contains two buttons:

      • Clicking the first button opens a modal with a survey form.

      • Clicking the second button triggers another tooltip guiding the user to a different section.

1. Choice-Based Actions

• Choice Actions are used to define branching logic.

• A tooltip or block can include multiple action buttons, each associated with a specific branch name.

• When a user clicks a button, the system evaluates the choice and directs the user to the corresponding branch's content.

1. Branch Name Field

• The Branch Name Field is used to define and link specific branches to user actions.

• By assigning a branch name to each choice, the product tour ensures the correct sequence of elements is displayed based on the user's selection.

Here is the video reference for how a branching flow can be created and how it will work.

Branching Creation within the dashboard.mp4 ( Non Voice Video )

Example of Branching in Product Tours

• Scenario: A tooltip explains the settings menu and offers two buttons:

1. "Learn About Account Settings"

• Clicking this opens a modal with detailed instructions and forms related to account settings.

• After closing the modal, the tour continues with relevant tooltips about account settings.

1. "Learn About Notification Settings"

• Clicking this invokes another branch, starting a new sequence of tooltips guiding the user through notification settings.

• Implementation Steps:

1. Add the tooltip as the base block.

2. Include two buttons with Choice Actions (e.g., "Account Settings" and "Notification Settings").

3. Link the respective branch names (e.g., "Account_Branch" and "Notification_Branch") to each button.

4. Create and associate the content blocks (tooltips, modals, forms) for each branch.

Benefits of Branching in Product Tours

1. Personalized Experience: Users only see content relevant to their actions or preferences.

2. Flexibility: Complex workflows can be broken down into manageable, interconnected paths.

3. Improved Engagement: Interactive tours keep users engaged by adapting to their needs.

4. Efficiency: Users quickly find what they need without navigating through irrelevant steps.

Here through the add button in the specific tooltip we can add the branching with the same and also we can add up with another element like modals or survey or tooltip of different designs.

NOTE:

• Here we can create a product tour for the forms in the dashboard in another way, which may be “AUTO GENERATED PRODUCT TOUR” here we have to train the particular form and during the form train we have to enable Toggle of “Create auto product tour” by this the auto product tour will be created and within that we can edit accordingly. This auto product tour will only be applicable for the forms within the dashboard.

• While creating the auto product tour user has to go through the form training for invoking the form training bar press cmd+B or ctrl+B. Then the form train popup will be visible after that select the entire form and after that provide with the command creation for that specific path and enable the toggle. Then by saving it will create the auto product tour.

Here is the video reference link of how an auto generated tour will be formed after the form training.

Auto generated product tour .mp4 ( Non Voice Video )

• Once a product tour is made live then the user cannot edit with the content in the tooltips and also adding with the new tooltips within the same product tour is not possible.

• The changes which are under the engagement and flow settings in the editor can be done even after the product tour is made live.

Here the below video reference link of how edit will not be able to be done after made public and also the engagement and flow settings can be changed.

Editing Option disabled after it has made live.mp4 ( Non Voice Video )

• If we want to make changes within that only then there is a way doing that which will clone the product tour either from the beacon dashboard or the editor which is opened in the front end.

Here is the video reference for cloning a specific product tour and changing the changes within the product tour.

product tour cloning from existing one.mp4 ( Non Voice Video )

• Product tours can also be linked to User Guides by using the Button Block. Set its action type to 'Flow' and choose a pre-configured product tour from the dropdown menu.

• Creating a product tour for mobile view follows the same process as for desktop. However, we recommend users create flows (product tours) using the ‘Tab view’, as it accommodates mobile views effectively. And make sure on the mobile view tooltip width to be 320px max for optimal display.

• Lastly, please ensure that the configurations align with the requirements, particularly the segmentation and triggering of the flows (Product Tours). These should be thoroughly reviewed before making the tours live for end users. Additionally, most tooltip positions will adjust as needed, provided that unique attributes (such as ID, name, etc.) are correctly assigned to the specific elements.

The product tour cloned from the original one will be in the private state first and we can edit with the changes as per requirement.

Using Beacon Dashboard

Steps to Initiate “Create Product Tour”

1. Verify Access Permissions Ensure you are an admin or a user with access to the Beacon Dashboard for your application. Note: If you lack access, request the admin to add you as a member by navigating to:Beacon Dashboard > Settings > Team > Add Member.

2. Log In to the Beacon Platform Visit https://app.beacon.li/ and log in using your email ID. An OTP will be sent to the provided email for verification (if access has been granted).
3. Navigate to the “Product Tour” Section

• Go to Engagements > Journeys > Product Tour.

• This will take you to the “Product Tour List” page.

Click on the “Create Product Tour” button to open the side pop-up page.

Settings that can be done through the Dashboard Changes that can be made for product tours (PT) through the dashboard are listed below. NOTE : We Always Recommand to create the product tours or Engagement/DAP (Digital Adaption Platform) related features from the “Beacon Editor”.

• A Product tour can be created through dashboard and only few changes that can be changed through the dashboard are given below as section wise.

The product tour page in the dashboard when visited with ‘create product tour’ for the first time is shown below.

SECTION 1: Main Navigation Bar

1. The "Main Navigation Bar" in Section 1 includes the following options: Save, Menu, and a Status dropdown button.

   
2. Save: Use this button to save any changes you have made.

3. Status Dropdown: This menu allows you to set the visibility of your content with the following options:

• Public: Live for everyone as per behaviour settings.

• Private: Can be invoked only through chrome extension

• Unlive: To remove from public

• Draft: To save your work in progress

  

4. Menu: it has the option to Duplicate & Delete buttons.

• Duplicate : will duplicate it.

• Delete : will delete with conformation.

Note: Once a PT is live, it cannot be edited directly. However, users can clone an existing PT, make changes, and ensure the older version is unpublished. Editing is only allowed before publishing.

SECTION 2: Beacon Editor section

The above shown fields from the dashboard can be changed from the dashboard. The fields which are shown in section 2 from the dashboard are explained below.

• Name: In this field the name of the product tour is given. If the product tour is created through the dashboard then the product tour is created which will be shown in the editor for that specific product tour with the name specified. For editing the product tour we have to open the flows from the editor in the client and has to open the product with the name created through the dashboard

• Who: This field allows you to define the segmentation for determining which users will see a specific product tour. Segmentation can be configured both through the dashboard and the client-side editor. By setting segmentation criteria, you can restrict access, ensuring only the targeted users can view the product tour.

Settings > Who specifies the audience for the modal:

• “Everyone” radio button: Enables the modal for all users of the application.

• “Segment” radio button: Restricts the modal to specific users or user groups based on defined “Segment” rules within Beacon.

Segmentations are defined based on application requirements and function as rules with various conditions to determine "who should see" the product tour and "who should not."

• Where: This field specifies the pages where the product tour should appear. You can configure this setting through the client dashboard, enabling you to target specific pages or sections of your application. By defining the "where" criteria, you ensure the product tour is displayed only on the relevant pages, providing a tailored user experience.

Settings > Where determines where the modal is shown:

• “Everywhere” radio button: Displays the modal on any page within the application.

• “Segment” radio button: Restricts the modal to specific pages or URLs based on defined “Segment” rules.

Segmentations are defined based on application requirements and function as rules with various conditions to determine "where to show" the product tour and "where not to show".

• When: This field is used to set up the when to trigger the particular product tour means on clicking some element on opening a specific client page and all other trigger related issues are set here. These settings can also be set from the dashboard as well as the editor from the user end. This particular field contains multiple sub fields which will be used to set up with the product tour.

Frequency: Here we can select the frequency

Settings > When provides options to customize the display timing of the modal:

• Frequency: Determines how often the PT is shown to users, such as the number of appearances per day, as well as with the user.

  • Number of Times per User: Indicates the maximum number of times the PT can appear to an individual user after logging into their account.

  • Number of Times per Day: Defines the total number of times the PT will be shown to a user on a given day.

  • Delay in Seconds: Sets the time interval between consecutive appearances within the defined frequency.

• Trigger: Controls when the PT is activated:

  • Immediately: To display the PT right away based on the configured settings.

  • Delay: Shows the PT after a defined time delay.

  • On Event: Activates the PT when a specific event is triggered.

• Till: Sets the duration for displaying the PT:

  • Number of Times per User: Limits how many times an individual user will see the PT.

  • Number of Days: Defines how long the PT remains active and visible to users.

The above all settings can be done through the dashboard as well as the editor from the front end and can be found under flow settings in the editor.

The specific ones which are only applicable to change with the editor are shown in the below tab.

Here is the video reference for the changes that can be made through the beacon dashboard.

Dashboard side settings for the product tour.mp4 ( Non Voice Video )

After updating the changes from the dashboard then we have to move further changes from the front-end editor. Note: If you have any questions, please don't hesitate to reach out to us at [e-mail]