Adding an AI chat widget to your website is one of the fastest ways to improve customer experience. This guide covers everything from embedding the widget to customizing its appearance and behavior.

What Is an AI Chat Widget?

An AI chat widget is a small, embeddable chat interface that appears on your website — typically as a floating button in the bottom-right corner. When clicked, it opens a conversation window powered by your AI knowledge base.

Embedding the Widget

For Static HTML Sites

Add the embed script to your HTML file before the closing </body> tag. One line of code, and your widget is live.

For WordPress

Use a header/footer plugin to insert the embed code site-wide, or add it to your theme's footer.php file.

For React/Next.js Apps

Add the script tag to your layout component or use a useEffect hook to dynamically load the widget.

For Shopify

Go to Online Store > Themes > Edit Code, and add the script to theme.liquid before </body>.

Customizing the Widget

Colors and branding — Match your website's color scheme and logo
Welcome message — Set a friendly greeting that sets the right tone
Position — Bottom-right is standard, but you can adjust based on your layout
Trigger behavior — Auto-open after a delay, or wait for user click
Mobile optimization — The widget adapts automatically to mobile screens

JavaScript Control API

Once the widget is embedded, you can control it programmatically from your own website using the global window.Kodda object. No extra libraries required.

Basic Controls

Kodda.open();    // Open the chat panel
Kodda.close();   // Close the chat panel
Kodda.toggle();  // Toggle open/close
Kodda.isOpen();  // Returns true/false

Send Messages Programmatically

// Open widget and send immediately
Kodda.send("How do I track my order?");

// Pre-fill the input (widget stays closed)
Kodda.setText("How do I track my order?");

// Send whatever is currently in the input
Kodda.submit();

Clear Conversation

Kodda.clear(); // Reset the conversation history

Listen to Events

Kodda.on('ready', () => console.log('Widget loaded'));
Kodda.on('open', () => console.log('Chat opened'));
Kodda.on('close', () => console.log('Chat closed'));

const off = Kodda.on('open', handler);
off(); // Remove listener

These APIs are especially useful when you want to trigger the chat from custom buttons, pre-fill context from your app, or build deeper integrations.

View the full API reference →

Performance Considerations

The Kodda widget is lightweight and loads asynchronously — it won't slow down your page. It uses lazy loading and only initializes when the user interacts with it.

Best Practices

Place the widget where it's visible but not intrusive
Test on multiple devices and browsers before going live
Monitor conversation analytics to identify improvement opportunities
Update your knowledge base regularly to keep answers current

Get Started

Ready to add an AI chat widget to your site? Sign up for Kodda free, configure your bot, and embed in minutes.

View Pricing | Use Cases