How to create Banners/Info-Island?
Last updated
Last updated
Beacon Banners and Info-Islands are dynamic announcement tools designed to enhance user engagement and communication within the Beacon platform. These features allow you to create fully customizable banners and info-islands to deliver important messages, updates, or promotional content directly to your users.
What Are Banners?
Banners are visually prominent horizontal messages typically displayed at the top or bottom of an application interface. They are ideal for:
Highlighting critical announcements.
Providing system updates.
Promoting new features or services.
Customization Options:
Content: Add custom text, images, or links.
Appearance:
Choose background and text colors for branding.
Add animations for emphasis (e.g., sliding in or fading).
Positioning: Place banners at the top or bottom of the screen.
Interactivity: Include buttons or links for users to take immediate action.
Example Use Cases:
Product Launch: "Introducing our new feature! Click here to learn more."
Maintenance Alert: "Scheduled maintenance on Jan 10, 2025. Some features may be unavailable."
What Are Info-Islands?
Info-Islands are compact, unobtrusive pop-up notifications that appear within specific sections of your application. They are perfect for:
Providing contextual information.
Guiding users through new workflows.
Offering tips or recommendations without interrupting the user experience.
Customization Options:
Content: Tailor the text and visuals to match the context.
Placement: Anchor info-islands to relevant UI elements, such as buttons or forms.
Behavior:
Trigger display based on user actions, such as hovering or clicking.
Set time-based triggers for proactive engagement.
Design:
Customize shape, color, and size to align with your branding.
Include icons or animations for better visual impact.
Example Use Cases:
Feature Tip: "Click here to try the new dashboard filtering options."
Form Assistance: "Your password must be at least 8 characters long."
User Engagement: Keep users informed and engaged with real-time updates or helpful tips.
Customization: Fully align messages with your brand’s tone, style, and visual identity.
Non-Intrusive Communication: Deliver critical information without disrupting the user experience.
Action-Oriented: Include call-to-action buttons or links to drive specific user behaviors.
Accessing the Feature:
Navigate to the Beacon Dashboard and select the Announcements section.
Choose Banners or Info-Islands depending on the type of message you want to create.
2. Creating a New Announcement:
Define the content, appearance, and behavior of the banner or info-island.
Preview changes in real-time to ensure the design meets your requirements.
3. Deploying the Announcement:
Set target audiences and conditions for display (e.g., user segments, triggers).
Save and activate the announcement to make it live.
By leveraging Beacon Banners and Info-Islands, you can deliver highly effective and visually appealing announcements, enhancing the overall user experience and driving meaningful engagement.
Differences Between Banners and Info-Islands
While both Banners and Info-Islands are essential announcement tools within Beacon, they differ significantly in terms of behavior, interactivity, and use cases. Here's a detailed explanation of their distinct characteristics:
Characteristics:
Static in Nature:
Banners are typically stationary and remain fixed in their position (e.g., at the top or bottom of the screen).
They do not move or respond dynamically to user interactions such as hovering or clicking.
2. Persistent Visibility:
Once displayed, banners remain visible until they are dismissed manually (if a close option is enabled) or until the user navigates away from the page.
3. Ideal for High-Impact Announcements:
Since banners are always visible, they are best used for messages that need prolonged attention, such as system updates or promotional content.
Examples:
A static maintenance banner at the top of the screen:
"We’re performing scheduled maintenance on Jan 15, 2025. Click here for details."
A fixed promotional banner at the bottom:
"Upgrade to Premium for exclusive features!"
Characteristics:
Dynamic in Behavior:
Info-Islands are designed to interact with user actions, such as hovering or clicking.
They can automatically scroll into view, expand, or reveal more content when triggered by the user.
2. Contextual Engagement:
Unlike banners, which are globally visible, info-islands are typically tied to specific UI elements or workflows.
For example, hovering over a button may reveal an info-island with additional details or guidance.
3.Compact and Temporary:
Info-Islands are small, concise, and designed to appear and disappear based on specific triggers.
They do not occupy permanent space on the screen, making them less intrusive.
Examples:
A dynamic tooltip-like info-island that appears on hover:
Hovering over a form field displays: "Enter your email address to receive updates."
An auto-scrolling info-island triggered on a button click:
Clicking "Learn More" slides in an info-island with detailed instructions or links.
Steps to initiate “Create Banners/Info-Island” 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.
Navigate to the “footer section” of the page to locate the Beacon Visual Editor as shown in the above image.
In the footer section we can navigate to creation of flows page in two ways. To create a “Create Banners/Info-Island", 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 “Banners”. This will open an editor which consists of an existing Banners/Info-Island list as well as options for creating new ones.
Note: Do not modify the “Dropdown” on the editor page, as it is set to “Banners” by default. If changed, it will navigate to different feature lists within the same pop-up window based on the selection.
An alternative way to access the flows page is through the footer section, where you will find the “Create” button. Clicking on it will open a popup window. From there, select “Banners/Info-Island” to navigate to the editor flows page. In this section, you will be prompted to choose whether you want to create “Banners” or “Info-Island” proceed with an existing design or can opt for “Create from scratch ” , as per our preference. Refer the video below,
Banners/Info-Island Template Design options: We can use the default pre-configured design template and edit on it or can create a design template for tooltips of our choice by using options as
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 per the below image section 1 : Editor section and section 2 : Footer section, Section 1 :-
Type:
This option lets you select the type of content you're creating.
You can choose between two types:
Banner: A standard banner that can be displayed at the top or bottom of the screen.
Info-Island (Dynamic Island): A more dynamic, interactive element that sits within a widget, typically offering a more immersive experience with the ability to scroll and stay fixed in a designated area.
2. Name:
This is an internal field where you can assign a name to the item. This name will help you identify the item within the system, but it will not be visible to the users.
This option is available for both Banner and Dynamic Island types, allowing you to keep track of multiple elements.
3. Summary:
For Dynamic Island only, you can add a short summary or note that can be used within the design of the announcement.
This summary text can be placed alongside or within the widget in the Dynamic Island, helping to provide context to users.
This option is not available for Banner type elements, as Banners typically do not include detailed summaries.
4. Text Color:
This option allows you to choose the color of the text for the Summary you’ve entered.
You can pick from a palette of colors to ensure the text is readable and fits the overall design and theme of the announcement.
This field is only available if you have entered a Summary for the Dynamic Island type. For Banner elements, this feature does not apply.
For "Banner" Type:
Placement/Position:
Under the Placement/Position section in the Styles tab, you will have options to set the position of the banner on the screen.
You can choose between:
Top of the Screen: The banner will appear at the top of the screen, visible immediately upon loading the page or app.
Bottom of the Screen: The banner will be displayed at the bottom of the screen, which may be suitable for less intrusive announcements.
For "Dynamic Island" Type:
Placement/Scroll:
If you're creating a Dynamic Island, the Placement/Scroll option allows you to adjust how the widget behaves within its designated space.
You can choose between:
Fixed: The widget stays in a fixed position within the Dynamic Island, and it remains in place as users interact with the content.
Scrollable: The widget is scrollable within the Dynamic Island, meaning users can scroll through the widget's content for a more dynamic, interactive experience.
The Placement/Scroll options allow for more flexibility and customization, depending on how you want the content to behave and interact with users.
Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
Styles > Padding allows users to configure the Banners/Info-Island padding.( Option is for BOTH type)
Styles > Width & Height enables users to set the Banners/Info-Island 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 Banners/Info-Island.
Styles > Overlay provides options for adding an overlay to the Banners/Info-Island. When the ‘Toggle’ button is enabled, only the Banners/Info-Island is visible, preventing interactions outside of it.( Option is for BOTH type)
Styles > Stroke allows users to set the Banners/Info-Island border stroke.( Option is for BOTH type)
Who (Specifies the audience for the Banners/Info-Island):
“Everyone” Radio Button: Select this option to display the Banners/Info-Island for all users of the application.
“Segment” Radio Button: Choose this option to restrict the Banners/Info-Island to specific users or user groups, based on pre-defined "Segment" rules within Beacon.
Where (Determines where the Banners/Info-Island is shown):
“Everywhere” Radio Button: This option will make the Banners/Info-Island appear on any page within the application, ensuring it is seen throughout.
“Segment” Radio Button: Use this option to restrict the Banners/Info-Island to specific pages or URLs based on the rules you have set up under the "Segment" functionality.
When (Controls display timing for the Banners/Info-Island):
Frequency: This setting lets you control how often the Banners/Info-Island is shown to users.
Number of times per day: Select this option to specify how many times the Banners/Info-Island should appear within a day.
Number of times: Defines the number of occurrences per day.
Delay in seconds: Specifies the time delay between each appearance if the Banners/Info-Island is set to show multiple times.
Always: Choose this if you want the Banners/Info-Island to always be shown, continuously without restrictions.
Trigger (Configures when the Banners/Info-Island should be activated):
“Immediately”: This trigger will make the Banners/Info-Island appear immediately, based on the settings you have configured.
“Delay”: Use this option to display the Banners/Info-Island after a specified delay, allowing time before it is shown.
“On Event”: This setting activates the Banners/Info-Island when a specific event occurs within the application, such as user interaction or system action.
Till (Determines how long the Banners/Info-Island remains visible):
“Number of times per user”: Limits how many times a single user will see the Banners/Info-Island in total.
“Number of days”: Defines the number of days for which the Banners/Info-Island will remain active before being deactivated.
This section provides additional options for expanding the behavior of Dynamic Island:
Click: Choose this option to activate the Dynamic Island when the user clicks on it. This provides an interactive experience where users can engage with the content directly.
Hover: Select this option to make the Dynamic Island expand or activate when the user hovers their mouse over the area. This option creates a more subtle interaction, where the content appears as soon as the user’s cursor is over the widget.
These options provide a customizable and flexible way to manage the display and behavior of Banners and Info-Islands, ensuring they serve the right audience at the right time with the right level of interactivity.
In Section 2, the main “Beacon Editor” provides options such as “Preview,” and “Publish” after initiating the “Create Banners/Info-Island ” 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.
Publish: Deploys the tooltip/Hotspots with the configured settings.
The Beacon Dashboard is a dedicated interface provided to every client of Beacon to manage all available features efficiently.
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 > Banners/Info-Islands.
This will take you to the “Banners/Info-Islands List” page.
Click on the “Create Banners/Info-Islands” button to open the create page.
Choose a Template or Start from Scratch
Select a pre-defined template, or
Choose the “Start from Scratch” option.
The “create from scratch” option gives us a different block wiser creation facility .
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.
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.
Type:
This option lets you select the type of content you're creating.
You can choose between two types:
Banner: A standard banner that can be displayed at the top or bottom of the screen.
Info-Island (Dynamic Island): A more dynamic, interactive element that sits within a widget, typically offering a more immersive experience with the ability to scroll and stay fixed in a designated area.
Name:
This is an internal field where you can assign a name to the item. This name will help you identify the item within the system, but it will not be visible to the users.
This option is available for both Banner and Dynamic Island types, allowing you to keep track of multiple elements.
Summary:
For Dynamic Island only, you can add a short summary or note that can be used within the design of the announcement.
This summary text can be placed alongside or within the widget in the Dynamic Island, helping to provide context to users.
This option is not available for Banner type elements, as Banners typically do not include detailed summaries.
Text Color:
This option allows you to choose the color of the text for the Summary you’ve entered.
You can pick from a palette of colors to ensure the text is readable and fits the overall design and theme of the announcement.
This field is only available if you have entered a Summary for the Dynamic Island type. For Banner elements, this feature does not apply.
For "Banner" Type:
Placement/Position:
Under the Placement/Position section in the Styles tab, you will have options to set the position of the banner on the screen.
You can choose between:
Top of the Screen: The banner will appear at the top of the screen, visible immediately upon loading the page or app.
Bottom of the Screen: The banner will be displayed at the bottom of the screen, which may be suitable for less intrusive announcements.
2. For "Dynamic Island" Type:
Placement/Scroll:
If you're creating a Dynamic Island, the Placement/Scroll option allows you to adjust how the widget behaves within its designated space.
You can choose between:
Fixed: The widget stays in a fixed position within the Dynamic Island, and it remains in place as users interact with the content.
Scrollable: The widget is scrollable within the Dynamic Island, meaning users can scroll through the widget's content for a more dynamic, interactive experience.
The Placement/Scroll options allow for more flexibility and customization, depending on how you want the content to behave and interact with users.
3. Styles > Dismiss (Close button) provides options for positioning the “Close” icon.( Option is for BOTH type)
4. Styles > Padding allows users to configure the Banners/Info-Island padding.( Option is for BOTH type)
5. Styles > Width & Height enables users to set the Banners/Info-Island width and height.( Option is for BOTH type)
6. 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 Banners/Info-Island.
7. Styles > Overlay provides options for adding an overlay to the Banners/Info-Island. When the ‘Toggle’ button is enabled, only the Banners/Info-Island is visible, preventing interactions outside of it.( Option is for BOTH type)
8. Styles > Stroke allows users to set the Banners/Info-Island border stroke.( Option is for BOTH type)
1. Who (Specifies the audience for the Banners/Info-Island):
“Everyone” Radio Button: Select this option to display the Banners/Info-Island for all users of the application.
“Segment” Radio Button: Choose this option to restrict the Banners/Info-Island to specific users or user groups, based on pre-defined "Segment" rules within Beacon.
2. Where (Determines where the Banners/Info-Island is shown):
“Everywhere” Radio Button: This option will make the Banners/Info-Island appear on any page within the application, ensuring it is seen throughout.
“Segment” Radio Button: Use this option to restrict the Banners/Info-Island to specific pages or URLs based on the rules you have set up under the "Segment" functionality.
3. When (Controls display timing for the Banners/Info-Island):
Frequency: This setting lets you control how often the Banners/Info-Island is shown to users.
Number of times per day: Select this option to specify how many times the Banners/Info-Island should appear within a day.
Number of times: Defines the number of occurrences per day.
Delay in seconds: Specifies the time delay between each appearance if the Banners/Info-Island is set to show multiple times.
Always: Choose this if you want the Banners/Info-Island to always be shown, continuously without restrictions.
Trigger (Configures when the Banners/Info-Island should be activated):
“Immediately”: This trigger will make the Banners/Info-Island appear immediately, based on the settings you have configured.
“Delay”: Use this option to display the Banners/Info-Island after a specified delay, allowing time before it is shown.
“On Event”: This setting activates the Banners/Info-Island when a specific event occurs within the application, such as user interaction or system action.
Till (Determines how long the Banners/Info-Island remains visible):
“Number of times per user”: Limits how many times a single user will see the Banners/Info-Island in total.
“Number of days”: Defines the number of days for which the Banners/Info-Island will remain active before being deactivated.
This section provides additional options for expanding the behavior of Dynamic Island:
Click: Choose this option to activate the Dynamic Island when the user clicks on it. This provides an interactive experience where users can engage with the content directly.
Hover: Select this option to make the Dynamic Island expand or activate when the user hovers their mouse over the area. This option creates a more subtle interaction, where the content appears as soon as the user’s cursor is over the widget.
These options provide a customizable and flexible way to manage the display and behavior of Banners and Info-Islands, ensuring they serve the right audience at the right time with the right level of interactivity.
The "Main Navigation Bar" in Section 2 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. ( After Creation it enables )
Duplicate : will duplicate it.
Delete : will delete with conformation.
Note: If you have any questions, please don't hesitate to reach out to us at Support@beacon.li
Log In to the Beacon Platform Visit and log in using your email ID. An OTP will be sent to the provided email for verification (if access has been granted).
