How to create Modals/Slide-Outs?
Beacon Modal Documentation
Beacon ‘Modals’ and ‘slide-outs’ provide a versatile solution for Beacon clients to design and customize pop-up pages tailored to their unique needs. These tools are perfect for announcing updates, launching campaigns, sharing informative content, or delivering personalized greetings, empowering clients to engage users effectively within their applications.
With the Beacon modal, users can take customization to the next level by incorporating a diverse set of blocks into their modals and slide-outs. These blocks include:
Text Blocks: Add detailed descriptions, key messages, or engaging content directly to the modal or slide-out.
Heading Blocks: Highlight titles, announcements, or important updates with bold and customizable headings.
Button Blocks: Include call-to-action buttons for actions like "Learn More," "Sign Up," or "Get Started," driving user engagement.
Video Blocks: Embed videos to share tutorials, promotional content, or visual storytelling.
Embedded Blocks: Integrate external content such as forms, maps, or other web elements seamlessly.
Additionally, users can start with default templates provided by the platform and customize them further to suit their specific requirements. This feature saves time while offering the flexibility to modify layouts, styles, and content, ensuring that the final design perfectly aligns with the intended purpose.
This powerful combination of editable templates and diverse block options allows clients to create modals and slide-outs that deliver rich, interactive, and personalized user experiences effortlessly.
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
From the Using Beacon Editor: This means that on the client application with the Beacon Extension, users can leverage the “Modal/Slide-out” feature to create or edit modals for their “End Users” within their application using Beacon editor.
Steps to initiate “Create Modal / Slide out”:
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 the client’s website/application.(As Beacon related script will be associated with client application.)
Navigate to the “footer section” of the page to locate the Beacon Visual Editor.
To create a “Modal,” select either “Choose Existing” or “Create.”
In the pop-up window, choose “Engagements > Modal.” Note: After making a selection, a draggable pop-up window will appear. This window will display all previously created modals/slide-outs and include a “Create” button.
Click the “Create” button to start the “Modal/Slide-out” creation process. This will redirect you to the creation page. Note: 1. Do not modify the “Dropdown” on the pop-up page, as it is set to “Modal” by default. If changed, it will navigate to different feature lists within the same pop-up window based on the selection.
When Using the “Default Template” Option
Selecting the “Default Template” will navigate you to the “Create Page,” pre-configured with the default settings of the chosen template. The configuration settings will vary depending on the selected template.
The current screen is divided into three main sections:
Center: Displays the “Selected Template.”
Right: Shows the “Beacon Editor” pop-up page, which is draggable.
Footer: Contains the “Beacon Editor” toolbar with the “Preview,” “Save,” and “Publish” buttons.
Section 1:- Modal Template section
Section 1 represents the main modal that can be edited to meet specific requirements.
It is organized into “BLOCKS”, and additional blocks can be added as needed.
The types of blocks that can be added include:
Text Block: To insert content or text.
Header Block: To add header content or text.
Button Block: To include buttons.
Image Block: To insert images.
Video Block: To embed videos.
Embed Block: To include website content or specific URLs.
HTML Block: To write custom HTML code for a specific block and design the modal accordingly.
As an example, consider the selected template in Section 1. This template is divided into three blocks:
Image Block
Text Block
Button Block
Each block comes with options such as “Edit” for modifying the current block, available at the center of the block, and “Add” for adding new blocks, accessible on the right side and bottom of the current block.
Image Block: Clicking the “Edit” button (represented by a pen icon) for the Image Block opens a pop-up page and activates the “Editing Block” option as a separate widget.
Here, you can upload an image by either pasting the image URL or using the “Upload” button to select a file from your system.
A preview of the uploaded image will be displayed.
After the image is uploaded, you can adjust specific settings for the block, including “Padding,” “Margin,” “Section Border Color,” and “Alignment”.
After the image is uploaded and CSS settings are applied,
Use the “Right” button to save changes and exit the “Edit” mode for the current block.
Alternatively, you can use the “Close” icon to exit without saving.
And the “Delete” icon to remove the current block, which will prompt a confirmation pop-up.
Note: The “Editing Widget” option is common for all block types.
EDITING WIDGET
3. Text Block: Clicking the “Edit” button (pen icon) on the Text Block highlights only the text block and displays all relevant settings, including the “Editing Widget.”
This allows you to input and format the text within the block, arranging the content according to your needs using the available settings. (Refer to the video below for details on the available options.)
4. 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”.
Available Editing Options: The following settings can be modified:
Font size
Font color
Button alignment
Button background color
Button padding
Button border configurations
Button actions
‘Block’ background color
‘Block’ padding
‘Block’ margin
‘Block’ alignment
With the “Button Actions” option we can apply action such as
2. Command :
This option allows the user to select from “pre-defined actions”.
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.
These actions are defined within the beacon for specific applications or clients.
These are not default suggestions but are manually configured and shown as dropdown options.
**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 document as to show when user takes a action.
**Modal:**
Enables users to select and connect to another created modal within the beacon.
**Tooltip:**
Provides the option to select and connect to a created tooltip within the beacon.
**Flow:**
Allows selection of a created flow (e.g., a product tour or a journey of specific featured pages) and connects to it.
**NPS (Net Promoter Score) or Survey Forms:**
Users can select and connect to an NPS survey form to record analytics within the beacon.
**Next:**
Provides an action to proceed to the next step or section.
**Submit:**
Allows the action “Submit & Close” for the modal.
**Back:**
Enables the action to go “Back” from the current state of the modal.
**Skip:**
Allows users to “Skip” the current flow of the modal, if applicable.
**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)
**URL:**
Allows placement of a URL as needed.
Section 2 :- Beacon editor Frame
In Section 2, options are provided for managing the overall behavior, CSS, and positioning settings.
Under “Type,” users can choose the desired modal type, either “simple modal” or “Slide-out.”
The “Name” field allows users to name their modal.
There are two main tabs: “Styles” and “Settings”.
Under Styles Tab
If the “Type” is set to “Slide-out,” this additional option under Styles > Animated are available, including radio buttons for “Slide” and “Fade” animations (refer to Section 2, point 2).( Option is Only for Type = Slide-out)
The options in Styles > Placement allow users to set the modal’s position on the screen.( Option is for BOTH type)
Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
Styles > Padding allows users to configure the modal’s padding.( Option is for BOTH type)
Styles > Width & Height enables users to set the modal’s width and height.( Option is for BOTH type)
Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the modal.
Image: Allows users to add a background image.
Options for setting the border radius of the entire modal.
Styles > Overlay provides options for adding an overlay to the modal. When the ‘Toggle’ button is enabled, only the modal is visible, preventing interactions outside of it.( Option is for BOTH type)
Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Under Settings Tab( Options are common for BOTH type)
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.
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.
Settings > When offers options for display timing:
Frequency: Sets how often the modal is shown to users, such as the “Number of times per day.”
Number of times: Specifies how many times the modal should appear per day.
Delay in seconds: Sets the time delay between each appearance within the specified number of times.
Trigger: Configures when the modal is to be activated:
“Immediately”: Shows the modal immediately based on prior settings.
“Delay”: Shows the modal after a specified time delay.
“On Event”: Displays the modal when a specific event occurs.
Till: Sets the duration for showing the modal to users:
“Number of times per user”: Limits the total number of times a user sees the modal.
“Number of days”: Specifies the number of days the modal remains active.
Section 3 : - Beacon editor Tool section.
In Section 3, the main “Beacon Editor” provides options such as “Preview,” “Save,” and “Publish” after initiating the “Create Modal” process.
Preview: Allows users to view their work within the same screen. To close the preview, hover over the top (header section) and click the “Close” button.
Save: Saves any changes made.
Publish: Deploys the modal with the configured settings.
Note: Once a modal is live, it cannot be edited directly. However, users can clone an existing modal, make changes, and ensure the older version is unpublished. Editing is only allowed before publishing.
When Opted as “Create From Scratch” : -
When opted for “Create From Scratch”, then this will lead to the “Create Page” & its basic configs as default.
The current screen will contain 3 Major sections.
Center of the screen, “Allow to Select a Block type” for the initial Block of the Modal.
Right side of the screen, “The Beacon Editor - Pop-up page” which is drag-able.
At the footer “The Beacon Editor” - with current section “Preview”, “Save” and “Publish” Buttons.
Section 1:- Modal Template section
Section 1 represents the main modal that can be edited to meet specific requirements.
It is organized into “BLOCKS”, and additional blocks can be added as needed.
The types of blocks that can be added include:
Text Block: To insert content or text.
Header Block: To add header content or text.
Button Block: To include buttons.
Image Block: To insert images.
Video Block: To embed videos.
Embed Block: To include website content or specific URLs.
HTML Block: To write custom HTML code for a specific block and design the modal accordingly.
As an example, consider the selected template in Section 1. This template is divided into three blocks:
Image Block
Text Block
Button Block
Each block comes with options such as “Edit” for modifying the current block, available at the center of the block, and “Add” for adding new blocks, accessible on the right side and bottom of the current block.
5. Image Block: Clicking the “Edit” button (represented by a pen icon) for the Image Block opens a pop-up page and activates the “Editing Block” option as a separate widget.
Here, you can upload an image by either pasting the image URL or using the “Upload” button to select a file from your system.
A preview of the uploaded image will be displayed.
After the image is uploaded, you can adjust specific settings for the block, including “Padding,” “Margin,” “Section Border Color,” and “Alignment”.
After the image is uploaded and CSS settings are applied,
Use the “Right” button to save changes and exit the “Edit” mode for the current block.
Alternatively, you can use the “Close” icon to exit without saving.
And the “Delete” icon to remove the current block, which will prompt a confirmation pop-up.
Note: The “Editing Widget” option is common for all block types.
EDITING WIDGET
6. Text Block: Clicking the “Edit” button (pen icon) on the Text Block highlights only the text block and displays all relevant settings, including the “Editing Widget.”
This allows you to input and format the text within the block, arranging the content according to your needs using the available settings. (Refer to the video below for details on the available options.)
7. 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”.
Available Editing Options: The following settings can be modified:
Font size
Font color
Button alignment
Button background color
Button padding
Button border configurations
Button actions
‘Block’ background color
‘Block’ padding
‘Block’ margin
‘Block’ alignment
With the “Button Actions” option we can apply action such as
Command :This option allows the user to select from “pre-defined actions”.
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.
These actions are defined within the beacon for specific applications or clients.
These are not default suggestions but are manually configured and shown as dropdown options.
**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.
**Modal:**
Enables users to select and connect to another created modal within the beacon.
**Tooltip:**
Provides the option to select and connect to a created tooltip within the beacon.
**Flow:**
Allows selection of a created flow (e.g., a product tour or a journey of specific featured pages) and connects to it.
**NPS (Net Promoter Score) or Survey Forms:**
Users can select and connect to an NPS survey form to record analytics within the beacon.
**Next:**
Provides an action to proceed to the next step or section.
**Submit:**
Allows the action “Submit & Close” for the modal.
**Back:**
Enables the action to go “Back” from the current state of the modal.
**Skip:**
Allows users to “Skip” the current flow of the modal, if applicable.
**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)
**URL:**
Allows placement of a URL as needed.
Section 2:- Beacon editor Frame
In Section 2, options are provided for managing the overall behavior, CSS, and positioning settings.
Under “Type,” users can choose the desired modal type, either “simple modal” or “Slide-out.”
The “Name” field allows users to name their modal.
There are two main tabs: “Styles” and “Settings”.
Under Styles Tab
If the “Type” is set to “Slide-out,” this additional option under Styles > Animated are available, including radio buttons for “Slide” and “Fade” animations (refer to Section 2, point 2).( Option is Only for Type = Slide-out)
The options in Styles > Placement allow users to set the modal’s position on the screen.( Option is for BOTH type)
Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
Styles > Padding allows users to configure the modal’s padding.( Option is for BOTH type)
Styles > Width & Height enables users to set the modal’s width and height.( Option is for BOTH type)
Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the modal.
Image: Allows users to add a background image.
Options for setting the border radius of the entire modal.
Styles > Overlay provides options for adding an overlay to the modal. When the ‘Toggle’ button is enabled, only the modal is visible, preventing interactions outside of it.( Option is for BOTH type)
Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Under Settings Tab( Options are common for BOTH type)
12. 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.
13. 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.
14. Settings > When offers options for display timing:
Frequency: Sets how often the modal is shown to users, such as the “Number of times per day.”
Number of times: Specifies how many times the modal should appear per day.
Delay in seconds: Sets the time delay between each appearance within the specified number of times.
Trigger: Configures when the modal is to be activated:
“Immediately”: Shows the modal immediately based on prior settings.
“Delay”: Shows the modal after a specified time delay.
“On Event”: Displays the modal when a specific event occurs.
Till: Sets the duration for showing the modal to users:
“Number of times per user”: Limits the total number of times a user sees the modal.
“Number of days”: Specifies the number of days the modal remains active.
Section 3 : - Beacon editor Tool section.
In Section 3, the main “Beacon Editor” provides options such as “Preview,” “Save,” and “Publish” after initiating the “Create Modal” process.
Preview: Allows users to view their work within the same screen. To close the preview, hover over the top (header section) and click the “Close” button.
Save: Saves any changes made.
Publish: Deploys the modal with the configured settings.
Note: Once a modal is live, it cannot be edited directly. However, users can clone an existing modal, make changes, and ensure the older version is unpublished. Editing is only allowed before publishing.
Using Beacon Dashboard
The Beacon Dashboard is a dedicated interface provided to every client of Beacon to manage all available features efficiently.
Steps to Initiate “Create Modal/Slide-out”
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 “Modals/Slide-outs” Section
Go to Engagements > Announcements > Modals/Slide-outs.
This will take you to the “Modals/Slide-outs List” page.
Click on the “Create Modal/Slide-out” button to open the side pop-up page.
Choose a Template or Start from Scratch In the side pop-up page, you can either:
Select a pre-defined template, or
Choose the “Start from Scratch” option.
When Using a Default Template option
If opting for a default template, select either the “Modal” or “Slide-out” template from the list.
Click on the Continue button in the top-right corner of the side pop-up (titled “Choose Template”).
This will open the creation page with all customization options enabled.
For detailed instructions on how to customize your modal or slide-out, please refer to the documentation
Selecting the “Default Template” will navigate you to the “Create Page,” pre-configured with the default settings of the chosen template. The configuration settings will vary depending on the selected template.
The current screen is divided into three main sections:
Section - 1 : Displays the “Selected Template.”
Section - 2 : Shows the “Beacon Editor” pop-up page.
Section - 3 : Contains the “Beacon Editor” toolbar with the “Preview,” “Save,” and “Publish” buttons.
Section 1:- Beacon Template section
Section 1 represents the main modal that can be edited to meet specific requirements.
It is organized into “BLOCKS”, and additional blocks can be added as needed.
The types of blocks that can be added include:
Text Block: To insert content or text.
Header Block: To add header content or text.
Button Block: To include buttons.
Image Block: To insert images.
Video Block: To embed videos.
Embed Block: To include website content or specific URLs.
HTML Block: To write custom HTML code for a specific block and design the modal accordingly.
As an example, consider the selected template in Section 1. This template is divided into three blocks:
Image Block
Text Block
Button Block
Each block comes with options such as “Edit” for modifying the current block, available at the center of the block, and “Add” for adding new blocks, accessible on the right side and bottom of the current block.
3. Image Block: Clicking the “Edit” button (represented by a pen icon) for the Image Block opens a pop-up page and activates the “Editing Block” option as a separate widget.
Here, you can upload an image by either pasting the image URL or using the “Upload” button to select a file from your system.
A preview of the uploaded image will be displayed.
After the image is uploaded, you can adjust specific settings for the block, including “Padding,” “Margin,” “Section Border Color,” and “Alignment”.
After the image is uploaded and CSS settings are applied,
Use the “Right” button to save changes and exit the “Edit” mode for the current block.
Alternatively, you can use the “Close” icon to exit without saving.
And the “Delete” icon to remove the current block, which will prompt a confirmation pop-up.
4. Text Block: Clicking the “Edit” button (pen icon) on the Text Block highlights only the text block and displays all relevant settings, including the “Editing Widget.”
This allows you to input and format the text within the block, arranging the content according to your needs using the available settings. (Refer to the video below for details on the available options.)
5. 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”.
Available Editing Options: The following settings can be modified:
Font size
Font color
Button alignment
Button background color
Button padding
Button border configurations
Button actions
‘Block’ background color
‘Block’ padding
‘Block’ margin
‘Block’ alignment
With the “Button Actions” option we can apply action such as
Command :
This option allows the user to select from “pre-defined actions”.
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.
These actions are defined within the beacon for specific applications or clients.
These are not default suggestions but are manually configured and shown as dropdown options.
**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.
**Modal:**
Enables users to select and connect to another created modal within the beacon.
**Tooltip:**
Provides the option to select and connect to a created tooltip within the beacon.
**Flow:**
Allows selection of a created flow (e.g., a product tour or a journey of specific featured pages) and connects to it.
**NPS (Net Promoter Score) or Survey Forms:**
Users can select and connect to an NPS survey form to record analytics within the beacon.
**Next:**
Provides an action to proceed to the next step or section.
**Submit:**
Allows the action “Submit & Close” for the modal.
**Back:**
Enables the action to go “Back” from the current state of the modal.
**Skip:**
Allows users to “Skip” the current flow of the modal, if applicable.
**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)
**URL:**
Allows placement of a URL as needed.
Section 2 : Beacon Editor
In Section 2, options are provided for managing the overall behavior, CSS, and positioning settings.
Under “Type,” users can choose the desired modal type, either “simple modal” or “Slide-out.”
The “Name” field allows users to name their modal.
There are two main tabs: “Styles” and “Settings”.
Under Styles Tab
4. If the “Type” is set to “Slide-out,” this additional option under Styles > Animated are available, including radio buttons for “Slide” and “Fade” animations (refer to Section 2, point 2).( Option is Only for Type = Slide-out)
5. The options in Styles > Placement allow users to set the modal’s position on the screen.( Option is for BOTH type)
6. Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
7. Styles > Padding allows users to configure the modal’s padding.( Option is for BOTH type)
8. Styles > Width & Height enables users to set the modal’s width and height.( Option is for BOTH type)
9. Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the modal.
Image: Allows users to add a background image.
Options for setting the border radius of the entire modal.
10. Styles > Overlay provides options for adding an overlay to the modal. When the ‘Toggle’ button is enabled, only the modal is visible, preventing interactions outside of it.( Option is for BOTH type)
11. Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Note : Both types refer to Modal and slideout types.
Under Settings Tab ( Options are common for BOTH type)
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.
2. 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.
3. Settings > When offers options for display timing:
Frequency: Sets how often the modal is shown to users, such as the “Number of times per day.”
Number of times: Specifies how many times the modal should appear per day.
Delay in seconds: Sets the time delay between each appearance within the specified number of times.
Trigger: Configures when the modal is to be activated:
“Immediately”: Shows the modal immediately based on prior settings.
“Delay”: Shows the modal after a specified time delay.
“On Event”: Displays the modal when a specific event occurs.
Till: Sets the duration for showing the modal to users:
“Number of times per user”: Limits the total number of times a user sees the modal.
“Number of days”: Specifies the number of days the modal remains active.
Section 3 : Beacon editor tool
The "Main Navigation Bar" in Section 3 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.
Duplicate : will duplicate it.
Delete : will delete with conformation.
Note: Once a modal is live, it cannot be edited directly. However, users can clone an existing modal, make changes, and ensure the older version is unpublished. Editing is only allowed before publishing.
When Using “Create from Scratch” Option.
Click on the “Create from Scratch” button in the Beacon editor side panel.
This action will take you directly to the creation page.
For detailed instructions on how to customize your modal or slide-out, please refer below content.
When opted for “Create From Scratch”, then this will lead to the “Create Page” & its basic configs as default.
The current screen is divided into three main sections:
Center ( Section - 1 ): Displays the “Selected Template.”
Right ( Section - 2 ) : Shows the “Beacon Editor” pop-up page.
Main Nav Bar ( Section - 3 ): Contains the “Beacon Editor” toolbar with the “Preview,” “Save,” and “Publish” buttons.
Section 1:- Beacon Template Block section
Section 1 represents the main modal that can be edited to meet specific requirements.
It is organized into “BLOCKS”, and additional blocks can be added as needed.
The types of blocks that can be added include:
Text Block: To insert content or text.
Header Block: To add header content or text.
Button Block: To include buttons.
Image Block: To insert images.
Video Block: To embed videos.
Embed Block: To include website content or specific URLs.
HTML Block: To write custom HTML code for a specific block and design the modal accordingly.
As an example, consider the selected template in Section 1. This template is divided into three blocks:
Image Block
Text Block
Button Block
Each block comes with options such as “Edit” for modifying the current block, available at the center of the block, and “Add” for adding new blocks, accessible on the right side and bottom of the current block.
Image Block: Clicking the “Edit” button (represented by a pen icon) for the Image Block opens a pop-up page and activates the “Editing Block” option as a separate widget.
Here, you can upload an image by either pasting the image URL or using the “Upload” button to select a file from your system.
A preview of the uploaded image will be displayed.
After the image is uploaded, you can adjust specific settings for the block, including “Padding,” “Margin,” “Section Border Color,” and “Alignment”.
After the image is uploaded and CSS settings are applied,
Use the “Right” button to save changes and exit the “Edit” mode for the current block.
Alternatively, you can use the “Close” icon to exit without saving.
And the “Delete” icon to remove the current block, which will prompt a confirmation pop-up.
Note: The “Editing Widget” option is common for all block types.
3. Text Block: Clicking the “Edit” button (pen icon) on the Text Block highlights only the text block and displays all relevant settings, including the “Editing Widget.”
This allows you to input and format the text within the block, arranging the content according to your needs using the available settings. (Refer to the video below for details on the available options.)
5. 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”.
Available Editing Options: The following settings can be modified:
Font size
Font color
Button alignment
Button background color
Button padding
Button border configurations
Button actions
‘Block’ background color
‘Block’ padding
‘Block’ margin
‘Block’ alignment
With the “Button Actions” option we can apply action such as
Command :
This option allows the user to select from “pre-defined actions”.
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.
These actions are defined within the beacon for specific applications or clients.
These are not default suggestions but are manually configured and shown as dropdown options.
**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.
**Modal:**
Enables users to select and connect to another created modal within the beacon.
**Tooltip:**
Provides the option to select and connect to a created tooltip within the beacon.
**Flow:**
Allows selection of a created flow (e.g., a product tour or a journey of specific featured pages) and connects to it.
**NPS (Net Promoter Score) or Survey Forms:**
Users can select and connect to an NPS survey form to record analytics within the beacon.
**Next:**
Provides an action to proceed to the next step or section.
**Submit:**
Allows the action “Submit & Close” for the modal.
**Back:**
Enables the action to go “Back” from the current state of the modal.
**Skip:**
Allows users to “Skip” the current flow of the modal, if applicable.
**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)
**URL:**
Allows placement of a URL as needed.
Section 2 : Beacon Editor section
In Section 2, options are provided for managing the overall behavior, CSS, and positioning settings.
Under “Type,” users can choose the desired modal type, either “simple modal” or “Slide-out.”
The “Name” field allows users to name their modal.
There are two main tabs: “Styles” and “Settings”.
Under Styles Tab
If the “Type” is set to “Slide-out,” this additional option under Styles > Animated are available, including radio buttons for “Slide” and “Fade” animations (refer to Section 2, point 2).( Option is Only for Type = Slide-out)
The options in Styles > Placement allow users to set the modal’s position on the screen.( Option is for BOTH type)
Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
Styles > Padding allows users to configure the modal’s padding.( Option is for BOTH type)
Styles > Width & Height enables users to set the modal’s width and height.( Option is for BOTH type)
Styles > Box includes:( Option is for BOTH type)
Radio buttons for:
Color: Sets the background color of the modal.
Image: Allows users to add a background image.
Options for setting the border radius of the entire modal.
Styles > Overlay provides options for adding an overlay to the modal. When the ‘Toggle’ button is enabled, only the modal is visible, preventing interactions outside of it.( Option is for BOTH type)
Styles > Stroke allows users to set the modal’s border stroke.( Option is for BOTH type)
Note : Both types refer to Modal and slideout types.
Under Settings Tab ( Options are common for BOTH type)
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.
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.
Settings > When offers options for display timing:
Frequency: Sets how often the modal is shown to users, such as the “Number of times per day.”
Number of times: Specifies how many times the modal should appear per day.
Delay in seconds: Sets the time delay between each appearance within the specified number of times.
Trigger: Configures when the modal is to be activated:
“Immediately”: Shows the modal immediately based on prior settings.
“Delay”: Shows the modal after a specified time delay.
“On Event”: Displays the modal when a specific event occurs.
Till: Sets the duration for showing the modal to users:
“Number of times per user”: Limits the total number of times a user sees the modal.
“Number of days”: Specifies the number of days the modal remains active.
Section 3 : Main Nav Bar
The "Main Navigation Bar" in Section 3 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.
Duplicate : will duplicate it.
Delete : will delete with conformation.
Note: Once a modal is live, it cannot be edited directly. However, users can clone an existing modal, make changes, and ensure the older version is unpublished. Editing is only allowed before publishing.
Note: If you have any questions, please don't hesitate to reach out to us at Support@beacon.li
Last updated
