Events

SDK comes with certain events that can be attached to the beacon-app element. They work the same way how normal events work in JavaScript.
Standard usage of all events are given below.
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.addEventListener('<EVENT_NAME>', function(event) {
  /* Event body goes here */
});
The event object includes the standard properties along with special properties that come with the SDK.
Following are different <EVENT_NAME> that is supported in the SDK.
ready
This event is fired when the beacon window is ready and is about to be shown to the visitor. The data of the beacon has already loaded, but callMessage is not yet shown to the visitor.
This is the best time to modify the callMessage, primaryColor attribute of beacon window. Read more on callMessage, primaryColor​
Usage
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.addEventListener('ready', function() {
  /* Body goes here. Given below is how you can modify
  the callMessage attribute */
  beacon.callMessage = 'Hello World';
});
buttonclick
This event is fired when a button is clicked in the beacon window. Since Beacon tries to use Shadow DOM, it is not possible to directly attach an event listener to a button inside the beacon window. Hence, this event exposes the click listener of buttons.
Button name must be set in the Beacon editor. If it is not added, button would not show up once beacon window is embedded.
Button name plays a crucial role in this event. Since a beacon window can have multiple buttons, it is cumbersome to add event listeners for every button click. Hence, the SDK uses the name of the button to uniquely identify each button in the beacon window.
Make sure you have different button names, otherwise it will become hard to identify which button was clicked.
Usage
The name of the button is available in the event object of the event listener. It can be used as follows
var beacon = document.getElementsByTagName('beacon-app')[0];
beacon.addEventListener('buttonclick', function(e) {
  /* All the custom data is available in the 'detail'
  property */
​
  if (e.detail.event == 'myButton1') {
    /* Body of myButton1 */
  }
  else if (e.detail.event == 'myButton2') {
    /* Body of myButton2 */
  }
  
  /* 'myButton1' and 'myButton2' are names of buttons
  which can be set in the Beacon editor */
  
});
The above usage of the button events are preferred as this prevents you from adding multiple event listeners to the beacon-app element.
Functions
Last modified 4yr ago