Developers

SDK Styles

Inbenta Styles

By default, the Inbenta SDK loads two Cascading Style Sheets (CSS) files:

  • The first (e.g. space-cowboy.css or ocean-flow.css) loads a skin. A skin is a set of parameters that define the style and appearance of the product. It allows the user to interact with the product on any device in a comfortable and intuitive manner.
  • The second (layout.css) loads layout information. It defines how the components are placed relative to each other and on the screen. This document lists the structural classes, but it does not go into these classes in detail.

If a skin is selected, the second file is included inside the first file. If no skin is selected, the SDK only loads the second file.

Caution

Remember that if you modify the structural elements, it affects how the product is displayed. Inbenta strongly recommends that you leave structural elements unchanged. If you want to use your own design, Inbenta can disable space-cowboy.css so that only layout.css is loaded. You can then use your design, independently of Inbenta's suggested appearance.

The tables shown for each component in the product CSS pages also specify which CSS styles apply to their respective classes in space-cowboy.css. If the skin is disabled, only the structural classes will be used. The tables also specify these structural classes.

Customizing CSS Styles

To customize the appearance of the SDK, you must overwrite the styles of space-cowboy.css.

Important

Due to the order in which the files are loaded, always use a CSS selector that is more specific than the one used in the skin. The Inbenta skin is loaded last, and therefore has more weight. Inbenta recommends that you use the .inbenta class to be more specific, because no skin uses this class to style its components.

Example:

To change the appearance of the search form button:

In this image, we can see that the selector is:

.inbenta-bot__chat__header

This selector defines the color, font color, padding, box-shadow and line-height of the header.

To overwrite these styles or add new ones to this element, the selector should be:

.inbenta .inbenta-bot__chat__header

General guidelines

Inbenta uses generic classes to style repeated HTML elements. The following chart indicates which ones are used, with their CSS properties.

CSS

Buttons
Class CSS
.inbenta-bot-button background-color, border-radius, color, border, padding, font-weight, font-size, box-shadow,text-transform, transition + structural
.inbenta-bot-button:hover:not([disabled]), .inbenta-bot-button.clicked background-color, color, cursor, box-shadow, transition
.inbenta-bot-button[disabled] background-color, color, cursor, opcity, box-shadow
.inbenta-bot-button.clicked[disabled] background-color, color, box-shadow, opcity, font-weight
Inputs
Class CSS
.inbenta-bot-input font-family, font-size, background-color, color, height, border-radius, padding, border, -webkit-appearance
.inbenta-bot-input:focus outline
inbenta-bot-input[disabled] background-color, cursor
Icons
Class CSS
.inbenta-bot-icon font-family, font-style, font-size, speak, font-weight, font-style, font-variant, text-transform, line-height, -webkit-font-smoothing, -moz-osx-font-smoothing
.inbenta-bot-icon--X:before (In which X is the name of the icon) content

HTML

All SDK components are inside the inbenta tag class. The inbenta tag contains the chatbot launcher and the conversation window.

<div class="inbenta">
    <div class="inbenta-bot__launcher"></div>
    <div class="inbenta-bot"></div>
</div>

Chatbot launcher

The chatbot launcher can incorporate an image, a text or both.

<div class="inbenta-bot__launcher">
    <div class="inbenta-bot__launcher__image"></div> 
    <div class="inbenta-bot__launcher__text"></div> 
    <div class="inbenta-bot__launcher__notifications"></div>
</div>

These HTML elements are not displayed when they are empty. If they contain a value, their style will be predetermined.

States:
.inbenta-bot__launcher:hover When the cursor hovers over the chatbot launcher, the background color will darken slightly.

Class CSS
.inbenta-bot__launcher position, right, bottom, background-color, color, padding, border-radius, min-width,height, box-shadow, font-family, transition + structural
.inbenta-bot__launcher:hover transition, background-color, border-radius, box-shadow
.inbenta-bot__launcher__image background-image, background-size, background-repeat, background-position, width, height
.inbenta-bot__launcher__text margin-left
.inbenta-bot__launcher__text:empty display

Chatbot

The .inbenta-bot class applies to the generic styles of the conversation window (font family, font size, color, weight, general spacing, etc.). This includes the conversation window and the side window.

Class CSS
.inbenta-bot position,width, height*, font-family, font-size, color, font-weight, line-height
Important

The .inbenta-bot element has a fixed position and its size is 0 x 0. These properties make sure that the animations and the side window positioning work correctly.

Conversation window

The conversation window is the body of the chatbot. This is where the main conversation takes place.

