Chatbot for AireSuite Products
npm install @airelogic/docs-chatbotA chatbot for the Airelogic documentation to be used in the Airesuite products.
``bash`
npm install @airelogic/docs-chatbot
`javascript
import React, { useRef } from "react";
import {
useDocsBotChat,
DocsBotChatRef,
DocsBotOptions,
} from "@airelogic/docs-chatbot";
const widgetOptions: DocsBotOptions = {
botName: "AireGlu Docs",
description: "Ask me anything about AireGlu!",
color: "#291b3e",
alignment: "left",
labels: {
firstMessage:
"Hi! I can help you with our documentation. What would you like to know?",
floatingButton: "Help",
inputPlaceholder: "Ask about our docs...",
poweredBy: "Aireinnovate",
},
questions: [
"How do I get started with AireGlu endpoints?",
"What are the main features of AireGlu?",
"How do I send an email from an AireGlu enpoint?",
],
verticalMargin: 10, // use 70 if there is a footer
horizontalMargin: 10,
customCSS:
.docsbot-wrapper {
height: calc(100% - 230px);
}
, // Adjust height to fit the page when there is a footer
};
{
/ Refer to AireGlu (magicman) on how the Bot Id is housed in an environment variable /
}
useDocsBotChat({
botId: "a1QS54aX5vqaWUgXH9c1/QYNQLIJlzqpRsJX90lLE",
options: widgetOptions,
});
// include component, the bot Id is unique for Airelogic
return (
$3
For more control over when the chatbot loads and mounts, you can disable automatic injection:
`javascript
import React, { useRef, useState } from "react";
import {
DocsBotChat,
DocsBotChatRef,
DocsBotOptions,
} from "@airelogic/docs-chatbot";const { mount, unmount, toggle } = useDocsBotChat({
botId: "your-bot-id",
options: widgetOptions,
inject: false,
});
const [isMounted, setIsMounted] = useState(false);
const handleMount = async () => {
const success = await mount();
setIsMounted(success || false);
};
const handleUnmount = async () => {
const success = await unmount();
setIsMounted(!success);
};
const handleToggle = () => {
toggle();
};
return (
);
`Important: When using manual control, ensure you have added a reference to the docsbot script in your HTML.
`html
`Props
| Prop | Type | Default | Description |
| ------------------------ | -------------------- | ----------- | ----------------------------------------- |
|
botId | string | Required | The unique bot identifier |
| options | DocsBotOptions | {} | Widget configuration options |
| identify | DocsBotIdentify | undefined | User identification data |
| signature | string | undefined | Authentication signature |
| supportCallback | SupportCallback | undefined | Support ticket callback |
| keyboardShortcuts | KeyboardShortcut[] | [] | Custom keyboard shortcuts |
| enableDefaultShortcuts | boolean | true | Enable Ctrl+Q (toggle) and Escape (close) |
| inject | boolean | true | Control automatic script injection |Methods
The hook (or the component ref) provides several methods to control the chatbot widget:
-
mount() - Manually mount the chatbot widget
- unmount() - Unmount and clean up the chatbot widget
- open() - Open the chatbot interface
- close() - Close the chatbot interface
- toggle() - Toggle the chatbot interface open/closed
- addUserMessage(message, send?) - Add a user message to the chat
- addBotMessage(message) - Add a bot message to the chat
- clearChatHistory() - Clear the chat history```