Advanced Integration

Embed Script

To integrate the Widget into your site, start by placing the embed script on every relevant page. This script initializes the widget and ensures seamless call transitions during co-browsing sessions.

<script async src="https://asset.fwcdn3.com/js/live-helper.js" data-fwparam_chat_channel_id="[ChatChannelId]"></script>

Note: Please update the above snippet where it has [ChatChannelId] to the business's chat channel ID. The chat channel ID can be found on the business portal URL. Example: https://business.fireworktv.com/business/5EROOo/chat_channel/Q01bn6Y ※: Q01bn6Y will be the chat channel ID

The Visitor Widget is an easy way to provide one-to-one service to visitors. It appears automatically and guides visitors towards sales help.

To display the widget, ensure that both the embed script and the live helper web component are present on pages where you want the Visitor Widget to be visible.

<fw-live-helper style="z-index:9007199254740991; position:fixed"></fw-live-helper>

Conversion Tracking

To track One-to-One influenced GMV, please check the Conversion Tracking doc to implement the tracking.

Customization

Our widget can take optional embedding parameters to configure the widget for your requirements. You can provide the parameters as data attributes on the embed script.

When choosing the embed script approach, the settings will affect other FW widgets on the same site. It may be more desirable for settings such as localization.

// Embed script parameters. Note that it needs `data-fwparam_` prefix.
<script async src="https://asset.fwcdn3.com/js/live-helper.js" data-fwparam_chat_channel_id="[ChatChannelId]"></script>

Co-browsing

The Firework visitor widget offers advanced co-browsing capabilities, enabling System Administrators (SA) to gain deeper insights into visitors. Based on local privacy regulations, these features might require user consent before activation.

To make changes to the default co-browsing settings on your chat channel, please contact technical support.

For configuring co-browsing at the visitor level, you can use an API call to enable or disable co-browsing:

window._fwn.liveHelper.actions.enableFeatures(['monitoring']);
// OR
window._fwn.liveHelper.actions.disableFeatures(['monitoring']);

Example Integration with OneTrust

An example integration with the OneTrust privacy and security software provider can look like this:

window.addEventListener('consent.onetrust', function(event) {
  const updateFeatures = () => {
    if (window._fwn && window._fwn.liveHelper) {
      // Enable or disable feature based on OneTrust consent ID
      if (event.detail.length > 0 && event.detail.includes('C0002')) {
        window._fwn.liveHelper.actions.enableFeatures(['monitoring']);
      } else {
        window._fwn.liveHelper.actions.disableFeatures(['monitoring']);
      }
    }
  }
  
  if (window._fwn) {
    updateFeatures();
  } else {
    document.addEventListener('fw:ready', () => updateFeatures());
  }
});

This script listens for the consent.onetrust event and updates the co-browsing feature based on the provided consent details.

Positioning

We offer various customization options for seamless integration with your website's design.

Distance from the bottom edge

Modify the --fw-live-helper-bottom CSS variable to change the vertical position.

body {
    --fw-live-helper-bottom: 100px;
}

Widget placement

Use the live_helper_placement parameter to define whether the widget should be placed in the bottom right (BOTTOM_RIGHT) or left (BOTTOM_LEFT)corner. The default value is BOTTOM_RIGHT.

<script async src="https://asset.fwcdn3.com/js/live-helper.js" 
  data-fwparam_live_helper_placement="BOTTOM_LEFT"></script>

Last updated