The Chatbot SDK is built with a default HTML template that you can modify using the html: {} statement in the build method. Here is how you can create a Chatbot instance with your own custom HTML.

In the build method, a new configuration is available: the html:{} statement.

The Chatbot SDK allows you to customize some UI components. A component is a piece of visual element, plus a design and a behaviour. An example of a customizable component would be conversation-window-header, which contains the necessary HTML to render the header of the conversationWindow.

On the other hand, there are also "atomic" components, such as the "reset session" button: it has its own HTML structure and uses CSS for its design and behaviour (It displays a systemMessage in a modal format). This component has its own HTML and functionality, and it is not possible to modify its HTML.

There are 2 different Custom HTML types. When you select the type components, you can use all these components (atomic or not) inside the customizable components when you modify their HTML, and they will keep the original functionality.

Use the htmlType configuration parameter to set the Custom HTML type. It can have the following values:

• components: This is the default value and it allows you to use the mentioned SDK components.
• html-only: This type only allows you to add your own HTML code, which means it does not allow you to use the mentioned SDK components.

Example

The following implementation uses the components HTML type.

config.htmlType = 'components';
config.html = {
  'conversation-window-header-buttons':
    '<div class="header__actions">'
      +'<reset-session-button />'
    +'</div>'
}

The following implementation uses the html-only HTML type.

config.htmlType = 'html-only';
config.html = {
  'conversation-window-header-buttons':
    '<div class="header__actions">'
      +'<button type="button">Reset</button>'
    +'</div>'
}

The following correct implementation has only one root element, the <div class="header__actions">.

    config.html = {
        'conversation-window-header-buttons':
            '<div class="header__actions">'
                    +'<reset-session-button />'
            +'</div>'
    }

The following incorrect implementation will prompt an error and display the HTML incorrectly. If you need to add this custom label, you must add it inside the header actions or create a parent div element that can contain both header__actions and the custom label.

    config.html = {
        'conversation-window-header-buttons':
            '<div class="header__actions">'
                    +'<reset-session-button />'
            +'</div>'
            +'<div>Custom Label </div>'
    }

Customizable components

The HTML components that are now available for customizations are listed below. The original HTML of the components is provided and can be copied and modified to allow any custom feature desired.

Conversation window header

• conversation-window-header: This template has the HTML of the conversation window header. It is composed of two div elements. The first is inbenta-bot__chat__header, followed by header__title (which defines the title of the Chatbot SDK). After the second div, there is the component.

        conversation-window-header:
            <div class="inbenta-bot__chat__header">
                <div class="header__title">
                    SDK Demo
                </div>
                <conversation-window-header-buttons />
            </div>

• conversation-window-header-buttons: This component has the HTML of the buttons (a header__actions div), then the components explained below. By default, it has both "minimize" and "close" buttons, but hides the "close" button, which can be modified in the close button configuration.

        'conversation-window-header-buttons':
            <div class="header__actions">
                    <hide-conversation-window-button />
                    <reset-session-button />
            </div>

• conversation-window-header-title: This component has the HTML of the header title. By default, it shows the text set in the interface-title label.

      conversation-window-header-title:
          <div class="header__title">
              <img src="<my-logo-url>"
          </div>

• custom-window-header: This component is shown after displaying a custom-window, by default it will show the close-custom-conversation-window atomic component.

  'custom-window-header':
  <close-custom-conversation-window/>

Side window header

• side-window-header: This template has the HTML of the side window header (a inbenta-bot__bubble__header div) with a few components inside. By default, it will show the side-window-header-title atomic component and the side-window-header-buttons customizable component.

        side-window-header:
            <div class="inbenta-bot__bubble__header">
                <side-window-header-title />
                <side-window-header-buttons />
            </div>

• side-window-header-buttons: This component has the HTML of the buttons (a header__actions div) in the side window, then the components explained below. By default, it has a "close" button, which is in charge of closing the side window.

        side-window-header-buttons:
            <div class="header__actions">
                    <side-window-header-close-button />
            </div>

• side-window-header-title: This component has the HTML of the side window header title. By default, it shows the title of the displayed intent.

      side-window-header-title:
          <div class="header__title"></div>

  Conversation window footer

