Blog/Tutorial

How to Add Live Chat to Your Website in 5 Minutes (2026 Guide)

Adding live chat to your website does not require a developer. This step-by-step guide shows you how to install a fully functional chat widget with AI — on WordPress, Shopify, React, or plain HTML — in under five minutes.

10 min readUpdated March 2026Tutorial

Get Your Chat Widget — Free

Why Every Website Needs Live Chat in 2026

Live chat is no longer a nice-to-have. Research from Forrester shows that websites with live chat see 40% higher conversion rates compared to those without. Visitors who engage in chat are 2.8x more likely to complete a purchase. And with modern AI chatbots, you do not even need someone sitting at a computer 24/7 to make it work.

The reason is simple: people prefer instant answers. When a potential customer has a question about your pricing, your return policy, or whether your product fits their use case, they want to know now — not after filling out a contact form and waiting 24 hours for an email reply.

Modern live chat tools like EzyConn combine human chat with AI automation. The AI handles repetitive questions instantly while routing complex issues to your team — whether they are in Slack, Microsoft Teams, or a dedicated dashboard.

What You Will Need

A website you can edit (WordPress, Shopify, React, or any HTML site)
An EzyConn account (sign up free)
5 minutes of your time
No coding experience necessary

Step-by-Step: Add Live Chat to Your Website

Sign Up for EzyConn

Head to ezyconn.com/signup and create your free account. You can sign up with email, Google SSO, or Microsoft SSO. The entire sign-up process takes about 30 seconds.

The free plan includes everything you need to get started: two agent seats, 100 conversations per month, AI-powered auto-responses, and all integrations. No credit card is required, and there are no time-limited trials — the free plan is free forever.

Once you sign up, EzyConn will walk you through a quick onboarding wizard. You can skip it and go straight to widget setup if you prefer.

Configure Your Chat Widget

In your EzyConn dashboard, navigate to Settings → Widget → Appearance. Here you can customize every aspect of how the chat widget looks and behaves on your site:

Brand colors: Match the widget to your site's color scheme
Company logo: Upload your logo to appear in the chat header
Welcome message: Set the greeting visitors see when they open the chat
Business hours: Define when your team is available for live responses
AI auto-responses: Toggle on to let the AI handle questions when agents are unavailable
Widget position: Choose bottom-right or bottom-left placement

You can also configure pre-chat forms to collect the visitor's name and email before starting a conversation. This is useful for lead generation — every chat becomes a contact in your system.

Tip: If you want the AI to auto-respond based on your website content, go to AI Training → Auto-Crawl and paste your site URL. EzyConn will index your pages in 2-3 minutes and start answering questions from your content.

Copy the Embed Code

Go to Settings → Widget → Install. You will see a single line of code that looks like this:

<script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>

The data-token value is unique to your account. It tells the widget which EzyConn workspace to connect to. Copy this entire script tag — you will paste it into your website in the next step.

That is it for the EzyConn side. The rest happens on your website.

Paste the Code Into Your Site

The installation method depends on your platform. Below are instructions for the most common setups.

Installing on WordPress

WordPress is the most popular CMS in the world, and adding live chat takes about 60 seconds. You have two options:

Option A: Use the EzyConn WordPress Plugin (Recommended)

Log in to your WordPress admin dashboard
Go to Plugins → Add New
Search for "EzyConn"
Click Install and then Activate
Go to Settings → EzyConn and paste your widget token
Click Save — done

Learn more: EzyConn WordPress Integration

Option B: Manual Code Insertion

If you prefer not to install a plugin, you can add the script manually. Go to Appearance → Theme File Editor (or use a child theme). Open your footer.php file and paste the script tag just before the closing </body> tag:

<!-- EzyConn Live Chat Widget -->
<script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>
</body>

Alternatively, many WordPress themes have a "Custom Scripts" section in the theme settings where you can paste the code without editing PHP files directly.

Installing on Shopify

Shopify makes it easy to add custom scripts to your storefront. Here is how:

Log in to your Shopify admin panel
Go to Online Store → Themes
Click Actions → Edit code on your active theme
Open the theme.liquid file
Paste the EzyConn script tag just before </body>
Click Save

    <!-- EzyConn Live Chat -->
    <script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>
  </body>
</html>

