Custom Html

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.

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.

Important

You can only insert one root element in the custom HTML. This is a technical restriction that can not be circumvented.

Example

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>
  • 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>
  • conversation-window-header: 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>
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.
  • 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

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

custom header-buttons

  • 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>'
    }

custom_html

  • 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>';
}

custom_ConversationHeaderhtml