How to create User Guides?
User Guides
Beacon User Guides are powerful tools designed to enhance user engagement and understanding of an application. They address various user needs through targeted and versatile support.
End-to-End Flow Explanation These guides provide a comprehensive walkthrough of an application's functionality, from the initial setup to advanced features. Users gain a complete understanding of how different parts of the system interconnect, enabling them to achieve their goals efficiently.
Step-by-Step Task Guidance Targeted assistance that breaks down specific tasks into manageable steps. This is especially useful for new or infrequent users who need clear instructions for completing workflows without navigating irrelevant details.
Additional Use Cases
Feature Introduction and Adoption Guides introduce new features or updates, helping users understand their value, learn how to use them effectively, and integrate them into existing workflows.
Problem-Specific Troubleshooting Tailored instructions for diagnosing and resolving specific issues or errors, such as "How to Fix Login Errors" or "Steps to Resolve Sync Issues."
Compliance and Best Practices Training Guides educate users on regulatory compliance or industry best practices within the application, such as "How to Maintain GDPR Compliance."
Custom Workflow Configuration Step-by-step instructions for setting up or customizing workflows to meet organizational needs. Examples include creating automated task sequences, integrating third-party tools, or configuring dashboards.
Data Management and Reporting Guides focus on managing, analyzing, and exporting data. Tasks may include setting up data filters, generating reports, or visualizing trends to inform decision-making.
Onboarding for Specific Teams or Departments Role-specific guides tailored for different groups, such as administrators, marketing teams, or developers. These guides focus on the unique needs of each department or user role.
Interactive Learning Modules Non-linear guides where users explore features at their own pace via interactive tutorials, tooltips, or modules, fostering experiential learning and discovery.
Event or Campaign Setup Instructions tailored to help users plan, configure, and execute events or campaigns. For example, "How to Create a Holiday Promotion Campaign."
Multi-Platform Navigation Guides that help users transition seamlessly between mobile, desktop, or web versions of the application, highlighting platform-specific features and differences.
By offering these diverse and practical use cases, Beacon User Guides ensure users receive the precise assistance they need, empowering them to maximize productivity and achieve success with the application.
Using Beacon Dashboard
Steps to Initiate “Create Guide”
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.
Navigate to the “Create Guide” Section
Go to Engagements > Journeys > User Guides.
This will take you to the “Create Guide List” page.
4. Click on “Create Guide” , which leads us to create a guide page.
Steps to “Create Guide”
The Guide Creation Page is divided into two key sections: General Settings and Steps. This guide provides detailed instructions on how to use each option in these sections to create and configure a user guide effectively.
Section 1 : Create guide section
General Settings
This section focuses on setting up the basic properties and overall design of the guide.
1. Name
Purpose: Assign a unique identifier for the guide.
Field Type: Text Input.
Instructions:
Enter a name for your guide.
Ensure the name is unique to avoid conflicts with other guides.
Note: This name is for internal use only and will not be visible to your customers.
2. Category
Purpose: Define the type or grouping of the guide.
Field Type: Dropdown.
Default Value: Journey.
Instructions:
Select a category that best represents the purpose of the guide.
For most cases, the default "Journey" category will suffice, but additional categories can be added based on your organizational needs.
3. Icon & Title
Purpose: Provide a visual and textual identifier for the guide.
Field Types:
Icon Upload: Allows you to upload an image to serve as an icon.
Title Input: Allows you to set a descriptive title for the guide.
Instructions:
Click the Upload Icon button and choose an image file from your device. Ensure it is in a supported format (e.g., PNG, JPEG).
Enter a descriptive title for your guide in the Title field. This will be visible to your users.
4. Description
Purpose: Provide an overview or additional context about the guide's purpose.
Field Type: Text Area.
Instructions:
Enter a brief and clear description of the guide.
This description will help users understand the guide's purpose and its content.
5. Guide Type
Purpose: Define how the guide will be structured for users.
Field Type: Dropdown.
Options:
Sequential: Steps must be completed in a specific order.
Non-Sequential: Users can complete steps in any order.
Instructions:
Select Sequential if the guide's steps must follow a specific sequence.
Choose Non-Sequential if users can explore the steps in any order.
6. Banner Options
Purpose: Customize the visual appearance of the guide's banner.
Field Types: Toggle Button, Text Input, Radio Buttons, and Color Pickers.
Instructions:
Toggle the Banner Option switch to enable or disable the banner.
If enabled:
Use the Edit Banner Text field to specify a message for the banner.
Select a Background Type:
Color: Choose a background color using the color picker.
Image: Upload an image to use as the banner background.
Select a Text Color using the color picker to ensure readability.
Steps options
This section allows you to define and organize the steps of the guide, which will be shown to users. Note:"Steps to be shown to the user."
Adding a Step
Action: Click the Add Steps button to add a new step to the guide.
Options for Each Step:
1. Icon & Title
Purpose: Add visual and textual identifiers for each step.
Field Types: Icon Upload and Title Input.
Instructions:
Click the Upload Icon button to select an image for the step.
Enter a descriptive title for the step in the Title field.
2. Description
Purpose: Provide additional details or instructions for the step.
Field Type: Text Area.
Instructions:
Enter a concise description of what the step entails.
Use this field to guide the user on what actions they need to perform.
3. Entity
Purpose: Define the specific action or feature linked to this step.
Field Types: Dropdowns for Type and Additional Options.
Instructions:
From the Type Dropdown, choose the action the step should initiate. Options include:
Command: Triggers a pre-configured navigation command or create command of choice .
Additional Dropdown: Select the specific command from the list of available options.
If you select Command, use the second dropdown to specify which command to trigger.
Help: Opens a relevant help guide.
Flow: Initiates a predefined user flow.
Open Bar: Launches a Beacon Search bar.
Open Help Center: Directs users to the help center.
Open Chat: Launches a Beacon Search Co-pilot.
4. Mark as Complete
Purpose: Define how a step is marked as complete.
Field Type: Dropdown.
Options:
On Step-Click: The step is marked complete when clicked.
On Event: Requires the user to specify an Event Key that triggers step completion.
Instructions:
Select On Step-Click for simpler steps requiring no external triggers.
Choose On Event if the step relies on a specific event. Enter the Event Key in the provided field when prompted.
Adding Multiple Steps:
Repeat the above process for each step as needed. Each step can be customized independently to ensure a seamless user experience.
Group
The Group section allows you to organize steps into logical groupings, providing structure and clarity to the guide.
Purpose:
To group steps based on themes, actions, or objectives.
Groups can be Sequential or Non-Sequential, depending on user needs.
How to Use:
Enable Groups
Toggle the Group option to enable this section.
Note: "If groups are enabled, all steps must be attached to a group or some group."
2. Add Group
Click the Add Group button to create a new group.
3. Group Configuration Options:
Title: Enter a name for the group.
Example: "Account Setup Steps" for grouping all tasks related to account configuration.
Group Type: Choose the group’s behavior.
Options:
Sequential: Steps within the group must be completed in order.
Non-Sequential: Steps can be completed in any order.
Example: Use "Sequential" for an onboarding sequence where users must complete each step before moving on.
Select Steps: Attach steps to this group.
Click the Add Step button to add previously defined steps from the Steps section.
Steps added to the group will follow the group’s type (Sequential or Non-Sequential).
Example: Add "Update Profile Information" and "Set Notification Preferences" to the "Account Setup Steps" group.
Adding More Groups:
Repeat the process to create multiple groups as required.
Example: Create a "Feature Exploration" group with non-sequential steps to allow users to explore key application features at their own pace.
Completion
The Completion section defines the end-of-guide experience for users.
Purpose:
Customize the final screen or action users see after completing the guide.
Options:
Icon & Title
Icon: Upload an image to visually represent the completion screen.
Example: Use a checkmark icon to signify successful completion.
Title: Enter a congratulatory or closing title.
Example: "Congratulations, You've Completed the Onboarding!"
Description
Provide additional context or next steps for the user.
Example: "You’re all set to use the application. Explore the dashboard to get started!"
Show Confetti
Toggle to enable or disable a confetti animation on completion.
Example: Enable confetti for celebratory guides like onboarding journeys.
Close on Completion
Define a delay (in seconds) before the guide closes automatically.
Example: Set a 5-second delay to allow users to review the completion screen before it disappears.
Behaviour
The Behaviour section determines when the guide will be marked as completed or dismissed.
Purpose:
Set specific triggers to complete or dismiss the guide based on user actions or timelines.
Options:
Who: This field allows you to define the segmentation for determining which users will see a specific User guide. 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 User guide.
Settings > Who specifies the audience for the modal:
“Everyone” radio button: Enables the User guide for all users of the application.
“Segment” radio button: Restricts the User guide 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 User guide. and "who should not."
Where: This field specifies the pages where the User guide.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 User guide and "where not to show".
When: This field is used to set up the when to trigger the particular User guide 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 User guide.
Frequency: Here we can select the frequency
Settings > When provides options to customize the display timing of the modal:
Frequency: Determines how often the User guide 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 User guide can appear to an individual user after logging into their account.
Number of Times per Day: Defines the total number of times the User guide will be shown to a user on a given day.
Delay in Seconds: Sets the time interval between consecutive appearances within the defined frequency.
Till (Dropdown Options):
Journey is Completed: The guide will remain active until all steps are completed.
Example: Use this for guides where all steps are mandatory.
Journey is Dismissed a Number of Times: The guide will be dismissed after a user closes it a specified number of times.
Additional Field:
Number of Times: Enter the count of dismissals allowed.
Example: Allow users to dismiss the guide up to 3 times before it is permanently dismissed.
Number of Days: The guide will remain active for a specific number of days from the time it is launched.
Additional Field:
Number of Days: Enter the duration in days.
Example: Set the guide to remain active for 7 days during a product launch campaign.
Preview and Display Options on the Right-Side Panel
The right-side panel serves as a live preview area where all the changes made in the guide configuration are immediately reflected in the UI. This allows users to visualize how the guide will appear to end-users in real-time. Additionally, the right-top corner of this panel offers essential display options to enhance usability and customization.
1. Live Preview
Purpose:
The right-side panel dynamically updates to show the effect of your configurations. This includes changes made to the:
General settings like title, description, and banner.
Steps added, grouped, or modified.
Completion screen elements like icons, descriptions, and animations.
How It Works:
As you edit elements such as a guide’s name, add a step, or enable a banner, these changes are instantly visible in the preview area.
If you toggle between "Sequential" and "Non-Sequential" guide types, the step layout and user navigation will adjust in the preview to reflect the change.
Example:
If you add a banner with a gradient blue background and white text, the preview will display this updated design.
If you group steps under “Feature Exploration,” you’ll see the steps listed under this grouping in the preview.
2. Dark Mode Toggle
Purpose:
Switch the preview display between light and dark themes to see how the guide will appear to users with different theme preferences.
How It Works:
Click the Dark Mode toggle in the right-top corner.
The preview instantly switches to a dark theme with appropriate adjustments to text and background colors.
Example:
If the guide has a white banner with black text, switching to dark mode will invert the colors or adjust them for optimal readability.
3. Change to Pinned View
Purpose:
Allows you to visualize how the guide will appear when it is pinned to a specific location on the application interface. This is ideal for guides intended to remain visible or accessible at all times during a user’s session.
How It Works:
Click the Change to Pinned View option.
The preview adjusts to show the guide anchored to a section of the application, such as a sidebar or toolbar.
Example:
If the guide is pinned to the left sidebar, the preview will display it in a collapsible or expanded view, depending on the configuration.
4. Change to Main View
Purpose:
Switch the preview to a full-screen view, simulating how the guide will appear when it is the primary focus for the user. This is useful for guides that take users through onboarding or training.
How It Works:
Click the Change to Main View option.
The guide preview transitions to occupy the full screen, showcasing all elements like banners, steps, and completion screens in a standalone format.
Example:
If the guide is configured to have sequential steps with a completion screen, the main view will show the entire flow, starting from the first step to the final confetti animation.
Why These Features Are Important
Real-Time Feedback: The live preview ensures that all changes are immediately visible, reducing guesswork.
Theme Compatibility: Dark mode helps designers optimize the guide for different user preferences.
Flexible Positioning: Options for pinned or main views let you design guides suited for various user journeys and workflows.
These features enable precise, user-centric guide design, ensuring a polished and professional outcome.
Section 2 : Main Navigation Bar
The "Main Navigation Bar" in Section 1 includes the following options: Save, Menu, and a Status dropdown button.
Save: Use this button to save any changes you have made.
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. ( This appears after the “Creation”)
Duplicate : will duplicate it.
Delete : will delete with conformation.
Example Use Case: Complete Guide Configuration
Scenario: Create an onboarding guide for new users.
General Settings:
Name: New User Onboarding
Category: Journey
Icon & Title: Upload a welcome icon and set the title as Welcome to Beacon!
Description: "This guide will help you set up your account and explore key features."
Guide Type: Sequential
Steps Section:
Add Step 1:
Title: Update Profile
Description: "Go to your profile page and add your personal details."
Entity: Command > Navigate to Profile
Mark as Complete: On Event > Event Key: profile_updated
Add Step 2:
Title: Set Notifications
Description: "Customize your notification preferences."
Entity: Command > Navigate to Notification Settings
Mark as Complete: On Step-Click
2. Group Section:
Add Group:
Title: Account Setup
Group Type: Sequential
Steps: Add Update Profile and Set Notifications to this group.
3. Completion Section:
Icon & Title: Use a trophy icon and title it Congratulations!
Description: "You’ve completed the onboarding. Start exploring now!"
Show Confetti: Enabled
Close on Completion: Delay of 3 seconds
4. Behaviour Section:
Till: Journey is Completed
By following these configurations, the guide will ensure a structured and engaging onboarding experience, with clear steps, groupings, and a rewarding conclusion.
Important Note:
When using the Beacon Editor to create or configure user guides, it is strongly recommended to perform the configuration directly within the Beacon Dashboard.
Although the Beacon Editor provides an interface for editing and previewing, any changes made in the editor will ultimately redirect you to the Beacon Dashboard for final configuration and setup. This ensures that all guides are managed centrally and remain consistent across your system.
By centralizing guide creation and management in the dashboard:
You maintain a single source of truth for all user guides.
It ensures compatibility with other Beacon features, such as commands, flows, and completion events.
Editing in the dashboard streamlines the workflow, minimizing errors or discrepancies.
The Beacon Dashboard is the primary platform for configuring user guides, and the editor will redirect you there when you attempt to manage user guides.
Note: If you have any questions, please don't hesitate to reach out to us at Support@beacon.li
Last updated
