HybridAI Content-Embedded Chat Widget Demo

Live Configuration

Widget Settings

Chatbot ID:

Height:

Font Size:

Border Radius:

Shadow Effect:

Background:

Text-to-Speech:

Custom Welcome:

Embed Code:

Live Demo

The widget below reflects your configuration settings:

Getting Started

Basic Implementation

Add the following code to your HTML:

<!-- Add container where you want the chat -->
<div class="hai-chat-widget"></div>

<!-- Add configuration and script -->
<script>
    window.chatbotConfig = {
        chatbotId: "YOUR_CHATBOT_ID",
        chatbotServer: "https://hybridai.one"
    };
</script>
<script src="https://hybridai.one/hai_embed_content.js"></script>

Configuration Options

Parameter	Type	Description	Default
`chatbotId`	string	Your unique chatbot identifier	Required
`chatbotServer`	string	Server URL hosting your chatbot	https://hybridai.one
`customWelcomeMessage`	string	Custom welcome message displayed immediately (no backend call)	None
`fontSize`	string	Base font size for chat interface	14px
`ttsEnabled`	boolean	Enable text-to-speech for bot responses	false
`backgroundColor`	string	Background color of the chat widget	#ffffff
`borderRadius`	string	Border radius for rounded corners	8px
`boxShadow`	string	Box shadow for depth effect	0 2px 4px rgba(0,0,0,0.1)

Integration Examples

Sidebar Integration

Perfect for help sections or documentation pages:

<div class="content">
    <article>Your main content...</article>
    <aside>
        <div class="hai-chat-widget"></div>
    </aside>
</div>

Custom Welcome Message

Display a personalized greeting without backend delay:

<script>
window.chatbotConfig = {
    chatbotId: "YOUR_ID",
    customWelcomeMessage: "Hi! 👋 How can I help?"
};
</script>

Advanced Styling

Customize appearance and functionality:

<div class="hai-chat-widget" 
     style="height: 600px; 
            background: #f0f0f0;
            border-radius: 16px;"></div>

<script>
window.chatbotConfig = {
    chatbotId: "YOUR_ID",
    fontSize: "16px",
    ttsEnabled: true
};
</script>

Styling Guide

Container Styling

/* Set custom dimensions */
.hai-chat-widget {
    height: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Responsive height */
@media (max-width: 768px) {
    .hai-chat-widget {
        height: 400px;
    }
}

Integration with Your Theme

The widget inherits your site's font family and adapts to your container's width. You can further customize it to match your brand.