It has a complex structure, built with the following elements:

  • ui-draggable: The Inbenta conversation window can be moved around the screen by the user. This class controls the draggable function.

  • inbenta-bot-spacer: This class defines the distance between the conversation window and the side window.

  • inbenta-bot__chat: This class contains the internal elements of the conversation window (see the Internal Conversation Window Structure section below)

  • inbenta-bot__powered: This class contains the Inbenta signature.

<div class="inbenta">
    <div class="inbenta-bot">
        <div class="ui-draggable" style="bottom: 15px; right: 15px; position: relative;">
            <div class="inbenta-bot-spacer">
                <div class="inbenta-bot__chat"></div>
                <div class="inbenta-bot__powered"></div>
            </div> 
        </div>
    </div>
</div>
Class CSS
.inbenta-bot .ui-draggable structural
.inbenta-bot-spacer margin
.inbenta-bot__chat explained in detail later*
.inbenta-bot__powered NOT EDITABLE

Let's examine the .inbenta-bot__chat component now in detail and analyze its structure.

Internal conversation window structure

The .inbenta-bot__chat element is one that contains, among other things, the size of the conversation window. It contains a header, body and footer.

<div class="inbenta-bot__chat">
    <div slot="header" class="inbenta-bot__chat__header ui-draggable-handle"></div>
    <div class="inbenta-bot__chat__body"></div>
    <div class="inbenta-bot__chat__footer"></div>
</div>
Class CSS
.inbenta-bot__chat background-color, width, height, box-shadow, border-radius, border + structural

The .inbenta-bot__chat__header element contains the title and the actions. The class ui-draggable-handle is added to the HTML by JavaScript (js) and is responsible for starting the draggable function.

Caution

If you modify this class, the product might stop working properly.

<div slot="header" class="inbenta-bot__chat__header ui-draggable-handle">
    <div class="header__title">SDK Demo</div> 
    <div class="header__actions">
        <div class="header__actions__icon header__actions__inbenta--minimize"></div>
    </div>
</div>

To reset the conversation an extra icon will be added inside .header__actions.

States: .header__actions__icon:hover

When you hover the cursor over the icon, the element transitions from opaque to translucent.

Class CSS
.inbenta-bot__chat__header background-color, color, padding, box-shadow, line-height + structural
.inbenta-bot__chat .header__title font-family, font-size, font-weight, padding-right
.inbenta-bot__chat .header__actions structural
.inbenta-bot__chat .header__actions__icon transition
.inbenta-bot__chat .header__actions__icon:hover opacity, transition
.inbenta-bot__chat .header__actions__icon:before content
Body

The .inbenta-bot__chat__body element contains the avatar box (if the avatar function is active) and the messages container.

The body__avatar-content element is only displayed if the avatar is activated. This class defines the height and width of the avatar area. Inbenta strongly recommends that you do not edit the elements of this div since they are purely structural.

<div class="inbenta-bot__chat__body">
    <div class="body__avatar-content">
        <div class="body__avatar-content__avatar"> ... </div>
    </div>
    <div class="body__wrapper"></div>
</div>
Class CSS
.inbenta-bot__chat__body position + structural
.inbenta-bot-avatar .body__avatar-content width
.inbenta-bot-avatar .body__avatar-content__avatar border-right, position, structural
.inbenta-bot__chat .body__wrapper position, padding + structural, background
Avatar large

The chatbot has an extra view to see the avatar and the conversation in the same column.

    <div class="inbenta-bot inbenta-bot-avatar--large">
        ...
    </div>
Class CSS
.inbenta-bot-avatar--large .inbenta-bot__chat width, height, border-radius
.inbenta-bot-avatar--large .inbenta-bot__chat__body structural
.inbenta-bot-avatar--large .inbenta-bot__chat .body__avatar-content structural, background, height
.inbenta-bot-avatar--large .inbenta-bot__chat .body__avatar-content__avatar div structural
body__inbenta-alert

The body__inbenta-alert element will only be shown if a technical problem occurs and a refresh page is needed.

<div class="body__inbenta-alert">
    <div class="body__inbenta-alert__alert-box">
        <div class="alert-box__title">OOOOPS...!</div>
        <div class="alert-box__message">Something went wrong, please click the button to reload.</div>
        <button class="inbenta-bot-button">Try again</button>
    </div>
