FlexibelAdapt

Prerequisites

Make sure you have completed these prerequisites:

Install the flexibel library either through npm or yarn.
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

FlexibelAdapt provides a permanent chatbot presence on your webpage, ready to assist users at any moment. This is ideal for pages where ongoing assistance is beneficial, such as support or FAQ sections.

Image Placeholder for Chatbot Interaction

Usage

import { FlexibelAdapt } from "flexibel";

<FlexibelAdapt 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
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"

Examples

In this section, we provide several examples of how to use the FlexibelAdapt 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

<FlexibelAdapt
  apiKey="YOUR_API_KEY"
  welcomeMessage="Hello! How can I assist you today?"
  suggestedQuestions={[
    "What are your business hours?",
    "How do I make an order?",
  ]}
/>

Description: Sets up FlexibelAdapt with a custom welcome message and suggested questions for the user.

Example 2: Custom Icons and Styles

<FlexibelAdapt
  apiKey="YOUR_API_KEY"
  aiIcon={<img src="path_to_ai_icon.svg" alt="AI Icon" />}
  userIcon={<img src="path_to_user_icon.svg" alt="User Icon" />}
  chatStyle={{ backgroundColor: "#f2f2f2" }}
  inputFieldStyle={{ backgroundColor: "#e0e0e0", color: "#333" }}
/>

Description: Integrates custom AI and user icons, and applies specific styles to the chatbox and input field.

Example 3: Advanced Styling and Positioning

<FlexibelAdapt
  apiKey="YOUR_API_KEY"
  startPinned={true}
  chatPosition="bottom-left"
  separatorColor="#FF5733"
  aiColor="#89CFF0"
  userColor="#000000"
  askButtonStyle={{ backgroundColor: "#4CAF50", color: "white" }}
/>

Description: Starts the chat in a pinned state at the top-left position of the screen, customizes colors and styles for various elements including the separator and ask button.

Example 4: Comprehensive Customization

<FlexibelAdapt
  apiKey="YOUR_API_KEY"
  welcomeMessage="Welcome to our support!"
  suggestedQuestions={[
    "Can I track my order?",
    "What are your return policies?",
  ]}
  aiIcon={<img src="custom_ai_icon.png" alt="AI" />}
  userIcon={<img src="custom_user_icon.png" alt="User" />}
  chatStyle={{ backgroundColor: "#fff", border: "1px solid #ddd" }}
  inputFieldStyle={{ backgroundColor: "#f7f7f7", color: "#555" }}
  askButtonStyle={{ backgroundColor: "#008CBA", color: "white" }}
  chatButtonStyle={{ backgroundColor: "#333", color: "#fff" }}
  separatorColor="#007BFF"
  aiColor="#D1E8FF"
  userColor="#E7E7E7"
/>

Description: Demonstrates a comprehensive customization of FlexibelAdapt, including custom welcome messages, suggested questions, icons, and extensive styling for all chat components.

FlexibelAdapt

Prerequisites​

Functionality​

Usage​

Integrated Keyword Search​

Props​

Examples​

Example 1: Basic Setup​

Example 2: Custom Icons and Styles​

Example 3: Advanced Styling and Positioning​

Example 4: Comprehensive Customization​