Attributes

Beacon Docs
Back to Dashboard
Search…
Beacon
Attributes
Attributes are standard HTML attributes that is used to change certain settings of the beacon window. Attributes can be directly used in the HTML page or can be modified using JavaScript. Examples are shown below.
<!-- Using HTML to modify 'pos' attribute -->
<beacon-app key="<BEACON_KEY>" pos="right"></beacon-app>
// Using JS to modify 'pos' attribute
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.pos = 'right';
Note that in HTML kebab-case must be used, whereas in JavaScript camelCase is used.
key
Type: String
It is used only when beacon window is generated. Once beacon window is loaded, this attribute has no effect.
Key is a unique string that is used to identify your beacon window in the database. Changing this attribute only has affect before the page is loaded, as data from the server is received only once before showing the beacon window.
Key is provided in the Beacon editor under Advanced section.
pos
Type: String
This attribute refers to the position of the beacon window on your web page. As of now, the SDK supports only two positions which can be set as follows.
Bottom Right - beacon.pos = 'right';
Bottom Left - In all other cases.
Position can be updated anytime even when the beacon window is loaded. The updates take place instantly.
primaryColor
Type: String of a valid hex color code
This attribute refers to the main theme color used to style the beacon window. It can be changed using the SDK and would override the primaryColor that was set on the dashboard.
Updating this attribute, also changes the text color so that text is readable on different colored backgrounds.
Usage of this attribute is given below.

<beacon-app key="<BEACON_KEY>" primary-color="#ff0000"></beacon-app>
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.primaryColor = '#ff0000';
callMessage
Type: String
This attribute is the message that shows up when the user has just visited the page and not yet opened the beacon window. It must be used wisely to get visitor's attention to open the beacon window. Read More
Usage of this attribute is given below.

<beacon-app key="<BEACON_KEY>" call-message="Hello World"></beacon-app>
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.callMessage = 'Hello World';
If callMessage is set to "" (empty string), a red notification dot will be shown.
​
SDK
Functions
Last modified 4yr ago
Copy link
On this page
key
pos
primaryColor
callMessage