</div>
Class CSS
.inbenta-bot__chat .body__inbenta-alert position, right, left, top, bottom, background-color, padding, z-index + structural
.inbenta-bot__chat .body__inbenta-alert__alert-box background-color, padding, box-shadow, border-radius
.inbenta-bot__chat .alert-box__title color, font-family
.inbenta-bot__chat .alert-box__message padding
.inbenta-bot-button generic
body__wrapper

The body__wrapper__empty element allows the messages to appear from bottom to top.

<div class="body__wrapper">
    <div class="body__wrapper__empty"></div> 
    <div class="body__wrapper__messages"></div>
</div>
Class CSS
.inbenta-bot__chat .body__wrapper__empty structural
.inbenta-bot__chat .body__wrapper__messages -
body__wrapper__messages

This element contains all the messages in the conversation. The messages, regardless of whether they are sent or received, have the same HTML structure and the same generic styles with the class messages__message.

Depending on whether they are sent or received, a modifier class is added (messages__message--received/messages__message--sent). This class defines the aesthetic difference between the two.

<div class="body__wrapper__messages">
    <div class="messages__message messages__message--received"></div>
    <div class="messages__message messages__message--sent"></div>
    <div class="messages__message messages__message--received"></div>
    ...
</div>
Class CSS
.inbenta-bot__chat .messages__message padding
.inbenta-bot__chat .messages__message:last-child margin-bottom
.inbenta-bot__chat .messages__message--received modifies the styles of the internal components + structure
.inbenta-bot__chat .messages__message--send modifies the styles of the internal components + structure
messages__message

<div class="messages__message messages__message--[received-sent]">
    <div class="messages__message__avatar">
        <i class="inbenta-bot-icon [inbenta-bot-icon--avatar]"></i> 
        <div class="avatar__light"></div>
    </div> 
    <div class="messages__message__content">
        <span class="content__label">InbentaBot</span> 
        <span class="content__text">Sorry, we couldn't find any answers to your question.</span>
    </div>
</div>
Class CSS
.inbenta-bot__chat .messages__message--received .messages__message__avatar background-color, border-radius, width, height, margin-right, box-shadow + structure
.inbenta-bot__chat .messages__message--sent .messages__message__avatar -
.inbenta-bot__chat .messages_message .inbenta-bot-icon--avatar color, font-size
.inbenta-bot__chat .messages_message .inbenta-bot-icon--avatar:before content
.inbenta-bot__chat .messages__message__content position, padding, font-size, color, box-shadow
.inbenta-bot__chat .messages__message--received .messages__message__content background-color,color, border-radius, padding-right + structure
.inbenta-bot__chat .messages__message--sent .messages__message__content background-color, border-radius, color + structure
.inbenta-bot__chat .content__label font-weight, opacity
.inbenta-bot__chat .content__label:empty display
.inbenta-bot__chat .messages__message--received .content__label padding-bottom
.inbenta-bot__chat .messages__message--sent .content__label display
.inbenta-bot__chat .content__text font-weight, word-break

Inside the messages, there is a different type of button from the generic style. These buttons mimic a FAQ and are used to show dialog options.

<div class="content__buttons content__buttons--multiple-choise">
    <button class="inbenta-bot-button">
        <span class="inbenta-bot-icon inbenta-bot-icon--faq-icon"></span> 
        <span>Vegan</span>
    </button>
</div>
Class CSS
.inbenta-bot__chat .content__buttons padding-top + structure
.inbenta-bot__chat .content__buttons:last-child padding-bottom
.inbenta-bot__chat .content__buttons--multiple-choise color, width
.inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-button background-color, color, padding, font-weight, font-size, box-shadow, text-align, opacity, min-height, min-width + generics/button
.inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-icon--faq-icon font-size, margin-right
.inbenta-bot__chat .content__buttons--multiple-choise .inbenta-bot-icon--faq-icon:before content
content__status

There is a message with status of the message. We have 3 variants:

  • Only status icon.
  • Only the time of the message sent.
  • Both, icon status with time.

In every case is necessary add to the .content__text an extra class.

  • content__text--info
  • content__text--info-time
  • content__text--info-extended

<!-- Only status icon -->
<div class="messages__message__content">
    <span class="content__text content__text--info">... </span> 
    <div class="content__status">
        <span class="status__icon inbenta-bot-icon inbenta-bot-icon--check"></span>
    </div>
</div>

<!-- Only the time of the message sent -->
<div class="messages__message__content">
    <span class="content__text content__text--info-time">...</span> 
    <div class="content__status">
        <span class="status__time">09:00</span> 
    </div>
</div>

