Skip to main content

A8Chat Web Widget - New

Introduction​

In order to include the chat widget in your application, two scripts should be added at the end of root HTML page.

Scripts​

<script id="a8_chat_script" src="<Hosted URL>" async defer onload="initChat();"></script>
<script>
  function initChat() {
    const payload = {
      name: "<your username>",
      email: "<your email>",
      userId: Date.now(),
      orgId: "<your orgId>",
      botHandle: "<your botHandle>",
      appKey: "<your app key>",
      theme: {
        payload: {
          widget: {
            calloutMessage: {
              text: "Hey! Let me guide you",
              timeoutValue: 8,
            }
          }
        },
        link: null,
      },
      customFields: {<Add any custom field here>}
    };
    ui.onA8chatStart(payload);
 }
</script>

Replace the following fields with appropriate values

  • Hosted URL
  • Name
  • Email
  • OrgID
  • BotHandle
  • AppKey
  • Theme
  • Custom Field

Hosted URL: Chat hosted URL for loading the chat widget.

Name: The user name to be displayed in the chat.

Email: Email ID of the particular client's users.

OrgID: Bot's organisation ID

BotHandle: Bot's BotHandle Name

AppKey: Bot's App Key

Theme: This is an optional field. Using this field, you can override your default theme. You can either directly specify your theme using the 'payload' field or provide an url using the 'link' field. Keep in mind that if you choose to use the 'payload' field, the 'link' field will be ignored.

Custom FIeld: Add any custom field that you want to pass to the bot.

We are using sessionStorage to store inherent values. This will allow us to open the chat widget in multiple tabs of browser with unique sessions. However, we will be connected to the same session as long as we are on the same browser tab.

Theme​

A default chat-widget theme will be loaded by default. In order to have a customized theme, the theme designer can be used.

Exposed Methods​

The following methods are exposed so that you can control the chat widget programmatically.

  • openChat
  • closeChat
  • openNotification
  • closeNotification

openChat: Open the chat widget

closeChat: Close the chat widget

openNotification: Show the welcome message when called

closeNotification: Hide the welcome message when called