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';

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.

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.

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';

​