Options
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.
Part of Beacon SDK
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.
Once the beacon window is opened, the message would get hidden and would not show up for the current session.
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.
Social links must be added in Account Settings as they remain linked to your main Beacon account. Without adding the social links in the account, buttons won't be visible.
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 Module button 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
Button
Video
Image
Part of Beacon SDK
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.
Event Name option is used to identify a button when the event listeners are attached to them in the code. Imagine a situation, where you have multiple buttons in the beacon window. The SDK allows you to attach only one event listener to the button click. This Event name is then used to find out which button was clicked in the event callback function.
Refer Button events in SDK to know more.
Video module is used to display a YouTube video in the beacon window. Video can be embedded by just adding the video ID in the provided text field.
Do not add YouTube video links to embed the video directly. Video ID is required to show the video correctly.
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 meta tag to the head section of your HTML page.
<meta name="theme-color" content="<HEX_COLOR_CODE>"><!-- Replace <HEX_COLOR_CODE> with a hex color.For example, #5cb1db -->
Read more on theme color meta tag
To set a custom primary color, switch this option on. This would show an additional option with a color picker to choose a custom color.
This option is useful when you want different colored beacon windows on multiple web pages.
Part of Beacon SDK Option is only available if Use custom color is switched on.
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.
Beacon automatically sets a text color based on the primary color you use. This improves the readability of text on different colored backgrounds.
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.
It is recommended that you use different names for your beacon windows so that you can identify them in your dashboard.