> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-1-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-1-1/advanced-integration.md).

# 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.

```html
<script async src="https://asset.fwscripts.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>\*\** \
\&#xNAN;*※: **Q01bn6Y** will be the chat channel ID*

{% tabs %}
{% tab title="Visitor Widget" %}
The Visitor Widget is an easy way to provide one-to-one service to visitors. It appears automatically and guides visitors towards sales help.

<img src="/files/CPWX0kClO0Nav0AWzeYr" alt="" data-size="original">

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

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

{% endtab %}

{% tab title="Smart Entry Point" %}
The `fw-agent-status` web component is a powerful tool designed to display the availability status of sales agents in your web application. This component utilizes slots to seamlessly integrate with your existing HTML structure, providing flexibility and ease of use. To display the widget, ensure that you have [embed script](#embed-script) present on your page.

### Properties

#### `action` (String, optional, default:  startCall)

Specifies the action to be performed when the user interacts with the component. Possible values are:

* `"startCall"`: Initiates a call when the user interacts with the component.
* `"startChat"`: Initiates a chat when the user interacts with the component.
* `"showWidget"`: Displays a widget when the user interacts with the component.

### Slots

The `fw-agent-status` component supports the following slots:

* **available**: Content to be displayed when the sales agent is available.
* **not-available**: Content to be displayed when the sales agent is not available.
* **loading**: Content to be displayed while the component is loading or determining the agent's availability.

Example:

```html
<fw-agent-status>
  <div slot="available">
    Sales Agent is Available
  </div>
  <div slot="not-available">
    Sales Agent is Not Available
  </div>
  <div slot="loading">
    Loading...
  </div>
</fw-agent-status>
```

### Styling

Feel free to customize the component's appearance by applying your styles. The component uses shadow DOM to encapsulate its styles, ensuring that your styles won't affect other elements on the page.

**Note**: Before the `fw-agent-status` component is defined, it will render all slots. This can be mitigated by applying CSS to hide the slots until the component is defined. The following example shows how to show only the Loading slot before the widget is initialized.

Example CSS:

```css
fw-agent-status:not(:defined) [slot="available"], fw-agent-status:not(:defined) [slot="not-available"] {
  display: none;
}
```

{% endtab %}

{% tab title="JS Entry Point" %}
The External API provides a set of methods to control and interact with a Live Helper in your page. This API allows you to dynamically show, initiate a chat, or start a call. If you need access to the external API, make sure to include [embed script](#embed-script) on your page.

### API

#### \_fwn.liveHelper.actions.showWidget()

Displays the web component.

#### \_fwn.liveHelper.actions.startCall()

Initiates a call with sales associate within the Live Helper.

#### \_fwn.liveHelper.actions.startChat()

Initiates a chat with sales associate within the Live Helper.

### Initialization

Ensure that the `_fwn` object is present in the `window` scope before using any of the API methods. If the object is not available, you need to wait for `fw:ready` event, before you can continue.

#### Example

```javascript
<script>
    function showWidget() {
        window._fwn.liveHelper?.actions.showWidget()
    }
    if (window._fwn && window._fwn.liveHelper) {
        // _fwn is available, use the API immediately
        showWidget()
    } else {
        // Wait for fw:ready event
        document.addEventListener('fw:ready', ()=>{
            showWidget()
        });
    }
</script>
```

{% endtab %}

{% tab title="URL Entry Point" %}
The behavior of the Live Helper Widget can be controlled by including the `fw_oto_action` parameter in the URL. If you need to control widget with URL, make sure to include [embed script](#embed-script) on your page. The possible values for parameter `fw_oto_action`  are:

* **show:** Show the widget.
* **call:** Start a call using the widget.
* **chat:** Start a chat using the widget.

#### Example Usage:

* To show the widget:

  ```
  https://fw.tv/live-helper-no-widget.html?fw_oto_action=show
  ```
* To start a call:

  ```
  https://fw.tv/live-helper.html?fw_oto_action=call
  ```
* To start a chat:

  ```
  https://fw.tv/live-helper.html?fw_oto_action=chat
  ```

{% endtab %}
{% endtabs %}

## Conversion Tracking

To track One-to-One influenced GMV, please check the [Conversion Tracking](https://docs.firework.com/home/web/integration-guide/shopping-integration-v2/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.&#x20;

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.

```html
// Embed script parameters. Note that it needs `data-fwparam_` prefix.
<script async src="https://asset.fwscripts.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:

```javascript
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:

```javascript
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.&#x20;

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

![](/files/zQ497frlE5C4QPuEuTxk)

#### 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.`

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