<!-- Both, icon status with time -->
<div class="messages__message__content">
    <span class="content__text content__text--info-extended">... </span> 
    <div class="content__status">
        <span class="status__time">11:46</span> 
        <span class="status__icon inbenta-bot-icon inbenta-bot-icon--check"></span>
    </div>
</div>
Class CSS
.inbenta-bot__chat .messages__message--sent .messages__message__content .content__text--info::after content, margin-left
.inbenta-bot__chat .messages__message--sent .messages__message__content .content__text--info-time::after content, margin-left
.inbenta-bot__chat .messages__message--sent .messages__message__content .content__text--info-extended::after content, margin-left
.inbenta-bot__chat .messages__message--sent .messages__message__content .content__text--info::after content, margin-left
.inbenta-bot__chat .content__status structural, position, bottom, right
.inbenta-bot__chat .content__status .status__icon.inbenta-bot-icon margin, font, color, generic icon
.inbenta-bot__chat .content__status .status__time margin, font, color
content__buttons--download

There is a message with a button to download attachments sent and received.

<span class="content__buttons content__buttons--download">
    <button type="button" class="inbenta-bot-button">
        <span class="inbenta-bot-icon inbenta-bot-icon--attach"></span>
        <span>file-name.png</span>
    </button>
</span>
Class CSS
.inbenta-bot__chat .content__buttons--download padding
.inbenta-bot__chat .content__buttons--download .inbenta-bot-button background, color, padding, font, line-height, box-shadow, text-align, min-height, min-width, word-break
.inbenta-bot__chat .content__buttons--download .inbenta-bot-icon font, margin, generic icon
content__open-sidebubble allows to open the side window.

<span class="content__open-sidebubble">
    <span class="content__open-sidebubble__phrase">More info</span> 
    <span class="content__open-sidebubble__icon inbenta-bot-icon"></span>
</span>
Class CSS
.inbenta-bot__chat .messages__message .content__open-sidebubble structural, padding, margin, transition
.inbenta-bot__chat .messages__message .content__open-sidebubble:hover transition, background
.inbenta-bot__chat .messages__message .content__open-sidebubble__phrase color, text-align
.inbenta-bot__chat .messages__message .content__open-sidebubble__icon generic-icon , color, opacity, padding, font-size
extended_message_container

There is a different type of message that shows related contents within the response message. The related contents can be displayed by clicking the "contentrelatedshow" button.

<div class="content__related-contents">
    <button class="content__related__show">
        You might also be interested in:
        <span class="inbenta-bot-icon content__related__icon content__related__icon--closed"></span> 
    </button>
    <div class="content__related-buttons">
        <span>Ordering a special meal</span>
    </div>
</div>
Class CSS
.inbenta-bot__chat .messages__message .extended_message_container border, box-shadow
.inbenta-bot__chat .messages__message .extended_message_container .messages__message__content padding, box-shadow
.inbenta-bot__chat .messages__message .extended_message_container .messages__message__content .content__label padding
.inbenta-bot__chat .messages__message .extended_message_container .messages__message__content .content__text padding
.inbenta-bot__chat .messages__message .extended_message_container .messages__message__content .content__open-sidebubble padding
.inbenta-bot__chat .content__related-contents min-height, min-width, background, border
.inbenta-bot__chat .content__related-contents .content__related__show structure, width, padding, background, border, font-family, font-size, font-weight, transition
.inbenta-bot__chat .content__wrapper__contents .icon--info -
.inbenta-bot__chat .content__related-contents .content__related__show:hover background, transition, cursor
.inbenta-bot-icon .content__related__icon .content__related__icon--closed font-size, padding-left, generic-icon
.inbenta-bot-icon .content__related__icon .content__related__icon--closed:before content
.inbenta-bot-icon .content__related__icon .content__related__icon--opened font-size, padding-left, generic-icon
.inbenta-bot-icon .content__related__icon .content__related__icon--opened:before content
.inbenta-bot-icon .content__related-buttons margin
.inbenta-bot-icon .content__related__button width, padding, background, color, border, text-align, font-family, font-size, font-weight, transition
.inbenta-bot-icon .content__related__button:hover transition, color, background, outline, cursor
inbenta-bot-dropdown

There is a dropdown to choice an option

<div class="inbenta-bot-dropdown inbenta-bot-dropdown">
    <div class="inbenta-bot-dropdown__trigger">
        <span></span>
        <div class="trigger__action inbenta-bot-icon"></div>
    </div>
    <div class="inbenta-bot-dropdown__menu">
        <div class="inbenta-bot-dropdown__menu__item">
            <span></span>
        </div>
    </div>
