SearchField

Prerequisites

Make sure you have completed these prerequisites:

1. Install the flexibel library either through npm or yarn.
2. Have an active account and project on Flexibel. This will give you an API key that is neccesary for the flexibel library to work.

Functionality

the SearchField component provides a search field to be placed anywhere on a page that, when clicked, initiates interaction with your site's chatbot

Image Placeholder for Chatbot Interaction

Usage

import { SearchField } from "flexibel";

<SearchField apiKey="YOUR_API_KEY" />;

Replace YOUR_API_KEY with your project's API key.

Integrated Keyword Search

Like other components, it includes a keyword search feature within the chatbot, enhancing the user's experience by providing the customer with relevant pages as they are typing.

Image Placeholder for Keyword Search Feature

Props

Prop	Type	Default	Description
apiKey	string	-	API key from your Flexibel project
aiIcon	object	Flexibel Icon	The icon of the AI chatbot. Has to be an HTML tag such as an img or svg
userIcon	object	Default User Icon	The icon of the user in the chat. Has to be an HTML tag such as an img or svg
returnIcon	object	Default Return Icon	The icon of the return button in the top left corner of the chatbot interface. Has to be an HTML tag such as an img or svg
pinIcon	object	Default Pin Icon	The icon of the pin button in the top right corner of the chatbot interface. Has to be an HTML tag such as an img or svg
togglePinOn	boolean	true	Boolean Determening whether the chatbot can be pinned to the corner
keywordSearchOn	boolean	true	A boolean determining whether the keyword search feature is active or not
placeholder	string	"Search..."	Placeholder text for the search bar.
welcomeMessage	string	How may I be of assistance?	The initial message from the AI chatbot when a new conversation begins
suggestedQuestions	string[]	-	A list of strings that will be displayed to the user as suggested questions at the start of a new conversation
suggestedQuestionsStyle	object	-	A style object determining the style of the suggested questions displayed to the user at the start of a conversation
chatStyle	object	-	A style object determining the style of the actual chatbot box
inputFieldStyle	object	-	A style object determining the style of the input field used to interact with the AI chatbot
askButtonStyle	object	-	A style object determining the style of the button next to the input field
chatButtonStyle	object	-	A style object determining the style of the return and pin buttons in the chatbot interface
separatorColor	string	"#CCCCCC"	A hex color value determining the color of the line separating each message
aiIconColor	string	"#ffffff"	A hex color value determining the color of the AI icon
aiColor	string	"#89CFF0"	A hex color value determining the background color behind the AI icon
userIconColor	string	"#ffffff"	A hex color value determining the color of the user icon
userColor	string	"#000000"	A hex color value determining the background color behind the user icon
startPinned	boolean	false	A boolean determining whether the chat should start pinned in the corner
chatPosition	string	"bottom-right"	A string determining the position of the chat when pinned. This can only be one of these values: "bottom-right", "bottom-left", "top-right", "top-left"
searchStyle	object	-	A style object determining the style of the search field that activates that AI chatbot

Examples

In this section, we provide several examples of how to use the SearchField component with various props. These examples are designed to give you a clearer understanding of how to customize the chatbot to fit your website's specific needs.

Example 1: Basic Setup with Placeholder

<SearchField
  apiKey="YOUR_API_KEY"
  placeholder="Search for help..."
  searchStyle={{ width: "100%", padding: "10px" }}
/>

• Description: A basic SearchField setup with a custom placeholder and style.

Example 2: Custom Chat Interface and Icons

<SearchField
  apiKey="YOUR_API_KEY"
  aiIcon={<img src="custom_ai_icon.svg" alt="AI" />}
  userIcon={<img src="custom_user_icon.svg" alt="User" />}
  welcomeMessage="How can I assist you?"
  chatStyle={{ backgroundColor: "#f0f0f0", color: "#333" }}
  inputFieldStyle={{ backgroundColor: "#fff", borderColor: "#ddd" }}
  askButtonStyle={{ backgroundColor: "#008CBA", color: "white" }}
/>

• Description: Incorporates custom AI and user icons, a tailored welcome message, and specific styling for the chatbot interface.

Example 3: Comprehensive Customization with Suggested Questions

<SearchField
  apiKey="YOUR_API_KEY"
  suggestedQuestions={[
    "How do I create an account?",
    "What are the payment options?",
  ]}
  suggestedQuestionsStyle={{ color: "#007BFF", fontWeight: "bold" }}
  aiColor="#D1E8FF"
  userColor="#E7E7E7"
  separatorColor="#FF5733"
  chatPosition="top-right"
/>

• Description: Features suggested questions with custom styling, distinct colors for AI and user sections, and positions the chat in the top-right corner of the screen.