To embed an Agentkit chatbot, open your agent's Channels → Website embed page, enable Chat widget, and copy the complete generated code. Paste both script tags into a sitewide footer or page template, publish, then load the public page and send a test message. The generated code already contains your agent ID and the configured widget URL. Do not replace it with a snippet copied from an article.
If you want the chat inside a page section, enable the Iframe channel and copy its generated iframe code instead. The iframe and floating widget are separate channels, so check the switch for the one you use.
Choose where the chat should appear
| Goal | Use | Where to get it |
|---|---|---|
| A floating chat bubble across the site | Chat widget | Channels → Website embed → Chat widget |
| A chat panel inside a support or contact page | Iframe | Channels → Website embed → Iframe |
| A floating bubble in a React or Next.js app | Chat widget | Use the generated script in the app's layout or HTML template |
| A WordPress sitewide bubble | Chat widget | Put both generated tags in a footer-code field |
A React app does not need a separate Agentkit React package for this installation. For a React or Next.js placement example, follow the React integration guide. The iframe guide shows how to size an inline chat panel.
Install the floating widget
- Create an agent, add a source whose answers you can check, and try a few questions in the Playground. If you are starting from scratch, create an Agentkit account.
- Open the agent's Channels → Website embed page. Select Chat widget and enable that channel.
- Copy the complete code shown there. It contains a small bootstrap script followed by the async widget script. Keep both tags and their generated
data-chatbotandsrcvalues together. - Paste the code into the site's shared footer or HTML template, before the closing
</body>tag. Add it once per page. If you want the widget on only one page, use that page's code area instead. - Publish the site. Open the public URL in a fresh browser window, click the bubble, and send a question whose answer you can check against an approved source.
The widget URL comes from Agentkit's hosting configuration, so copy the current code from Website embed. The JavaScript widget guide has the current setup steps, and the Embed SDK guide explains what the bootstrap does.
React and Next.js
Add the script to the app's HTML template or a shared layout so it loads on the pages where you want the bubble. Keep one copy of the widget on each rendered page. The React integration guide covers layout placement for React and Next.js. Copy the current URL and agent ID from Channels → Website embed; a package install is not part of this setup.
WordPress
For a sitewide install, paste both generated script tags into the Footer field of WPCode's Header & Footer screen. Save, clear any site cache, then inspect a public page. WordPress can remove scripts from a Custom HTML block when your account lacks permission to publish them, so check the rendered page source if the bubble is absent. Follow the WordPress installation guide for the exact menu path and checks.
Embed the chat inside a page
Choose Iframe on the same Website embed page, enable the channel, and copy the generated iframe. Paste it where the inline chat should appear. Its URL points to your agent's hosted iframe page. The inline panel stays in that page section; it does not add a floating bubble to the rest of the site. Give the iframe enough height in your layout, use Visit to preview the hosted chat page, then test the iframe on your published page. The iframe does not expose the parent page's window.agentkit SDK, so use the script widget if you need those browser commands. See the iframe instructions.
Check the result before launch
Open the published page in a fresh browser window and record four outcomes:
- Does the bubble or inline panel appear in the expected place?
- Does it open and accept a message?
- Does its answer match the source you used for the test?
- Can a visitor still reach your normal contact route if the agent cannot answer?
If nothing appears, first verify the channel is enabled and inspect the rendered page source for both generated widget tags or the iframe. Check that the script URL is absolute and loads in the browser's Network panel. A content editor or cache may have removed or delayed the code. If the interface appears but a message fails, check the agent's settings, allowed domains and source status. The domain restriction guide explains how an allowed-domain list affects embeds.
Keep the test question and observed answer in your launch notes. Installing a widget proves that it loads; it does not prove that every answer is correct. Recheck affected questions after changing sources or settings.
