Skip to main content

Webchat & Chatbot

The Webchat & Chatbot widget is a powerful tool that allows you to interact with your customers in real-time. It is a versatile tool that can be used for a variety of purposes, such as customer support, lead generation, and more.

Usage​

To use the Webchat & Chatbot widget, you need to include our bundle before the end of your <body> tag.

To include the Widget in your website, add the following tag to your HTML (preferably on the topmost level of your body tag):

<c1-chat-widget id="yourIdGoesHere"></c1-chat-widget>

And replace yourIdGoesHere with your Exlusive ID Hash.

Options​

Options can be passed to the widget through HTML attributes. The following options are available:

AttributeTypeDefaultDescriptionMandatory
idStringYour exclusive ID.Yes
themedefaultdefaultThe theme to use. Currently only supports "default".No
xright | leftrightThe horizontal position.No
ytop | bottombottomThe vertical position.No
langen | brCustomThe current locale. Reactive.No
zIndexNumber200The CSS z-index that should be used in the widget's wrapper.No
hideButtonBooleanfalseIf true the widget activation button will always be invisible allowing you to create your own (and control the widget's visibility through the Window API). Check out this example on how to do so.No

Options with Custom as a default value are defined by us based on your client-specific configuration but you can still override it providing the attribute.

Examples​

Top-left corner with Brazilian Portuguese locale:

<c1-chat-widget id="yourIdGoesHere" x="left" y="top" lang="br"></c1-chat-widget>

Bottom-left corner with English locale:

<c1-chat-widget id="yourIdGoesHere" x="left" y="bottom" lang="en"></c1-chat-widget>

API​

The Webchat & Chatbot widget provides a simple API that allows you to interact with it programmatically. The API is accessible through the window.$volt object. Its type is below:

interface VoltApi {
  show(): void
  hide(): void
  toggle(): void
  version(): string
  authenticate(data: { name: string, uid: string }): Promise<void>
}

It gets added to the window object after the widget is loaded, when window.$volt_ready is called. Its type is below:

type VoltReadyCall = (api: VoltApi) => void

Methods​

show()​

Shows the widget.

hide()​

Hides the widget.

toggle()​

Toggles the widget's visibility.

version()​

Returns the current version of the widget.

authenticate(data)​

Preview

This is a preview feature. It is not yet available in the main bundle.

Authenticates the given user programmatically, hiding the identification form when the widget is activated through its button without a prior session to resume. The function receives a single object with a name and uid (wich is any contact).

The uid property does not suffer any type of validation (appart from being filled). It can be an e-mail, phone number, document or any other info that identifies the contact.

This function can be called at any moment independent of the widget's visibility state as long as the user did not send the identification form. In this case the Promise is rejected with an error. It is recommended that the function gets called inside the $volt_ready callback or when the user has been authenticated in your platform.

Authenticating the user inside the $volt_ready callback​

The $volt_ready callback gets called as soon as the widget is mounted in the shadow-dom. If the user is already authenticated in your platform, authenticate(data) can be called right away:

async function getMyUserAuthentication() {
    // Logic to run the requests and get the user in your platform goes here
    return new Promise((resolve, reject) => {
        return resolve({ id: 1, name: 'Jhon', uid: 'jhon@contato.com' })
    })
}

window.$volt_ready = ($volt) => {
  getMyUserAuthentication().then((user) => {
    // Set the user information in the widget so the form doesnt appear
    $volt.authenticate(user)
  })
}
Authenticating the user after the widget gets mounted​

Without the $volt_ready callback is still possible to authenticate the user via the Window API $volt property.

async function getMyUserAuthentication() {
  // Logic to run the requests and get the user in your platform goes here
  return new Promise((resolve, reject) => {
    return resolve({ id: 1, name: "Jhon", uid: "jhon@contato.com" });
  });
}

getMyUserAuthentication().then((user) => {
  // Set the user information in the widget so the form doesnt appear
  window.$volt.authenticate(user);
});

Examples​

Volt Ready Callback​

To ensure the API is ready, you can define a callback function that will be called when the widget is loaded. This function will receive the API object as a parameter.

<script>
  function onVoltReady(api) {
    console.log(`Volt Version ${api.version()} ready!`)

    // Defined here
    window.$volt
  }

  window.$volt_ready = onVoltReady

  // Undefined here until the widget loads and calls window.$volt_ready
  (window.$volt);
</script>

Custom Button​

You can create your own button to control the widget's visibility. To do so, you need to hide the default button by setting the hideButton attribute to true and use the API to show and hide the widget.

<c1-chat-widget id="yourIdGoesHere" hide-button></c1-chat-widget>

<button onclick="window.$volt?.toggle()">Show Widget</button>