Syllable Web Chat

A lightweight web chat widget that can be easily integrated into approved website.

Installation

NPM

npm install @syllableai/webchat

CDN

You can include the web chat directly from our CDN. Replace [VERSION] with the specific version you want to use (e.g., 1.0.0):

<script src="https://cdn.syllable.ai/scripts/webchat/syllable-webchat.[VERSION].min.js"></script>

Or use the latest version:

<script src="https://cdn.syllable.ai/scripts/webchat/syllable-webchat.latest.min.js"></script>

Usage

1. Add an optional container div to your HTML where iframe will be rendered:

<div id="syllable-webchat-container"></div>

In some instances you may want to adjust z-index of this div container.

2. Initialize the chat bot:

In Javascript or Typescript

import SyllableWebChat from '@syllableai/webchat';

const webChat = new SyllableWebChat({
  clientId: 'MY_CLIENT_ID'
});
webChat.init();

Directly in HTML

<script
  async
  id="syllable-webchat-script"
  src="https://cdn.syllable.ai/scripts/webchat/syllable-webchat.latest.min.js"
/>

<script>
  const script = document.querySelector('#syllable-webchat-script');
  script.addEventListener('load', function() {
    const webChat = new window.SyllableWebChat();
    webChat.configure({
      clientId: 'MY_CLIENT_ID'
    });
    webChat.init();
  });
</script>