</div>
Class CSS
.inbenta-bot-dropdown width
.inbenta-bot-dropdown__trigger cursor, width, min-height, margin-top, background, color, border, border-radius, box-shadow, font, font-weight, padding , transition
.inbenta-bot-dropdown__trigger .trigger__action:before font-size, content, color
.inbenta-bot-dropdown--active .inbenta-bot-dropdown__trigger transition, background, box-shadow, border-color, color
.inbenta-bot-dropdown--disabled .inbenta-bot-dropdown__trigger cursor, background, box-shadow
.inbenta-bot-dropdown__menu transition, pointer events, overflow, background, box-shadow, border-radius, border, opacity, margin-top, max-height, height
.inbenta-bot-dropdown__menu__item line-height, font-size, letter-spacing, transition, padding, cursor , min-height, color, word-break, structural
button list

A button list to choice an option.

    <div class="content__buttons">
        <button class="inbenta-bot-button-secondary">
            <span></span>
        </button>
    </div>
Class CSS
.inbenta-bot__chat .content__buttons structural, padding
.inbenta-bot__chat .content__buttons .inbenta-bot-button-secondary padding, font-wright, font-size, color, letter-spacing, line-height,border-radius, border, background
.inbenta-bot-button-secondary[disabled] opacity, cursor

At the end of the body__wrapper__messages and before inbenta-bot__chat__footer, there is a special information message, to show when the agent is writing and when an agent has joined to the chat.

<!-- When agent join to the chat -->
<div class="footer__chat-activity">
    <div class="activity__avatar">
        <span class="inbenta-bot-icon inbenta-bot-icon--avatar"></span>
    </div> 
    <div class="activity__content">
        <span class="activity__text">Agent has joined the chat</span> 
    </div>
</div>
<!-- When the agent is writing -->
<div class="footer__chat-activity">
    <div class="activity__avatar">
        <span class="inbenta-bot-icon inbenta-bot-icon--avatar"></span>
    </div> 
    <div class="activity__content">
        <span class="activity__dot"></span> 
        <span class="activity__dot"></span>
        <span class="activity__dot"></span>
    </div>
</div>
Class CSS
.inbenta-bot__chat .footer__chat-activity structural, margin, padding
.inbenta-bot__chat .footer__chat-activity .activity__avatar structural, position,width, height, margin,background, border-radius
.inbenta-bot__chat .footer__chat-activity .activity__avatar .inbenta-bot-icon--avatar font, color, generic icon
.inbenta-bot__chat .footer__chat-activity .activity__content structural, position, min-height, min-width, padding, font, box-shadow, background, color, border-radius
.inbenta-bot__chat .footer__chat-activity .activity__dot structural, width, height, margin, border, background, animation
.inbenta-bot__chat .footer__chat-activity .activity__text font-style, color

<div class="inbenta-bot__chat__footer">
    <form slot="chat-form" class="footer__form">
        <input type="text" autofocus="autofocus" placeholder="Enter your question" class="footer__form__input inbenta-bot-input">
        <button type="button" class="footer__form__button inbenta-bot-button">
            <i class="inbenta-bot-icon inbenta-bot-icon--send"></i>
        </button>
    </form>
</div>

The footer__form--focus class is added to the footer__form element when the user places the cursor in the input field and is ready to write. We can use this function to give a different style to the footer elements.

Class CSS
.inbenta-bot__chat__footer structural
.inbenta-bot__chat .footer__form background-color, border, box-shadow + structural
.inbenta-bot__chat .footer__form__input background-color, border-color, height, border-radius, font-size, padding, margin-right + structural
.inbenta-bot__chat .footer__form__input:placeholder color, opacity
.inbenta-bot__chat .footer__form__button height, border-color,background-color,color,padding,box-shadow,border-radius, transition, margin-left, overflow
.inbenta-bot__chat .footer__form__button .inbenta-bot-icon--send opacity, position, right, transition
.inbenta-bot__chat .footer__form--focus .footer__form__button .inbenta-bot-icon--send position, right, transition

There is a button inside the footer, to attach a file inside a message.

<div class="footer__form__button footer__form__button--attach inbenta-bot-button">
    <span class="inbenta-bot-icon inbenta-bot-icon--attach"></span>
</div> 
Class CSS
.inbenta-bot__chat .footer__form__button.footer__form__button--attach color, pading-right, generic button
.inbenta-bot-icon .inbenta-bot-icon--attach generic icon
Character counter

The chatbot input can incorporate a character counter.

    <div class="footer__form__counter-content">
        <div class="counter-content__counter" v-text="remainingCharacters"></div>
    </div>
