AI Chatbot Integration Guide: 4 Methods + CRM & Platform Connections

Integrating an AI chatbot means choosing an embed method for your website and, optionally, connecting it to the tools your team already uses. Agentkit offers four embedding methods (JS widget, iframe, React component, WordPress plugin) and three tool-integration layers (REST API, Zapier, Webhooks) — so you can go from zero to live in under 30 minutes, or build a fully custom integration pipeline.

The 4 chatbot embedding methods

Every chatbot integration starts with getting the chat interface in front of visitors. Agentkit supports four approaches.

1. JS widget (recommended for most sites)

Paste one script tag before the closing </body> tag on any page:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="YOUR-CHATBOT-ID"
  async>
</script>

The widget loads asynchronously, so it has no impact on your page speed or Core Web Vitals. This works on any HTML page — static sites, CMSs, landing page builders, and more.

2. iframe embed

For environments where external scripts are restricted (some enterprise intranets, iframe-only third-party tools):

<iframe
  src="https://cdn.agentkit.ai/embed/YOUR-CHATBOT-ID"
  width="400"
  height="600"
  frameborder="0">
</iframe>

Resize to match your layout. The iframe approach is the lowest-friction option when you cannot inject a <script> tag.

3. React component

If you are building with React or Next.js, the React component gives you tighter control over initialization, event handling, and styling:

import { AgentitkChat } from '@agentkit/react';

function App() {
  return (
    <AgentitkChat chatbotId="your-chatbot-id" />
  );
}

This is the preferred method for React-based SPAs and Next.js apps where you want the chatbot to behave like a first-class component.

4. WordPress plugin

WordPress users can add the chatbot through the dedicated plugin — no theme file edits required. The plugin adds the widget sitewide in seconds. For full setup instructions, see How to Add a Chatbot to WordPress.

How to add a chatbot to any site (step-by-step)

Regardless of which method you choose, the core process is the same:

1. Create your chatbot at agentkit.ai/auth/sign-up and complete the setup wizard.
2. Train it by adding your website URL, docs, or uploaded files as knowledge sources.
3. Copy your embed code from the chatbot's Settings > Embed page.
4. Paste the code into your site using the method appropriate for your platform (see the platform table below).
5. Test it by visiting your site in a private/incognito window and starting a conversation.

Most teams complete this in under 30 minutes. For a detailed walkthrough of the embed options, see How to Embed a Chatbot on Your Website.

Platform integration table

Different platforms require different approaches. Here is a quick reference for the most common ones.

All five major platforms support the JS widget as a fallback if the platform-specific method does not work for your setup.

Tool and CRM integrations

Embedding the chatbot on your site is step one. Step two is connecting it to the tools your team uses every day — your CRM, helpdesk, Slack, email platform, and data warehouse.

Integration options at a glance

Zapier: connect to 5,000+ apps without code

Zapier is the fastest way to connect your chatbot to other software without writing code. When something happens in your chatbot (a lead is captured, a conversation ends), Zapier triggers an action in another app.

How it works:

1. Agentkit fires events (triggers) when things happen in your chatbot.
2. Zapier listens for those triggers.
3. You define what happens next (the action) in another app.

Setting up a Zap:

1. Go to zapier.com and create a new Zap.
2. Search for "Agentkit" as the trigger app.
3. Choose a trigger event (e.g., "New Lead Captured").
4. Connect your Agentkit account by entering your API key.
5. Choose the action app (e.g., HubSpot, Slack, Mailchimp).
6. Map fields from the chatbot trigger to the action.
7. Test and activate the Zap.

Common Zapier workflows:

Zapier requires the Hobby+ plan.

REST API: full programmatic control

The REST API gives you complete access to your chatbot's capabilities through HTTP requests. Use it to:

• Build a custom chat interface that matches your product's design system.
• Integrate chatbot responses into a mobile app (iOS, Android, React Native).
• Use your chatbot as an AI layer in backend workflows.
• Pipe conversation data into your analytics infrastructure.

