Guide Event Broadcasting

Event broadcasting lets web developers listen for events broadcasted from the Guide widget, such as a template being displayed or an entry point being clicked on. Developers can then pass the event data to third-party systems of record, such as an analytics reporting tool of their choice. Event broadcasting is intended for people responsible for integrating Guide with a website. Experience with front-end web technologies including HTML, CSS, and JavaScript is required.

Listening for Events

The following example demonstrates listening for the templateDisplayed event on the page:

window.addEventListener("templateDisplayed", function(e) {console.info("Event type: " +  e.type + "  || Detail: " + JSON.stringify(e.detail));});

Or, here is an example that includes loading Guide on a page and listening for the templateDisplayed event:

<script>
(function(n,u){   
 window.CXoneDfo=n,   
 window[n]=window[n]||function(){(window[n].q=window[n].q||[]).push(arguments)},window[n].u=u, e=document.createElement("script"),e.type="module",e.src=u+"?"+Math.round(Date.now()/1e3/3600), document.head.appendChild(e) 
})('cxone','<LOADER-ID>');

cxone('init', '<TENANT-ID>');
cxone('guide', 'init');

const guideEvents = ['templateDisplayed'
];
      
function handleEvent(event) {  
  console.log('Entire event:', event); 
  console.log('Event Detail property:', event.detail);
}
guideEvents.forEach(eventType => {
  window.addEventListener(eventType, handleEvent);
});      
</script>

These are the Guide events:

Template events	proactive offer events
templateDisplayed	proactiveOfferDisplayed
menuOpened	proactiveOfferSuccessful
menuClosed	proactiveOfferDeclined
entrypointOpened
entrypointClosed
pcqDisplayed
pcqFieldPopulated
pcqSubmitted

Guide Event Payload

The Guide events have the properties of a CustomEvent. The payload always includes:

• type — The event type, for example, templateDisplayed or menuOpened.

• detail — A structure with properties relevant to the event.

For example:

templateDisplayed

Use the templateDisplayed event to monitor for when a template appears on a page. The template can be a single channel template, multiple channel template, or a customer portal template.

The event returns the following:

• type is set to templateDisplayed.

• detail payload, which is specific to the type of template displayed.

menuOpened

Use the menuOpened event to monitor for when the menu button is clicked or when a menu is displayed on page reload. This event pertains to multiple channel templates and customer portal templates.

The event returns the following:

• type is set to menuOpened.

• detail payload, which is specific to the type of menu opened. Options are:

menuClosed

Use the menuClosed event to monitor for when the button is clicked to hide the customer portal or multiple channel template.

The event returns the following:

• type is set to menuClosed.

• detail payload, which is specific to the type of menu closed. Options are:

entrypointOpened

Use the entrypointOpened event to monitor for when an entry point is opened. An entry point is considered opened when a visitor clicks an entry point button or when an entry point is displayed on page refresh.

For customer portal templates, the following are considered an entry point being opened:

• When the Guide button is clicked after an entry point was previously opened and minimized.
• The visitor clicks into an article to read it.
• The visitor clicks the More Articles link.
• The visitor does a knowledge base search.
• The visitor clicks the button to continue a chat.

The event returns the following:

• type is set to entrypointOpened.

• detail payload for entry point.

entrypointClosed

Use the entrypointClosed event to monitor for when an entry point is closed. An entry point is closed when the channel defined in the entry point is dismissed.

In the case of a customer portal, if you switch entry point buttons, the old entry point is closed before the new entry point is displayed.

The event returns the following:

• type is set to entrypointClosed.

• detail payload for entry point.

pcqDisplayed

Use the pcqDisplayed event to monitor for when a precontact survey is displayed.

The event returns the following:

pcqFieldPopulated

Use the pcqFieldPopulated event to monitor for when a field in a precontact survey is edited. Note that this event is not broadcasted if a visitor removes a value from a field and the field is blank.

The event returns the following:

pcqSubmitted

Use the pcqSubmitted event to monitor for when a precontact survey is successfully submitted by the visitor.

The event returns the following:

proactiveOfferDisplayed

Use the proactiveOfferDisplayed event to monitor for when a proactive offer is displayed on a page.

The event returns the following:

proactiveOfferSuccessful

Use the proactiveOfferSuccessful event to monitor for when a proactive offer is successful. A proactive offer is successful when the visitor clicks a call to action button. In the case of a chat call to action button, the visitor needs to start the chat. In the case of email, the visitor needs to send an email message.

The event returns the following:

proactiveOfferDeclined

Use the proactiveOfferDeclined event to monitor for when a proactive offer is declined on a page. A proactive offer is declined when the visitor clicks a call to action button defined as Declined or clicks the X close icon in upper right corner of the proactive offer.

The event returns

Button Details on Payloads

Payloads for template.buttons

The payload varies based on the type of channel referenced in a template.

Payloads for templateButton

Details about entry point buttons (templateButton).

Action Types for Proactive Offers

The action type for the proactive offer can be starting a chat, clicking an entry point, clicking into an article, or closing the proactive offer.

Or, if the visitor closes the proactive offer with the X button.