Class CSS
.inbenta-bot__chat .footer__form__counter-content height, padding , structural
.inbenta-bot__chat .footer__form__counter-content .counter-content__counter opacity, transition
.inbenta-bot__chat .footer__form__input:[disabled] + .footer__form__counter-content .counter-content__counter opacity, background

Side window

The side window has the same structure as the conversation window. It is an HTML element that is placed automatically by js to the right or left side of the conversation window.

Depending on the chosen side, the inbenta-bot__bubble element is added to the inbenta-bot__bubble--left or inbenta-bot__bubble--right class.

<div class="inbenta-bot__bubble inbenta-bot__bubble--left" style="top: 0px; left: 0px;">
    <div id="botpopover-title" class="inbenta-bot__bubble__header"></div>
    <div class="inbenta-bot__bubble__body"></div>
    <div class="inbenta-bot__bubble__footer"></div>
</div>
Class CSS
.inbenta-bot__bubble background-color, width, height, box-shadow, border-radius, border, position + structural
.inbenta-bot__bubble--left -
.inbenta-bot__bubble--right -

Side window header

The header has the same structure as the conversation window header (Styles may vary slightly).

<div id="botpopover-title" class="inbenta-bot__bubble__header">
    <span class="header__title">Gluten-free meals</span> 
    <div class="header__actions">
        <div iaf-popover-close="" class="header__actions__icon inbenta-bot-icon"></div>
    </div>
</div>
States

.header__actions__icon:hover

When you hover the cursor over the icon, the element transitions from opaque to translucent.

Class CSS
.inbenta-bot__bubble__header background-color, min-heigh, color, padding, box-shadow, line-height, cursor + structural
.inbenta-bot__bubble .header__title font-size, line-height, font-weight, font-family, padding-right
.inbenta-bot__bubble .header__actions structural
.inbenta-bot__bubble .header__actions__icon transition
.inbenta-bot__bubble .header__actions__icon:hover opacity, transition
.inbenta-bot__bubble .header__actions__icon:before content

Side window body

<div class="inbenta-bot__bubble__body">
    <div class="body__content-faq">...</div>
</div>
Class CSS
.inbenta-bot__bubble__body padding, background-color, overflow-y + structure
.inbenta-bot__bubble .body__content-faq -
.inbenta-bot__bubble .body__content-faq div:last-child margin-bottom

The side window footer is always used for rating.

Rating

The HTML of the rating buttons can contain icons, text or both. There are two possible locations to show the rating: inside the side window, and inside a received message. Both share the same HTML.

    <div class="inbenta-bot-rating">
        <div class="inbenta-bot-rating__content">
            <div class="inbenta-bot-rating__content__phrase">Was this answer helpful?</div> 
            <div class="inbenta-bot-rating__content__buttons">
                <button class="inbenta-bot-button">
                    <span class="inbenta-bot-icon inbenta-bot-icon--rating-yes"></span> 
                    <span class="inbenta-bot-button__text">yes</span>
                </button>
                <button class="inbenta-bot-button">
                    <span class="inbenta-bot-icon inbenta-bot-icon--rating-no"></span> 
                    <span class="inbenta-bot-button__text">no</span>
                </button>
            </div>
        </div>
    </div>

Class CSS
.inbenta-bot-rating -
.inbenta-bot-rating__content padding, color, border-radius, background-color, min-height + structural
.inbenta-bot-rating__content__phrase padding, font-weight
.inbenta-bot-rating__content__buttons structural
.inbenta-bot-rating__content__buttons .inbenta-bot-button width, height, padding + generics buttons styles
.inbenta-bot-rating__content .inbenta-bot-icon—-rating-yes, .inbenta-bot-rating__content .inbenta-bot-icon-—ratting-no font-size
.inbenta-bot-rating__content .inbenta-bot-icon—-rating-yes:before, .inbenta-bot-rating__content .inbenta-bot-icon-—ratting-no:before content
.inbenta-bot-button__text display

If you click on a negative rating, it opens a form:

<div class="inbenta-bot-rating">
    <div class="inbenta-bot-rating__content">
        <form class="inbenta-bot-rating__content__comment">
            <div class="comment__phrase">Please tell us why</div> 
            <div class="comment__wrapper">
                <textarea class="comment__wrapper__textarea inbenta-bot-input"></textarea> 
                <button class="inbenta-bot-button">Submit</button>
            </div>
        </form>
    </div>
