How to Embed an AI Chat Widget on Your Website

Want to provide instant customer support without hiring a 24/7 team? An AI chat widget lets your website visitors get answers immediately, any time of day.

Why Add AI Chat to Your Website?

Traditional contact forms and email support have their place, but customers increasingly expect instant responses. An AI chat widget bridges that gap:

• Instant answers - No waiting for business hours or email replies
• Reduced support load - Handle common questions automatically
• Better user experience - Visitors find information without searching
• Lead capture - Engage visitors before they leave your site

How the Widget Works

The DreamAI chat widget loads as a lightweight iframe on your website. This approach offers several advantages:

Isolated and Secure

The widget runs in its own sandbox, completely separate from your website's code. Your site's JavaScript can't access the widget, and the widget can't access your site. This isolation protects both you and your visitors.

Asynchronous Loading

The widget loads after your main content, so it never slows down your page. Visitors see your content first, then the chat button appears ready to help.

Mobile-Friendly

The widget automatically adapts to mobile screens, appearing as a full-screen chat on smaller devices for the best user experience.

Getting Your Embed Code

Setting up your widget takes just a few steps:

Step 1: Access Your Dashboard

Log into your DreamAI dashboard and navigate to your organization's settings.

Step 2: Enable Public Chat

In the settings panel, enable the "Public Chat" option. This allows visitors to chat without logging in.

Step 3: Copy the Embed Code

Once public chat is enabled, you'll see your embed code. It looks something like this:

<script src="https://dreamai.idothis.me/widget-loader.js" 
        data-tenant-id="your-tenant-id"
        async>
</script>

Step 4: Add to Your Website

Paste the embed code just before the closing </body> tag on any page where you want the chat widget to appear.

Customization Options

Make the widget match your brand with these customization options:

Primary Color

Set your brand color to style the chat button and message bubbles. The widget uses this color for interactive elements while maintaining readability.

Button Icon

Choose between different chat icons or use the default message bubble. Pick what feels most natural for your audience.

Welcome Message

Customize the greeting visitors see when they open the chat. A good welcome message sets expectations and encourages engagement:

• Keep it friendly and concise
• Mention what the AI can help with
• Invite visitors to ask questions

Suggested Questions

Add discovery questions that appear when visitors open the chat. These help users understand what they can ask and reduce the "blank page" problem.

Security Features

Your widget comes with built-in security to protect your business and visitors:

Domain Allowlisting

Specify which domains can display your widget. This prevents unauthorized sites from embedding your chat and using your AI credits.

To configure allowed domains:

1. Go to Widget Settings in your dashboard
2. Add your domain(s) to the allowlist
3. Save changes

The widget will only load on approved domains.

Rate Limiting

Built-in rate limiting prevents abuse by limiting how many messages can be sent in a given time period. This protects against spam and keeps your AI costs predictable.

No Personal Data Storage

The widget doesn't store personal information about visitors. Chat sessions are temporary and don't require login, protecting visitor privacy.

Best Practices

Get the most from your chat widget with these tips:

Placement Matters

The widget appears in the bottom-right corner by default - the standard position users expect. Avoid moving it unless you have a specific reason.

Train Your AI

Upload relevant documents to your knowledge base so the AI can answer questions accurately. The more context you provide, the better the responses.

Monitor and Improve

Review chat transcripts periodically to:

• Identify common questions you should address on your site
• Find gaps in your knowledge base
• Improve your AI's responses over time

Set Expectations

Let visitors know they're chatting with an AI. Most users appreciate the instant help and understand AI has limitations.

Mobile Considerations

The widget works great on mobile, but keep these points in mind:

• The chat opens full-screen on mobile for easier typing
• Touch targets are sized appropriately for fingers
• The close button is always accessible

Test your widget on mobile devices to ensure a smooth experience for all visitors.

Troubleshooting

Widget Not Appearing

• Check that your domain is in the allowlist
• Verify the embed code is placed correctly
• Look for JavaScript errors in your browser console

Slow Loading

• Ensure the async attribute is present in your script tag
• Check your page's overall performance

Styling Conflicts

The widget uses an iframe, so CSS conflicts are rare. If you notice issues, check for global styles that might affect iframes.

Ready to Get Started?

Adding an AI chat widget to your website is one of the fastest ways to improve customer experience. Your visitors get instant help, and you save time on repetitive questions.

Sign up for DreamAI to get your embed code and start helping your visitors today.

Questions about embedding? Our team is here to help - just reach out through the chat on our site.