To integrate an Agentkit chatbot with a website, open your agent's Channels → Website embed page, choose Chat widget or Iframe, and copy the code generated there. The widget adds a floating chat bubble; the iframe places chat inside a page section. If you also need visitor details in a CRM, set up lead collection and choose a webhook or the invite-only Zapier integration. Test the public chat and the destination record before relying on either connection.
| Your job | Start here | Check before launch |
|---|---|---|
| Add a floating chat bubble | Copy the generated widget embed code | Bubble opens and answers on a public page |
| Put chat inside a support page | Copy the generated iframe code | Iframe loads and has enough height |
| Send captured leads to your CRM | Configure a signed lead webhook | One test lead arrives with the expected fields |
| Connect through Zapier | Request access to the private beta | A test Form Submission appears in Zapier |
Install the chat interface
First, create an agent and add the website pages or documents it should answer from. Test a few real customer questions in the Playground.
Open Channels → Website embed, choose Chat widget, and enable that channel. Copy the complete generated code. It contains a small bootstrap script and an asynchronous widget script with your agent ID and the current hosting URL. When pasting raw HTML, keep both tags together. Copy your own code from Channels instead of reconstructing it from an older example.
Place the code in a sitewide footer or template if the chat should appear throughout the site. For a single page, add it only to that page. Publish, then visit the public URL in a private browser window, open the bubble, and send a question whose answer is in your sources. If the bubble does not appear, inspect the rendered page for the script tags you installed and check whether the widget script loads in the browser's Network panel. Also confirm that the channel is enabled and any allowed-domain rule includes the site.
The website embed guide walks through placement and troubleshooting. The JavaScript widget documentation covers configuration. The script loads asynchronously, but that alone cannot promise a particular Core Web Vitals result; measure your own page after installation.
When an iframe fits better
Choose Iframe on the same Website embed page and copy the generated iframe code. Paste it into the section where chat should live; the generated code sets a minimum height of 700 pixels. Use the preview link beside the code to open the hosted chat page, then test the published page. The iframe is an inline panel; it does not create a floating bubble. If the panel is blank, check your allowed-domain settings as well as the page layout. The iframe setup guide covers both checks.
React, WordPress, and other sites
For a React app with an HTML template, place the complete generated code there. The React and Next.js guide loads only the external widget script with next/script in app/layout.tsx or pages/_app.tsx. That is enough for a bubble-only install: the widget defines its command handler when it loads. If your app uses the Embed SDK to identify visitors or control the widget, include the first generated bootstrap tag too. A component effect can call the SDK before an afterInteractive loader runs. Render the bootstrap body as an inline next/script with an id and strategy="beforeInteractive" in app/layout.tsx for the App Router, or pages/_document.tsx for the Pages Router. Keep the guide's external loader in its existing location, using the script URL and agent ID from your own generated code. The guide uses a hosted script, with no React package to install.
For WordPress, a sitewide option is to paste both generated tags into WPCode's Footer field. Clear the site cache, inspect the public page source, and send a test message. A Custom HTML block can work on one page if your WordPress account can publish scripts; WordPress may strip them otherwise. Follow the WordPress installation guide for the menu paths and permission check.
Connect captured leads to other tools
Embedding answers and delivering lead records are separate jobs. If a CRM handoff matters, first configure the Collect Leads action and verify which fields the form actually asks visitors for. Then choose a delivery path.
Direct webhook. On a Hobby plan or above with active billing, open the agent's Settings → Webhooks and subscribe a public HTTPS endpoint to lead_created. Agentkit sends a signed event with an eventId, timestamp, and data. Verify the signature before processing the body. Use eventId to prevent duplicate CRM records because delivery is at least once and event order is not guaranteed. Return a 2xx response within 10 seconds; Agentkit retries failed deliveries and can disable a subscription after repeated exhausted events. The webhook documentation lists the supported event names, envelope, signature format, retries, and outcomes.
As an acceptance test, submit a lead with a name and email. Check the webhook's terminal outcome in Agentkit and confirm that the CRM contains one matching contact. Repeat with an optional field blank to check field mapping. Reprocess the same eventId in a test environment and confirm that it creates no second contact.
Zapier. The Agentkit Zapier integration is currently in private beta. A Hobby plan or above with active billing and an invitation are required. Request access through Agentkit help, then follow the Zapier setup guide. Create a workspace API key under API Keys before connecting the Zap. Its documented trigger is Form Submission. The guide lists email, name, phone, conversation ID, submitted time, and agent ID; verify any additional field in your invited account. Choose your destination app, map the fields, run a test, and inspect Zapier's task history and the destination record. Do not plan a launch around a trigger or action you have not confirmed there.
REST API. If you are building a custom interface or backend workflow, the developer guide covers API keys and chat endpoints. API access requires a Hobby plan or above. A basic website widget does not require an API key.
A launch check that catches both kinds of failure
- On the public site, open the widget or iframe and ask a question with a known answer. Check the response, not just whether the chat window appears.
- Try the same page on a narrow screen. Check that the bubble or iframe remains usable and does not cover an essential page control.
- If you collect leads, submit a test record and inspect the webhook or Zapier result and the final CRM record. Confirm optional fields and duplicate behavior.
- If anything fails, separate display, answer quality, and delivery. A loaded widget cannot prove that sources are ready; a successful chat cannot prove that a CRM record arrived.
If you have not built the agent yet, create one for free and test its answers before adding it to a public page.