</div>
Class CSS
.inbenta-bot-rating__content__comment width + structural
.inbenta-bot-rating__content__comment .comment__phrase padding-bottom, font-weight + structural
.inbenta-bot-rating__content__comment .comment__wrapper padding-bottom + structural
.inbenta-bot-rating__content__comment .comment__wrapper__texarea height, padding, margin,border, border-radius, resize, -webkit-appearance + structural
.inbenta-bot-button generic

If you give a positive rating or send the form, the HTML is the following:

<div class="inbenta-bot-rating">
    <div class="inbenta-bot-rating__content">
        <div class="inbenta-bot-rating__content__thanks">Thanks!</div>
    </div>
</div>
Class CSS
.inbenta-bot-rating__content__thanks text-align, font-weight + structural
rating inside .messages__message--received

The rating inside message inherits the HTML from the conventional rating inside the sidebubble.

Class CSS
.inbenta-bot__chat .messages__message--received .inbenta-bot-rating -
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content padding, color, border-radius, background-color, min-height + structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__phrase padding, font-weight. font-style
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__buttons structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__buttons .inbenta-bot-button width, height, padding + generics buttons styles
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content .inbenta-bot-icon—-rating-yes, .inbenta-bot-rating__content .inbenta-bot-icon-—ratting-no font-size
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content .inbenta-bot-icon—-rating-yes:before, .inbenta-bot-rating__content .inbenta-bot-icon-—ratting-no:before content
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-button__text display
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__comment width + structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__comment .comment__phrase padding-bottom, font-weight + structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__comment .comment__wrapper padding-bottom + structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__comment .comment__wrapper__texarea height, padding, margin,border, border-radius, resize, -webkit-appearance + structural
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-button generic
.inbenta-bot__chat .messages__message--received .messages__message__content .inbenta-bot-rating__content__thanks text-align, font-weight, font-style + structural

Chatbot Reset session - Confirmation

The Chatbot can reset the conversation session and to prevent losing accidentally the conversation, will appear a confirmation dialog.


<div class="inbenta-bot__chat__confirmation">
    <div class="confirmation-box">
        <div class="confirmation-box__action inbenta-bot-icon"></div> 
        <div class="confirmation-box__icon inbenta-bot-icon"></div> 
        <div class="confirmation-box__title">
            ...
        <div class="confirmation-box__subtitle">
            ...
        </div>
    </div> 
    <div class="confirmation-box__buttons">
        <button class="inbenta-bot-button">
            Yes
        </button>
        <button class="inbenta-bot-button">
            No
        </button>
    </div>
</div>
Class CSS
.inbenta-bot__chat__confirmation position, background, border-radius, transition, z-index
.inbenta-bot__chat__confirmation.inbenta-bot__chat__confirmation--active opacity,transition, pointer-events,z-index
.inbenta-bot__chat__confirmation .confirmation-box posiition, min-width, max-height, padding, margin, background, border-radius, box-shadow, overflow, transform, transition
.inbenta-bot__chat__confirmation .confirmation-box__icon generic icon, structural, width, height, margin, border-radius, background, color
.inbenta-bot__chat__confirmation .confirmation-box__buttons structural, margin-top
.inbenta-bot__chat__confirmation.confirmation-box__buttons generic button, min-width, min-height, letter-spacing

Chatbot Custom window

The Custom window is used to show external information inside the bot, for example a survey.


<div class="inbenta-bot__chat__custom-window">
    <div class="custom-window__close-button inbenta-bot-icon"></div>
</div>

By default, the contents wrapped by the <span> of the custom window displays with flex. If you need to overwrite this behavior, wrap the contents inside html tags (e.g. a <div>). Inbenta recommends that you use the class .custom-window__content to make sure that this container expands to the entire width.


<div class="inbenta-bot__chat__custom-window">
    <span>
        <div class="custom-window__content">
            ...
        </div>
    </span> 
</div>
Class CSS
.inbenta-bot__chat__custom-window position, background, z-index
.inbenta-bot__chat__custom-window .custom-window__close-button structural, position, background, height, width, border-radius, cursor, transition, generic (.inbenta-bot-icon)
.custom-window__content width

Chatbot Date Picker

The Date Picker is a component that you can use to select a date. To disable, add .vdp-datepicker--disabled to .vdp-datepicker.


    <div class="vdp-datepicker">
        <div class="vdp-datepicker__calendar">
            <header>
                <span class="prev"></span>
                <span class="day__month_btn up">Dec 2018</span>
                <span class="next"></span>
            </header>
            <div class="">
                <span class="cell day-header">Sun</span>
                    ...
                <span class="cell day">5</span>
            </div>
        </div>
    </div>
