HybridAI Content-Embedded Chat Widget v2 Demo

🚀 What's New in v2

The v2 widget now supports inline mode, allowing you to embed chat widgets directly into your content. It automatically detects .hai-chat-widget containers and creates inline widgets, while still supporting floating widgets for traditional use cases.

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. The v2 widget automatically detects the .hai-chat-widget container and creates an inline widget:

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",
        welcome_message: "Welcome to our AI assistant! 🤖 Ask me anything about our products or services."
    };
</script>
<script src="https://hybridai.one/hai_embed.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
`welcome_message`	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)
`mode`	string	Widget mode: "auto", "inline", "floating", or "both"	auto

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",
    welcome_message: "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>

Widget Modes

The v2 widget supports different modes to adapt to your needs. Below you can see live examples of each mode in action:

Auto Mode (Default) ✅

The widget automatically detects if there are .hai-chat-widget containers in the DOM:

If containers found: Creates inline widgets
If no containers: Creates floating widget

Live Demo (Above)

The main demo widget above uses auto mode and automatically created an inline widget when it detected the container.

// Auto mode - widget detects containers automatically
window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    mode: "auto"  // This is the default
};

Inline Mode Demo

Forces inline widget creation in .hai-chat-widget containers:

Always creates inline widgets in containers
Ignores floating widget creation
Perfect for content-focused pages

Live Inline Widget:

// Inline mode - forces inline widgets
window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    mode: "inline"
};

Floating Mode Demo

Creates traditional floating chat button and window:

Creates floating chat button
Opens chat window on click
Perfect for minimal UI impact

Floating Widget:

Look for the floating chat button in the bottom right corner

// Floating mode - traditional chat button
window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    mode: "floating"
};

Both Mode Demo

Creates both inline and floating widgets simultaneously:

Creates inline widgets in containers
Also creates floating chat button
Maximum accessibility option

Both Widgets:

Plus floating button in corner

// Both mode - inline + floating widgets
window.chatbotConfig = {
    chatbotId: "YOUR_CHATBOT_ID",
    mode: "both"
};

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.

Best Practices

✅ Do's

Set appropriate height for your layout
Use custom welcome messages for context
Place widget where users expect help
Test on mobile devices
Use auto mode for maximum flexibility

❌ Don'ts

Don't make the widget smaller than 300px height
Don't hide important content behind the chat
Don't load multiple instances unnecessarily
Don't forget to set your chatbotId
Don't use inline mode without containers

HybridAI Content-Embedded Chat Widget v2.0