How to Add a Chat Widget to a Website (in Under 5 Minutes)

Adding a chat widget to your website used to mean committing to hours of configuration and a permanent inbox-monitoring job. You had to set up routing rules, configure business hours, write fallback messages, and then actually sit there waiting to reply.

In 2026, the model has flipped. You can add an AI chat widget to a website in under five minutes, give it your documentation, and let it handle the conversations autonomously. It answers questions, captures leads, and only loops you in when necessary.

This guide walks through exactly how to add a chat widget to your website, whether you are using plain HTML, React, or Next.js. We will use EasyFunnel's AI agent for the examples, but the installation patterns apply to most modern chat tools.

Step 1: Get Your API Key

Before writing any code, you need a project key. This tells the chat widget which knowledge base to pull from and where to send captured leads.

  1. Sign up for a free account at easyfunnel.co
  2. Create a new project for your website
  3. Copy your project API key (it will look like ef_xxxxxxxxxxxx)

You will use this key in the installation steps below.

Step 2: Install the Chat Widget

How you install the widget depends on how your website is built. Choose the method that matches your stack.

Method A: The HTML Script Tag (Simplest)

If you are building a static site, using Webflow, Framer, WordPress, or just writing plain HTML, the script tag is the fastest path.

Drop this snippet into your site's HTML, ideally just before the closing </body> tag:

<script src="https://easyfunnel.co/sdk.js"></script>
<script>
  EasyFunnel.init({ 
    projectId: "ef_your_project_id",
    chat: {
      enabled: true,
      position: "bottom-right"
    }
  });
</script>

That is it. The script is lightweight (~11KB) and loads asynchronously so it will not hurt your Core Web Vitals or page speed score.

Method B: React / Next.js Component

If you are building a modern web app with React, Next.js, or Remix, you want a solution that respects the component lifecycle and does not clash with client-side routing.

First, install the package:

npm install @easyfunnel/react @easyfunnel/sdk

Then, wrap your application with the provider. In a Next.js App Router project, this goes in your root layout.tsx:

import { EasyFunnelProvider } from '@easyfunnel/react'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <EasyFunnelProvider 
          apiKey="ef_your_project_id"
          chat={{ enabled: true }}
        >
          {children}
        </EasyFunnelProvider>
      </body>
    </html>
  )
}

The React wrapper ensures the chat widget persists across route changes without re-initializing, and it automatically hooks into the same session data used for funnel analytics.

Method C: Installation via MCP (AI-Assisted)

If you use Claude, Cursor, or another AI coding assistant, you do not even need to copy and paste code. You can tell the AI to install the widget for you using the Model Context Protocol (MCP).

Install the MCP server:

npx @easyfunnel/mcp

Then, just ask your AI assistant: "Add the EasyFunnel chat widget to my site using project key ef_your_project_id." The AI will locate your layout file, import the correct components, and wire it up automatically.

Step 3: Train the Agent on Your Data

An empty chat widget is just a contact form with a smaller hit area. To make it useful, you need to give the AI something to talk about.

In your EasyFunnel dashboard, navigate to the Knowledge Base section. This is where you feed the agent the information it needs to answer visitor questions.

You can provide data in three ways:

  1. Direct URLs: Paste links to your pricing page, documentation, and blog posts. The agent will scrape and index them.
  2. Raw text: Paste in your product positioning, company history, or internal sales scripts.
  3. Q&A pairs: Explicitly define how the agent should answer specific questions (e.g., "Do you offer a startup discount? Yes, email us at...").

If you do not have a knowledge base yet, you can generate a starting point using the free AI knowledge base generator or AI FAQ generator. Paste your landing page copy into the tool, and it will output structured Q&A pairs you can drop straight into the agent.

Step 4: Configure Lead Capture

The primary goal of adding a chat widget is not just to answer questions — it is to turn anonymous visitors into known leads. This is where conversational lead capture outperforms static forms.

In the chat settings, configure what information the agent should ask for when a visitor shows buying intent.

Keep it simple. Pick one primary contact method:

  • Email address
  • Phone number
  • WhatsApp number

Do not ask for all three. The agent will naturally weave the request into the conversation. For example, if a visitor asks about enterprise pricing, the agent will explain the tiers and then ask, "I can have our sales team send you a custom quote — what is the best email address to reach you at?"

If you want to understand why this approach converts at 15-25% while traditional forms struggle to hit 2%, read our guide on replacing web forms with AI.

Step 5: Customize the Appearance

The widget should feel like a native part of your website, not a bolted-on third-party tool. In the dashboard settings, you can customize:

  • Brand color: Match the chat bubble and message accents to your site's primary color.
  • Agent avatar: Upload a friendly headshot or your company logo.
  • Welcome message: Set the proactive greeting. Instead of "How can I help?", try something specific like "Have questions about the pricing tiers?"
  • Position: Choose bottom-right or bottom-left depending on your site layout.

Once you have configured the agent, you will probably want to give it a persona. The free AI chatbot name generator can help you brainstorm a name and role that fits your brand tone.

The Hidden Benefit: Multilingual Support

One of the biggest advantages of an AI chat widget over a static form is that it automatically adapts to the visitor.

If a visitor from Spain opens the chat and types "Hola", the EasyFunnel agent will instantly switch to Spanish, pulling from your English knowledge base but replying in fluent Spanish. This captures international leads that would normally bounce when faced with an English-only contact form.

You do not need to configure anything to enable this. It works out of the box. For a deeper dive into how this impacts conversion rates, check out the multilingual chat widget guide.

Test It Live

Before you push your changes to production, you should test the agent to make sure it understands your knowledge base and captures leads correctly.

You can do this directly in the EasyFunnel dashboard using the preview simulator. Ask it hard questions, try to confuse it, and watch how it pivots back to capturing your email address.

If you want to see exactly how it feels from a visitor's perspective right now, talk to the live agent on this site — no signup needed. Ask it a question, and watch how it handles the conversation.

Related reading

A Cheaper Intercom Alternative That Captures Leads (2026)

Intercom starts at $39/seat. Here's a cheaper alternative built around capturing the leads your forms miss — an AI agent that talks to visitors in any language, bundled with funnel analytics.

AI Chat vs Contact Forms: Which Captures More Leads? (2026)

Contact forms convert a low single-digit percentage of visitors. Conversational AI chat converts 15–25%. Here's an honest comparison of the two for capturing leads — and when to use each.

Conversational Lead Capture: The Complete Guide (2026)

What conversational lead capture is, how it works, and why a real-time conversation captures far more leads than a static form.

On duty · every hour, every day

Ready to track your funnels?

EasyFunnel gives you funnel analytics + an AI agent that captures leads. Try the live demo.

Talk to the agent
← All posts