The widget will appear on every page of your Shopify store, including product pages, the cart, and checkout. If you want to restrict it to certain pages, you can use Shopify's Liquid template conditionals.

Learn more: EzyConn Shopify Integration

Installing in a React App

If your website is built with React (including Next.js, Gatsby, or Create React App), you can load the EzyConn widget using a useEffect hook or by adding the script to your HTML template.

Method 1: Script Tag in index.html

For Create React App or Vite projects, open public/index.html (or index.html for Vite) and add the script before </body>:

<script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>

Method 2: useEffect Hook (Next.js / React Component)

For Next.js or if you want more control, create a component that loads the script dynamically:

import { useEffect } from 'react'

export function EzyConnWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://api.ezyconn.com/api/v1/widget/script.js'
    script.setAttribute('data-token', 'YOUR_TOKEN')
    script.async = true
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [])
  return null
}

Add this component to your root layout or _app.tsx file. The widget loads once and persists across page navigations. In Next.js App Router, you can also use the built-in Script component from next/script for optimized loading.

import Script from 'next/script'

// In your layout.tsx or _app.tsx:
<Script
  src="https://api.ezyconn.com/api/v1/widget/script.js"
  data-token="YOUR_TOKEN"
  strategy="lazyOnload"
/>

Installing on Any Custom HTML Site

If your site is built with plain HTML, a static site generator (Hugo, Jekyll, Eleventy), or any other framework, the installation is the same: paste the script tag before the closing </body> tag in your HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your site content -->

    <!-- EzyConn Live Chat Widget -->
    <script src="https://api.ezyconn.com/api/v1/widget/script.js" data-token="YOUR_TOKEN" async></script>
</body>
</html>

The async attribute ensures the script loads without blocking your page render. The widget initializes after your page content is ready, so there is zero impact on page load speed.

Verifying Your Installation

After adding the code, open your website in a new browser tab. You should see the chat widget icon in the bottom-right corner (or wherever you positioned it). Click it to open the chat and send a test message.

If you have connected Slack or Microsoft Teams, the test message will appear in your team channel. If you have enabled AI auto-responses, the chatbot will reply based on your trained content.

Troubleshooting: If the widget does not appear, check the following:

Make sure the script tag is inside the <body>, not the <head>
Verify your data-token matches the one in your EzyConn dashboard
Clear your browser cache and reload
Check the browser console for any JavaScript errors
Ensure no ad blocker is preventing the script from loading

What Happens After You Go Live

Once the widget is installed, here is the conversation flow:

Visitor opens your website and sees the chat icon
They type a question — for example, "What are your pricing plans?"
The AI responds instantly using content it learned from your website
If the AI is unsure, it escalates to a human agent in Slack or Teams
Your agent replies from Slack or Teams — the visitor sees the response in real-time on the widget
The conversation is logged in your EzyConn analytics dashboard for review

This hybrid approach means you get the speed of AI with the accuracy of human oversight. Most EzyConn customers report that AI handles 70-80% of conversations without any human intervention.

Advanced Configuration

Once the basic widget is running, explore these advanced features to get more out of your live chat:

Proactive Messages
Trigger a chat message after a visitor spends 30 seconds on your pricing page, or when they move their mouse toward the browser close button. Proactive messages increase engagement by 3-5x.
Page-Specific Greetings
Show different welcome messages on different pages. A visitor on /pricing sees "Have questions about our plans?" while a visitor on /docs sees "Need help with integration?"
Lead Capture Forms
Collect visitor email and name before starting a conversation. Every chat becomes a lead in your CRM. EzyConn integrates with HubSpot, Salesforce, and Pipedrive.
Workflow Automation
Use decision trees and workflows to route conversations based on topic, visitor location, or page URL. Sales questions go to Sales, support questions go to Support.

Wrapping Up

Adding live chat to your website is one of the highest-impact, lowest-effort improvements you can make for customer experience and conversions. With EzyConn, the entire process takes about five minutes:

Sign up for a free account
Customize your widget appearance
Copy the one-line embed code
Paste it into your website

From that point forward, every visitor has instant access to AI-powered support and your team can respond from wherever they already work. No new dashboards to learn, no complex setup, no ongoing maintenance.

Add Live Chat to Your Website — Free

One line of code. AI-powered responses. Respond from Slack or Teams. No credit card required.

Start Free Explore Live Chat Features