Gaia Chatbot Widget

Overview

This gaia chatbot widget is a lightweight, customizable solution for embedding an AI-powered chat interface into any web page. It provides an interactive way for users to engage with your AI assistant, enhancing user experience and providing instant support or information.

⚠️ Alpha Stage Disclaimer

IMPORTANT: This project is currently in alpha stage.

Please be aware of the following:

The chatbot widget is still in early development and may contain bugs or incomplete features.
APIs, configuration options, and functionality may change without notice in future updates.
It is not recommended for use in production environments at this time.
We welcome feedback, bug reports, and contributions to help improve the widget.
Use at your own risk. We are not responsible for any issues or data loss that may occur from using this alpha version.

We appreciate your interest in our project and look forward to your feedback as we work towards a stable release.

Features

Easy to embed in any HTML page
Customizable appearance to match your website's design
Supports markdown and code formatting in responses
Responsive design for desktop and mobile devices
Configurable chatbot behavior and appearance

Installation

Include the chatbot script in your HTML file:

<script src="https://cdn.jsdelivr.net/gh/harishkotra/embeddadble-chatbot-ui@refs/heads/main/chatbot-widget.js"></script>

Add the configuration object to your page:

<script>
    window.CHATBOT_CONFIG = {
        apiKey: "YOUR_API_KEY",
        apiUrl: "https://your-api-endpoint.com/v1/chat/completions",
        botTitle: "AI Assistant",
        welcomeMessage: "Hello! How can I assist you today?",
        placeholderText: "Type your message here...",
        brandColor: "#000000",
        chatHeaderBackground: "#ffffff",
        chatHeaderTextColor: "#000000",
        chatBubbleBackgroundUser: "#000000",
        chatBubbleTextColorUser: "#ffffff",
        chatBubbleBackgroundBot: "#f2f2f2",
        chatBubbleTextColorBot: "#000000",
        systemMessage: "You are a helpful assistant.",
        maxResponseTokens: 1000,
        temperatureValue: 0.7,
        suggestedQuestions: [
            "What services do you offer?",
            "How can I contact support?",
            "Tell me about your company"
        ]
    };
</script>

The chatbot widget will automatically initialize and appear on your page.

Configuration Options

Option	Type	Description	Default
`apiKey`	String	Your API key for authentication	Required
`apiUrl`	String	The endpoint URL for the chat completions API	Required
`botTitle`	String	The title displayed in the chat header	"AI Assistant"
`welcomeMessage`	String	The initial message displayed by the bot	"Hello! How can I assist you today?"
`placeholderText`	String	Placeholder text for the input field	"Type your message here..."
`brandColor`	String	Primary color for the chatbot (HEX)	"#000000"
`chatHeaderBackground`	String	Background color of the chat header (HEX)	"#ffffff"
`chatHeaderTextColor`	String	Text color of the chat header (HEX)	"#000000"
`chatBubbleBackgroundUser`	String	Background color of user message bubbles (HEX)	"#000000"
`chatBubbleTextColorUser`	String	Text color of user message bubbles (HEX)	"#ffffff"
`chatBubbleBackgroundBot`	String	Background color of bot message bubbles (HEX)	"#f2f2f2"
`chatBubbleTextColorBot`	String	Text color of bot message bubbles (HEX)	"#000000"
`systemMessage`	String	Initial system message to set the bot's behavior	"You are a helpful assistant."
`maxResponseTokens`	Number	Maximum number of tokens in the bot's response	1000
`temperatureValue`	Number	Randomness of the bot's responses (0-1)	0.7
`suggestedQuestions`	Array	List of suggested questions to display	[]

Browser Compatibility

This widget is compatible with modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.

Support

For issues, feature requests, or questions, please open an issue in the GitHub repository.

License

MIT

tobySolutions/docs-ai-agent