JS SDK How it works

On loading the page, the Bridger SDK will first try to find the 'div' element with the class bridger-container，if found, the SDK will insert the widget elements into this div, if not found, the SDK will create a div inside document.body with a class named as bridger-container.

If you want to control the widget container directly, you can create a div with a class named bridger-container, and the SDK will insert the widget elements into this div on starting.

<script
  src="https://static.bridger.chat/sdk/v0.2.2/widget.js"
  type="text/javascript"
  async
></script>
<script type="text/javascript">
  let widget;

  // initialize widget. Feel free to add parameters inside Bridger.initWidget in JSON format to tweak the style of the widget.
  window.onload = function () {
    widget = Bridger.initWidget({ id: 'my_embed_id' });
  };

  // remove and destroy widget
  const onDestroy = () => {
    widget.destroy();
  };
</script>

Customized style examples

Change the size of the floater (launcher) and chatbox (messenger)

Add parameters like follows:

Bridger.initWidget({
  id: 'my_embed_id',
  launcher: { width: '60px', height: '60px' },
  messenger: { width: '400px', height: '700px' },
});

Control the position of the floater (launcher) and chatbox (messenger)

Change where to pop up the chatbox (the settings below will make the chatbox pop up right above the floater's)：

Bridger.initWidget({
  id: '118095101984567296',
  launcher: { width: '60px', height: '60px', bottom: '20px', right: '20px' },
  messenger: { bottom: '100px', right: '20px' },
});

Put the widget on the left side：

Bridger.initWidget({
  id: 'my_embed_id',
  launcher: { bottom: '20px', left: '20px', right: undefined },
  messenger: { bottom: '20px', left: '20px', right: undefined },
});

Widget not showing? Overlapping with your original content? To change z-index or positions.

A bigger z-index can make Bridger always visible and not covered by other elements, e.g..

Bridger.initWidget({ id: 'my_embed_id', zIndex: '999999999999' });

Sometimes z-index may not work as expected, see the stacking context article to learn more--you might need to move the container div on the top or bottom of other elements in your HTML body.

The full list of parameters that you can add inside Bridger.initWidget function.

interface Options {
  id: string;
  debug?: boolean;
  zIndex?: string;
  launcher?: {
    top?: string;
    bottom?: string;
    left?: string;
    right?: string;
    width?: string;
    height?: string;
    boxShadow?: string;
    borderRadius?: string;
  };
  messenger?: {
    top?: string;
    bottom?: string;
    left?: string;
    right?: string;
    width?: string;
    height?: string;
    boxShadow?: string;
    borderRadius?: string;
  };
}

Default values of the parameters

const defaultOptions = {
  id: '',
  debug: false,
  zIndex: '9999',
  launcher: {
    top: undefined as undefined | string,
    left: undefined as undefined | string,
    right: '20px',
    bottom: '20px',
    width: '52px',
    height: '52px',
    boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
    borderRadius: '8px',
  },
  messenger: {
    top: undefined as undefined | string,
    left: undefined as undefined | string,
    right: '20px',
    bottom: '20px',
    width: '400px',
    height: '700px',
    boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
    borderRadius: '8px',
  },
};

Class name of every element in Bridger widget

Apart from changing parameters shown above, you can also directly change the CSS of the three elements of the Bridger widget. Here are the classes names:

• bridger-container
• bridger-launcher-iframe
• bridger-messenger-iframe

Hide or show Bridger widget with your code:

The Bridger widget is within a 'div' element whose class is bridger-container, so that you can control this element's style (display) to hide or show Bridger:

Javascript

const el = document.querySelector('.bridger-container');
if (el !== null) {
  el.style.display = 'none';
}

Vue

<div v-show="{show}" class="bridger-container" />

React

const show = true;
return <div style={{ display: show ? 'block' : 'none' }} className="bridger-container" />;