• conversation-window-footer: This template has the HTML of the conversation window footer. By default, it will show the conversation-window-footer-form which has the following atomic components between its tags: upload-media-button, chatbot-input, character-counter, send-button

        conversation-window-footer:
            <conversation-window-footer-form>
                <upload-media-button />
                <chatbot-input />
                <character-counter />
                <send-button />
            </conversation-window-footer-form>

• conversation-window-footer-prefix: This component is located inside the footer form, just at the beginning of all the other components within the footer. This can be modified, for example, if you want to add a speech-to-text button.

      conversation-window-footer-prefix:
          <button><span class="speech-to-text"></span></button>

Available atomic components

Conversation window header

• hide-conversation-window-button: Minimizes/hides the conversationWindow, originally placed inside the conversation-window-header.

• reset-session-button: Calls the displaySystemMessage action that asks for a confirmation before you leave the conversation. Upon confirmation, it resets the session, originally placed inside the conversation-window-header.

• close-custom-conversation-window: When there is a custom-conversationWindow, hides it and shows the original again.

Side window header

• side-window-header-title: Shows the side window title, which by default is the content title.

• side-window-header-close-button: Closes the sideWindow, originally placed inside side-window-header-buttons.

Conversation window footer

• character-counter: Shows the remaining available characters left, which is obtained from the length of the query in the chatbot-input and the inputCharacterCounterMax set parameter. It is hidden by default, configurable in the character counter configuration

• chatbot-input: Input text the user can use to write to the Chatbot. In order to be able to send the text to the Chatbot, this atomic component needs to be placed inside the conversation-window-footer-form component (see example above).

• send-button: Shows the send message button. On click, it will send the message written in the chatbot-input atomic component.

• upload-media-button: This button lets the user upload a file and send it to tan external system. This button will only be shown when the showUpload action has been triggered.

• conversation-window-footer-form: This component is the form which contains all the other atomic components and provides the footer styling. The component cannot be customized, but it is used to wrap all the needed components inside the footer.

Custom examples

• Custom conversation-window-header with an Star Wars icon:

    config.html = {
        'conversation-window-header':
            '<div class="inbenta-bot__chat__header">'
                +'<div class="header__title">'
                    +'<img src="custom_icon" style=" width: 30px; margin: 0; margin-right: 15px">'
                    +'SDK Demo'
                +'</div>'
                +'<conversation-window-header-buttons />'
            +'</div>',
    }

• Custom conversation-window-header-buttons without the minimise button:

    config.html = {
        'conversation-window-header-buttons':
            '<div class="header__actions">'
                    +'<reset-session-button />'
            +'</div>'
    }

• Custom conversation-window-header and conversation-window-header-buttons with an icon and modify the header-buttons to display a dropdown :

Bootstrap is used to generate the dropdown menu, so include the CDN to use it.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    config.html = {
        'conversation-window-header':
            '<div class="inbenta-bot__chat__header">'
                +'<div class="header__title">'
                    +'<img src="custom_image" style=" width: 30px; margin: 0; margin-right: 15px">'
                    +'SDK Demo'
                +'</div>'
                +'<conversation-window-header-buttons />'
            +'</div>',

        'conversation-window-header-buttons':
            '<div class="header__actions">'
                +'<div class="dropdown">'
                      +'<div class="inbenta-bot-icon dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>'
                      +'<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">'
                        +'<a class="dropdown-item" href="#">Action</a>'
                        +'<a class="dropdown-item" href="#">Another action</a>'
                        +'<a class="dropdown-item" href="#">Something else here</a>'
                      +'</div>'
                    +'</div>'
                    +'<hide-conversation-window-button />'
                    +'<reset-session-button />'
            +'</div>'
    }

• Modified custom-window-header in order to use some of the conversation-window-header classes and attach a well formatted header title inside the custom-window, and also use the close-custom-conversation-window:

 config.html = {
     'custom-window-header':  '<div class="inbenta-bot__chat__header">'
        +'<div class="header__title">'
        +'Custom Inbenta form'
        +'</div>'
        +'<close-custom-conversation-window/>'
        +'</div>';
}