Class CSS
.vdp-datepicker__calendar font-family...
header display, line-height, border...
.prev,.next icon, color, background...
.day__month_btn / .month__year_btn color, background, font-size...
.cell font-size, color, background, padding...

Chatbot Loader

The Loader appears inside a Custom Window.


    <div class="loader">
        <svg class="loader__load" ... >
            <circle class="loader__load__inner" ... ></circle>
        </svg>
    </div>
Class CSS
.loader position, z-index, background
.loader__load width, height, animation
.loader__load__inner stroke (color)

Chatbot color

Starting from version 1.61.0, it is possible to customize the Chatbot SDK primary color using the ocean-flow skin. Starting from version 1.65.0, it is also possible to customize the colors using the tatooine-sunset and imperial-black skins.

There are three available CSS variables for updating the color of the skin:

  • --primary: Primary color
  • --primary--hover: Primary color when hovering over some icons like the ratings (available in: ocean-flow and imperial-black)
  • --secondary: Secondary color (available in: imperial black)

You can refer to the following documentation to understand how these CSS variables work.

The following example shows how these variables can be used to change the skin primary color to some variations of red. In your CSS style file, the following can be added:

:root {
    --primary: #d10808;
    --primary--hover: #680707;
}

Context references

By "context references" we refer to the references the Chatbot displays when providing an AI-generated answer.

The HTML code of context references can contain icons, text or both. You can display them either in the side window or in the AI-generated message itself.

References in the side window

When you choose to display GenAI references in the side window, the following button is shown below the AI-generated message in the main window:

The HTML code for this button is:

<div class="content-external-reference">
  <div class="content-external-reference--title">
    <span class="inbenta-bot-icon--external"></span>
    <span class="text--external">See info about this answer</span>
  </div>
</div>

When the button is clicked, the side window will open and display the references.

Expanded, the HTML code for context references looks like this:

<div class="content-external-reference">
  <p>This answer was automatically generated based on the following results:</p>
    <ul class="content-external-reference--list">
      <li class="content-external-reference--list-item">
        <span class="inbenta-bot-icon--chevron-right"></span>
        <div class="content-external-reference--list-item-wrapper">
          <div class="content-external-reference--list-item-title">
              Inbenta
          </div>
          <div class="content-external-reference--list-item-body">
            <p>Inbenta offers more in depth answers such as this one</p>
          </div>
          <a href="https://www.inbenta.com/" target="_blank" class="content-external-reference--list-item-link">
            <span class="text--external">www.inbenta.com</span>
          </a>
        </div>
      </li>
    </li>
  </ul>
</div>

References in the main window

When you display GenAI references in the main chat window, the HTML for each expanded reference looks like this:

<div class="content__dropdown">
  <div class="content__dropdown--title">
    References
    <span class="inbenta-bot-icon--chevron-down"></span>
  </div>
  <ul class="content__dropdown--body active">
    <li class="content__dropdown--body-item active">
      <div class="content__dropdown--body-item-title">
        <span class="inbenta-bot-icon--chevron-down"></span>
          Inbenta
      </div>
      <div class="content__dropdown--body-item-body">
        <p>Inbenta offers more in depth answers such as this one</p>
        <a href="https://www.inbenta.com/" target="_blank" class="content__dropdown--body-item-link">
          <span class="inbenta-bot-icon--external"></span>
          <span class="text--external">www.inbenta.com</span>
        </a>
      </div>
    </li>
  </ul>
</div>

When the reference's content has over 100 characters, a Read more button will display:

Clicking this button lets users view the full answer in the side window:

The HTML code for the button is:

<div class="content-external-reference--list-item--read-more">
  <span class="inbenta-bot-icon--external"></span>
  <span class="text--external">Read more</span>
</div>

While the clicked reference is fully displayed in the side window, the "Read more" button in the main window will be replaced with a "Read less" button:

<div class="content-external-reference--list-item--read-more">
  <span class="icon-hide-info"></span>
  <span class="text--external">Read less</span>
</div>

The side window will also display a Back button above the full reference content:

The corresponding HTML code looks like this:

<div class="inbenta-bot__bubble__body-content--wrapper">
  <div class="inbenta-bot__bubble__body-content--back">
    <span class="inbenta-bot-icon--back"></span>
    Back
  </div>
  <span class="inbenta-bot__bubble__body-content--title">Context reference title</span>
  <p class="inbenta-bot__bubble__body-content--body">Context reference answer content</p>
</div>