The API supports both standard request-response and streaming (SSE) for real-time token delivery. Authentication uses Bearer tokens generated in your workspace settings.

For a complete walkthrough with code examples, read Chatbot API: Build Custom Integrations with REST.

API access requires the Hobby plan or above.

Webhooks: real-time event notifications

Webhooks push data to your systems the moment something happens — no polling required. Your server receives an HTTP POST request for each event.

Available webhook events:

Example webhook payload (lead captured):

{
  "event": "lead.captured",
  "timestamp": "2026-02-20T10:30:00Z",
  "chatbotId": "bot_abc123",
  "conversationId": "conv_xyz789",
  "data": {
    "name": "Jordan Rivera",
    "email": "[email protected]",
    "phone": "+1-555-0123",
    "message": "Looking for enterprise pricing"
  }
}

Setting up webhooks:

1. Navigate to Settings then Webhooks in your workspace.
2. Enter the HTTPS URL of your endpoint.
3. Select the events you want to receive.
4. Save. Agentkit sends a test request to verify connectivity.

Your endpoint must return a 200 status within 10 seconds. Failed deliveries are retried with exponential backoff.

Webhooks require the Hobby plan or above.

Which integration should you use?

Quick decision guide:

• Just need the chatbot on your site? Use the JS widget or the platform-specific method from the table above.
• Need to sync leads to your CRM or get Slack alerts, without writing code? Use Zapier (Hobby+).
• Need real-time event handling in your own systems? Use webhooks (Hobby+).
• Need a fully custom interface or mobile app? Use the REST API (Hobby+).

Combining integrations

The most effective setups layer multiple methods. A typical production setup looks like this:

Website visitors interact with the JS widget embedded on your site.

Leads captured through the chatbot flow via Zapier to HubSpot and Mailchimp.

Conversations stream via webhooks to your data warehouse for analysis.

Internal team gets Slack notifications for escalated conversations via Zapier.

Mobile app uses the REST API to deliver the same chatbot experience natively.

Each integration handles what it does best: the widget handles the front-end experience, Zapier connects business tools without code, webhooks feed your data infrastructure, and the API powers custom builds.

Frequently Asked Questions

How do I add a chatbot to my website?

Paste the JS widget script tag before your site's closing </body> tag. The full snippet is in your chatbot's Settings > Embed page. For platform-specific instructions, see the platform table above or the dedicated guides for WordPress, Wix, Shopify, Squarespace, and Webflow.

Can I integrate a chatbot without coding?

Yes. The JS widget embed is a copy-paste operation — no coding required. Zapier connections are also fully no-code. The only integrations that require code are the REST API and webhooks, which are optional and aimed at development teams.

What platforms support chatbot integration?

Agentkit works on any platform that allows you to add HTML or JavaScript. That includes WordPress, Shopify, Wix, Squarespace, Webflow, Woocommerce, and any custom-built site. Dedicated guides exist for the five most common platforms — see the platform integration table above.

What is the difference between the Zapier integration and webhooks?

Zapier is a no-code tool that connects Agentkit to 5,000+ apps through a visual workflow builder — best for marketing and operations teams. Webhooks send raw HTTP POST requests to a URL you control — best for developers who want to write custom handling logic. Both require the Hobby+ plan.

Do I need to pay to embed the chatbot?

No. The JS widget, iframe, React component, and WordPress plugin embeds are all available on the free plan. Paid plans unlock higher message limits, the REST API, and tool integrations like Zapier and webhooks (all Hobby+).

Does adding the chatbot widget slow down my website?

No. The widget script uses the async attribute, which means the browser loads it without blocking the rest of your page. It has no measurable impact on page speed or Core Web Vitals scores.

Getting your chatbot connected

Chatbot integration is a two-step process: embed the chat interface using the method that fits your platform, then optionally connect it to your business tools using Zapier, webhooks, or the REST API. Start with the JS widget — it works on any site, loads without slowing your pages, and takes under five minutes to add. Add tool integrations as your needs grow.

Build your chatbot for free → No credit card required.