Developers
APIs and SDKs
General
Rate Limits
Rate Limits Overview
Current Rate Limits
Errors
API Errors
Gateway Errors
Authorization
API Authorization
Auth API Overview
API Routes
Signing API requests
User Authorization
OAuth Integration
OAuth scopes & resources
Using UPS Tokens
API Resources
Security
Security Overview
Authorization flows
Integration scenarios
Regions and Endpoints
Tracking
Tracking overview
Events
Content sources
Cookies and Data Collection
Reporting
Reporting API Overview
API Routes
API Definitions
API Change Log
NL Interpreter
NL Interpreter Overview
NL Interpreter API
API Setup
API Routes
API Definitions
API Change Log
Chatbot
Chatbot Overview
Chatbot API
API Setup
API Routes
API Definitions
API Tracking Guidelines
External Chat Tracking
API Answer types
API Direct answers
Webhooks
API Change log
Editor API
Editor API Setup
Webhook upon saving
Editor API Routes
Editor API Definitions
Editor API Change Log
Chatbot JS SDK
SDK Setup
SDK Configuration
SDK Customization
SDK Adapters
SDK JS-Client
SDK Styles
SDK Subresource Integrity
SDK Change log
Language Detection
Language Detection overview
Unexpected Languages
Knowledge
Knowledge Overview
Knowledge API
API Setup
API Routes
API Definitions
API Tracking Guidelines
API Change log
Editor API
Editor API Setup
Webhook upon saving
Editor API Routes
Editor API Definitions
Editor API Change log
Knowledge JS SDK
SDK Setup
SDK Configuration
SDK Customization
SDK Builder
SDK HTML Example
SDK Components
SDK JS-Client
SDK Styles
SDK Subresource Integrity
SDK Change log
Language Detection
Integration Options
Unexpected languages
Tracking across languages
Search
Search Overview
Search API
API Setup
API Routes
API Definitions
API Tracking Guidelines
API Change log
Search JS SDK
SDK Setup
SDK Configuration
SDK Builder
SDK Components
SDK Filter Components
SDK Search Store
SDK JS-Client
SDK Styles
SDK Subresource Integrity
SDK Change log
Language Detection
Integration Options
Tracking across languages
Messenger
Messenger Overview
Messenger API
API Setup
API Routes
API Definitions
Webhooks
Using IQL
Case history actions
API Change log
Messenger JS SDK
SDK JS-Client
SDK Subresource integrity
SDK Change log
HyperChat API
API Setup
API Routes
API Definitions
Webhooks Overview
Webhook Events
API Change log
HyperChat JS SDK
SDK JS-Client
HyperChat adapter
SDK Subresource Integrity
SDK Change log
Knowledge Knowledge JS SDK SDK Styles Search Box

Search Box

This component is a form consisting of three elements: form__icon, form__input and form__button.

You can use <span class="form__icon"></span> to add an additional icon in front of the form__input, either through the :before property, or by inserting a <img> tag. It is hidden by default.

Component image

Searchbar component image

HTML Structure

<div class="inbenta-km__search">
    <form class="inbenta-km__search__form">
        <span class="form__icon"></span> 
        <input class="inbenta-km-input form__input" type="text"> 
        <div class="form__button">
            <div class="inbenta-km-button inbenta-km-button--send">
                <span class="inbenta-km-button__icon"></span> 
                <span class="inbenta-km-button__text">Send</span>
            </div>
        </div>
    </form>
</div>

CSS editable properties

Class Properties
.inbenta-km__search padding
.inbenta-km__search__form border-radius, box-shadow, display ...
.form__icon:before background-color, display, font, content
.inbenta-km-input.form__input inherit from global & some overwrites
.form__button .inbenta-km-button inherit from global & some overwrites
.inbenta-km-button .inbenta-km-button__icon inherit from global
.form__button .inbenta-km-button__icon:before inherit from global & content
.form__button .inbenta-km-button__text hidden by default