SDK Styles

Developers

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`	-

bodywrappermessages

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

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

footer__chat-activity

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

footerformbutton--attach

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>

APIs and SDKs

General

Rate Limits

Errors

Authorization

API Authorization

User Authorization

API Resources

Security

Tracking

Reporting

NL Interpreter

NL Interpreter Overview

NL Interpreter API

Chatbot

Chatbot Overview

Chatbot API

Editor API

Chatbot JS SDK

Language Detection

Knowledge

Knowledge Overview

Knowledge API

Editor API

Knowledge JS SDK

Language Detection

Search

Search Overview

Search API

Search JS SDK

Language Detection

Benti

Benti Overview

Benti API

Benti JS SDK

HyperChat API

HyperChat JS SDK

Inbenta Styles

Caution

Customizing CSS Styles

Important

General guidelines

CSS

Buttons

Inputs

Icons

HTML

Chatbot launcher

Chatbot

Important

Conversation window

Internal conversation window structure

Header

Caution

Body

Avatar large

body__inbenta-alert

body__wrapper

body__wrapper__messages

messages__message

content__status

content__buttons--download

content__open-sidebubble allows to open the side window.

extended_message_container

inbenta-bot-dropdown

button list

footer__chat-activity

Footer

footerformbutton--attach

Character counter

Side window

Side window header

States

Side window body

Side window footer

Rating

rating inside .inbenta-botbubblefooter

rating inside .messages__message--received

Chatbot Reset session - Confirmation

bodywrappermessages