Tutorials

The Complete Guide to Embedding Your AI Agent on Any Website

April 14, 20265 min read

You've built your AI agent, tested it, and published it. Now it's time to put it where your customers are — on your website. Here's how to embed your KaHappy agent on any platform.

The Universal Embed Code

After publishing your agent, KaHappy provides an embed code that works on any website. It's a simple iframe:

<iframe src="https://kahappy.com/chat/your-agent-slug?embed=true" width="100%" height="600" style="border:none;"></iframe>

This works everywhere: custom HTML sites, WordPress, Shopify, Squarespace, Wix, Webflow, and any other platform that allows custom HTML.

WordPress

In the WordPress editor, add a Custom HTML block where you want the agent to appear. Paste the embed code and publish. That's it. For widgets or sidebars, use a Custom HTML widget.

Shopify

Go to Online Store → Pages, edit the page where you want the agent, and switch to the HTML editor. Paste the embed code. Alternatively, edit your theme's Liquid templates for more control over placement.

Sizing and Responsiveness

The embed is fully responsive — it adapts to its container width. For the best experience:

  • Set width="100%" to fill the container
  • Set height="600" minimum for comfortable chat interaction
  • Use CSS to control the container's max-width if needed

Custom Branding

On the Pro plan, you can customize your agent's colors and avatar to match your website. On the Business plan, you can also remove the "Powered by KaHappy" branding for a fully white-label experience.

Shareable Link Alternative

If embedding isn't ideal for your use case, every published agent also has a standalone page at kahappy.com/chat/your-agent-slug. You can link to it from emails, social media, QR codes, or anywhere else.

Ready to build your own AI agent?

Get started for free — no coding required.