Options include all the settings that the editor provides for controlling the content/design of the beacon window. These options come with hints and links to parts of the docs for additional help. When you change a setting here, the changes appear on the Live preview section.
The options section is divided into 4 main parts, which are further explained below.
This part includes the basic content that would be displayed on the beacon window.
Text in this field shows up when the user has just visited the page and not yet opened the beacon window. It can be used to show an attractive message, that makes the visitor open the beacon window to see further content.
If the preview message is left empty, then a red notification dot is shown to get visitor's attention. The color/content of this dot cannot be modified as of now.
This option allows you to show your links to various social media platforms that have been added to your account, on the beacon window.
You can also follow this video tutorial for step-by-step instructions.
This part includes the main modules of the beacon window. They can be added using the
Add Modulebutton and order can be modified by dragging the modules in the required order.
Modules are fundamental building blocks of the beacon window. These modules allow you to add different types of content which gets displayed in a consistent manner that matches the theme of your beacon window. Every module comes with a set of options that control the content of that module.
Type of a module is based on the content it displays. The following types of modules are available in Beacon as of now:
- List item
Buttons can be used to execute certain commands on your website. They are deeply integrated with the SDK and allow you to attach event listeners to them.
Video module is used to display a YouTube video in the beacon window. Video can be embedded by just adding the
video IDin the provided text field.
The embedded YouTube player does not show the player controls like the progress bar, and other settings to accommodate with the beacon window size.
This part includes the options to customize the look & feel of the beacon window. Design of the beacon window cannot be modified by directly using custom CSS on the webpage. All the styling comes from the server.
This toggle allows you to use a different primary color for the beacon window. If this option is switched off, Beacon would try to get the primary color of the webpage it is embedded on. This can be achieved by adding the following
metatag to the
headsection of your HTML page.
<meta name="theme-color" content="<HEX_COLOR_CODE>">
<!-- Replace <HEX_COLOR_CODE> with a hex color.
For example, #5cb1db -->
The primary color is the main color which is used in certain parts of your beacon window. This color plays a crucial role in making your beacon window stand out with rest of your page. To make Beacon look like a part of your page, it is recommended that you set the primary color same as your brand color.
This part includes advanced/rarely used options of your beacon window. These settings do not modify the content/design of Beacon, but is used to control Beacon for internal purposes. You would find options to rename, delete Beacon in this part.
The name is used for your reference so that you can uniquely identify the beacon window in your dashboard. It cannot be seen by your website visitors and can be modified to suit your needs.