FloatingButton

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 FloatingButton provides a discreet and accessible way for users to initiate interactions with your site's chatbot.

Image Placeholder for FloatingButton Interaction

Usage

import { FloatingButton } from "flexibel";

<FloatingButton 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
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
floatingButtonPosition	string	"bottom-right"	A string determining the position of the floating button as well as the chat when pinned. This can only be one of these values: "bottom-right", "bottom-left", "top-right", "top-left"
floatingButtonStyle	object	-	A style object determining the style of the floating button
floatingButtonIconSize	number	45	A number determining the size of the icon inside the floating button
floatingButtonIcon	object	Default Button Icon	The icon of the floating button that activates the chatbot on click
floatingButtonIconColor	string	"#1b116e"	A hex color value determining the color of the floating button icon
floatingButtonMessageOn	string	true	A boolean determining whether the popup message next to the floating button should appear
floatingButtonMessage	string	"Talk to us"	The message shown in the popup message next to the floating button

Examples

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

<FloatingButton
  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 FloatingButton with a custom welcome message and suggested questions for the user.

Example 2: Custom icons and styles

<FloatingButton
  apiKey="YOUR_API_KEY"
  floatingButtonPosition="top-right"
  floatingButtonStyle={{ backgroundColor: "#4CAF50" }}
  floatingButtonIcon={<img src="custom_button_icon.svg" alt="Chat" />}
  floatingButtonIconSize={50}
  floatingButtonIconColor="#ffffff"
/>

• Description: Positions the FloatingButton at the top right, with a custom icon, increased size, and specific color.

Example 3: Advanced Chat Interface Customization

<FloatingButton
  apiKey="YOUR_API_KEY"
  aiIcon={<img src="custom_ai_icon.svg" alt="AI" />}
  userIcon={<img src="custom_user_icon.svg" alt="User" />}
  welcomeMessage="Welcome! How can we assist you?"
  suggestedQuestions={[
    "What are your operating hours?",
    "Where can I find pricing information?",
  ]}
  chatStyle={{ backgroundColor: "#f0f0f0", color: "#333" }}
  inputFieldStyle={{ backgroundColor: "#fff", borderColor: "#ddd" }}
  askButtonStyle={{ backgroundColor: "#008CBA", color: "white" }}
/>

• Description: Implements custom AI and user icons, a personalized welcome message, suggested questions, and comprehensive styling for the chat interface.

Example 4: Full Customization with Pin and Return Icons

<FloatingButton
  apiKey="YOUR_API_KEY"
  startPinned={true}
  floatingButtonPosition="bottom-left"
  returnIcon={<img src="return_icon.png" alt="Return" />}
  pinIcon={<img src="pin_icon.png" alt="Pin" />}
  separatorColor="#FF5733"
  aiColor="#D1E8FF"
  userColor="#E7E7E7"
/>

• Description: Starts pinned in the bottom-left position, includes custom return and pin icons, and applies unique color styles to various chat elements.