Developers
APIs and SDKs
Authorization
API Authorization
Auth API Overview
API Routes
Signing API requests
User Authorization
OAuth Integration
OAuth scopes & resources
Using UPS Tokens
General
Rate Limits
Rate Limits Overview
Current Rate Limits
Errors
API Errors
Gateway Errors
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
Chat
Chat Overview
Chat 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
Chat 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
Assist
Assist Overview
Assist API
API Setup
API Routes
API Definitions
Webhooks
Using IQL
Case history actions
API Change log
Assist JS SDK
SDK JS-Client
SDK Subresource integrity
SDK Change log
Agent Chat API
API Setup
API Routes
API Definitions
Webhooks Overview
Webhook Events
API Change log
Agent Chat JS SDK
SDK JS-Client
Agent Chat adapter
SDK Subresource Integrity
SDK Change log
Search Search JS SDK SDK Styles Search Box

Search Box

This component is a .inbenta-search-box form. Inside has the form element with the class .inbenta-search-box__form. It has two elements:

  • an input field: .form__input.
  • a button: .form__button. This element can contain either text or an icon. The icon will be specified within the :before pseudo-selector.
Note

Depending on the size of the button, the input field will dynamically adjust its width accordingly.

Component image

search-box

HTML structure

<div class="inbenta-search-box">
<form class="inbenta-search-box__form">
   <input class="inbenta-search-input form__input">
   <button class="form__button inbenta-search-button inbenta-search-icon">Search</button>
</form>
<div>

CSS editable properties

Class Css
.inbenta-search-box margin, padding, background, background, box-shadow
.inbenta-search-box__form display, position,width, border, box-shadow, transition
.inbenta-search-box__form .form__input height, margin, border, background, font, color, pseudo-class(focus, placeholder : border)
.inbenta-search-box__form .form__button height,width, border, background, font, color, transition pseudo-class(hover, focus : background, transition)
.inbenta-search-box__form .form__button:before content, font, color