How to Set Up the Irelia.ai WhatsApp Widget on Your Website

~10 minutes setup

What You'll Need

Prerequisites before you start

WhatsApp Widget vs. Traditional Webchat

Understand the tradeoffs and why this wins for lead gen

Quick Path

Condensed steps for experienced users

Step-by-Step Setup

Full walkthrough (Steps 1–5)

Quick Checklist

Verify everything is working

Troubleshooting & FAQs

Common issues and answers

Introduction

You’re investing time and budget to drive traffic to your website. Visitors land, browse, maybe have a question — and then leave. No name, no number, no way to follow up. They’re gone. Traditional webchat widgets (live chat) try to solve this, but they create a different problem: anonymous conversations that vanish the moment someone closes their browser tab. Your sales team ends up with half-finished chats and zero contact information to pick things back up. The Irelia.ai WhatsApp Widget takes a smarter approach. It looks and feels like a familiar chat bubble on your site, but instead of trapping the conversation inside a browser window, it bridges the visitor directly to WhatsApp — where your AI agent continues the conversation and you automatically capture their phone number. By the end of this guide, you’ll have: ✅ A WhatsApp chat widget live on your website
✅ Your AI agent automatically responding to every visitor who reaches out
✅ Every visitor’s WhatsApp number captured in Irelia — ready for your sales team

How This Works

The WhatsApp Widget isn’t a traditional webchat — it’s a smart bridge between your website and WhatsApp. Here’s what the experience looks like from your visitor’s perspective:

They see a green WhatsApp chat bubble in the bottom-right corner of your site
They click it, and a chat-like window pops up with your business name and a welcome message
They type their question in the input field — just like they would in any webchat
They hit Send Here’s where it gets clever. Instead of starting an on-site chat, the widget redirects the visitor to WhatsApp using a wa.me link with their message already pre-filled. WhatsApp opens (the app on mobile, WhatsApp Web on desktop), and the visitor taps send one more time to deliver their message. From that point on, the entire conversation happens on WhatsApp — handled by your Irelia AI agent. The key insight: by sending that first WhatsApp message, the visitor hands you their phone number. No forms. No email popups. No extra steps. Your sales team gets a real contact to follow up with, and the conversation lives on WhatsApp — where it won’t disappear when the visitor closes their browser.

In short: The widget emulates a webchat on your site for that very first interaction, then seamlessly moves the conversation to WhatsApp. It’s the best of both worlds — the familiar feel of a chat bubble with the persistence and contact capture of WhatsApp.

What You’ll Do

Here’s a quick roadmap of the setup process:

Open your WhatsApp settings in Irelia (~1 minute)
Customize your widget text — title and welcome message (~2 minutes)
Copy the widget code (~30 seconds)
Add the code to your website (~5 minutes)
Verify your default inbound agent is configured (~1 minute)

📋 What You’ll Need

An Irelia.ai account with WhatsApp already connected — How to Connect WhatsApp if you haven’t done this yet Required
At least one active AI agent configured in Irelia Required
Access to your website’s HTML or a plugin that lets you add code (like WPCode for WordPress) Required No coding required. The widget code is ready-made — you just need to copy and paste it. If you can copy text and paste it somewhere, you can do this.

Before setting up the widget, it helps to understand how it compares to a traditional webchat — and why the tradeoffs work in your favor for lead generation.

Feature	💬 Traditional Webchat	✅ WhatsApp Widget
Visitor experience on site	Chat stays entirely on the page	Redirects to WhatsApp after the first message
Contact capture	❌ Anonymous — unless visitor fills a form	✅ Automatic — you get their WhatsApp number
Conversation persistence	❌ Lost when the visitor closes the tab	✅ Continues on WhatsApp indefinitely
Sales follow-up	❌ No way to re-contact the visitor	✅ Rep can message them directly on WhatsApp
Mobile notifications	❌ None — visitor must stay on the page	✅ WhatsApp push notifications keep them engaged
Smooth on-site chat	✅ Fully embedded, never leaves the page	❌ Visitor is redirected away from the site
Requires WhatsApp	✅ No — works for anyone with a browser	❌ Yes — visitor needs WhatsApp installed
The bottom line: Traditional webchats keep the experience on your site but leave you with anonymous, disposable conversations. The WhatsApp Widget trades a small redirect for something far more valuable — a real phone number and a conversation that never disappears.
For most sales and lead generation scenarios, the WhatsApp Widget wins decisively. The slight friction of the redirect is vastly outweighed by your ability to capture contact information and continue conversations long after the visitor leaves your site.

When might a traditional webchat be better? If your audience primarily uses desktop and is unlikely to have WhatsApp (uncommon in most markets), or if you need conversations to stay strictly on-page (e.g., support for logged-in users), a traditional webchat could be a better fit. For lead generation though, the WhatsApp Widget is the stronger choice.

⚡ Quick Path (Experienced Users)

Already comfortable with Irelia and adding code to your website? Here’s the condensed version:

Irelia: Go to “Settings” → scroll to the “WhatsApp Widget” section at the bottom
Customize: Set your “Chat Title” and “Message text”
Copy: Click “Copy widget code”
Website: Paste the code into your site’s footer code — directly before </body> in HTML, or via your platform’s custom code feature (WPCode for WordPress, Custom Code for Wix, Code Injection for Squarespace, etc.)
Inbound agent: Confirm you have a default agent assigned for inbound WhatsApp conversations — Set Up Your Default Inbound Agent Need more detail? Continue with the full guide below.

🔧 Step-by-Step Setup

Open Your WhatsApp Settings in Irelia

~1 minute

Log into your Irelia.ai account
Click the Settings icon (gear icon) in the left sidebar
Click the Whatsapp tab
Scroll down to the bottom of the Settings page
You’ll find the “WhatsApp Widget” section

Don’t see the WhatsApp tab? It only appears after you’ve connected your WhatsApp number to Irelia. If it’s missing, connect WhatsApp first and then come back to this guide.

You’ll see the widget configuration panel: two text fields on the left and a live preview of your widget on the right.

Customize Your Widget Text

~2 minutes The widget has two text fields you can customize. These shape the first impression visitors get when they interact with the chat bubble on your site.

Set your “Chat Title” — this appears in the widget’s green header bar. Use your business name or something friendly and recognizable. Good examples:

Your business name (e.g., Acme Solutions)
A department name (e.g., Sales Team)
Something inviting (e.g., Ask Us Anything)

Set your “Message text” — this appears as a chat bubble inside the widget, simulating a welcome message from your business. It’s the first thing visitors read, so make it conversational and action-oriented. Good examples:

How can I help you?
Hi! Ask me anything about our services.
Looking for something specific? Type your question below. The live preview on the right side of the screen updates as you type, so you can see exactly how your widget will look before adding it to your site.

Set the right tone. Remember — this welcome message kicks off a WhatsApp conversation. Keep it warm and conversational, like you’re greeting someone who just walked into your store. Skip the corporate jargon.

Copy the Widget Code

~30 seconds

Once you’re happy with your title and message, click the “Copy widget code” button below the text fields
A green confirmation banner will appear at the bottom of the screen: “Code copied! You can now paste it into your website as HTML code”

The widget code is now in your clipboard — ready to paste into your website.

What’s in the code? The widget is built with pure HTML, CSS, and JavaScript. No external dependencies, no heavy libraries. It’s lightweight, fast, and won’t slow down your site.

Want a fully custom design? Because the widget is standard HTML, CSS, and JS, a developer can modify every aspect of its appearance — colors, fonts, size, position, animations, button shape, everything. The code you copy from Irelia is your starting point. With some development help, you can make it look however you want.

Add the Widget to Your Website

~5 minutes Now paste the copied code into your website. The core principle is the same regardless of your platform: the widget code needs to load on every page of your site, placed just before the closing </body> tag (or in the “footer” code area — which is the same thing). How you do this depends on your website platform. Find yours below.

Direct HTML
WordPress
Wix
Other platforms

If you or your developer have direct access to your website’s HTML files:

Open your website’s HTML file (or template/layout file) in a code editor
Find the closing </body> tag — it’s usually at the very end of the file
Paste the widget code directly before the </body> tag
Save the file and refresh your website
You should see the green WhatsApp bubble appear in the bottom-right corner

Using a templating system? Most websites use a shared layout or template file that wraps every page. Paste the widget code there so it appears site-wide. If you’re unsure which file that is, ask your developer — they’ll know exactly where to put it.

If your site runs on WordPress, the free WPCode plugin is the easiest approach — no theme file editing required:

In your WordPress dashboard, go to “Plugins” → “Add New”
Search for WPCode and install the “WPCode — Insert Headers and Footers + Custom Code Snippets” plugin
Click “Activate”
In the left sidebar, go to “Code Snippets” → ”+ Add Snippet”
Hover over “Add Your Custom Code (New Snippet)” and click the “Use Snippet” button

Give your snippet a descriptive name (e.g., Irelia WhatsApp Widget)
In the “Code Type” dropdown, select “HTML Snippet”
Paste your widget code into the code editor area

Scroll down to the “Insertion” section and set it to “Site Wide Footer”
Toggle the snippet to “Active”
Click the “Save Snippet” button

Important: Make sure you select “HTML Snippet” as the code type — not “JavaScript” or “PHP.” The widget code includes HTML, CSS, and JavaScript together, and the HTML Snippet option handles all three correctly.

If your site is built on Wix, you can add the widget through Wix’s Custom Code feature:

Go to your Wix Dashboard
In the left sidebar, click “Settings”
Scroll down to the “Advanced” section and click “Custom Code”
Click the ”+ Add Custom Code” button
Paste your widget code into the code box
Give it a name (e.g., Irelia WhatsApp Widget)
Under “Add Code to Pages”, select “All pages”
Under “Place Code in”, select “Body - end”

Click “Apply”

If you don’t see the “Custom Code” option in your Wix settings, you may need a Wix Premium plan. Free Wix plans have limited access to custom code injection.

Every modern website platform has a way to inject custom code into the footer. Look for one of these in your platform’s settings:

Squarespace: “Settings” → “Advanced” → “Code Injection” → paste in the “Footer” field
Shopify: “Online Store” → “Themes” → “Edit Code” → open theme.liquid → paste before </body>
Webflow: “Project Settings” → “Custom Code” → paste in the “Footer Code” field

General rule for any platform: Look for settings labeled “Custom Code,” “Code Injection,” “Header & Footer Scripts,” or “Tracking Code.” Choose the footer placement option and paste your widget code there. If you’re unsure, your platform’s help docs will have a guide on adding custom HTML — or ask your developer.

After saving on any platform, open your website in a new browser tab (or an incognito/private window to bypass cache). You should see the green WhatsApp bubble in the bottom-right corner of every page.

Your widget is now live on your website!

Verify Your Default Inbound Agent

~1 minute There’s one more crucial piece to make everything work end-to-end. When a visitor uses your WhatsApp Widget, they’re the ones starting the conversation — they write the first message. In messaging terms, this is called an inbound conversation (the message comes in to you, initiated by the visitor). For your AI agent to automatically respond to these incoming messages, Irelia needs to know which agent should handle them. This is configured through the “Manage inbound conversations with this agent” section in the trigger tab of an agent. Here’s what to do: Follow our Setting Up Your Default Inbound Agent guide to assign the right agent. It takes about a minute.

Important: Without a default inbound agent configured, your widget will work perfectly — visitors will be redirected to WhatsApp and their message will be sent — but no AI agent will respond. The conversation will sit unanswered until someone on your team manually replies. Don’t skip this step.

🎉 You’re all set! Your WhatsApp Widget is live and your AI agent is ready to handle conversations. Here’s what happens now: ✅ A visitor lands on your site and sees a familiar chat bubble
✅ They type a question and click send
✅ They’re seamlessly redirected to WhatsApp with their message pre-filled
✅ Your AI agent responds instantly — answering questions, qualifying leads, collecting information
✅ Your sales team gets a real WhatsApp number for every conversation — ready for follow-up Every single conversation gives you a contact. No more anonymous visitors slipping away.

What’s Next?

Now that your widget is live, here are some ways to get even more value from it:

🧪 Test the full experience yourself — Open your website in an incognito window, click the widget, type a question, and walk through the entire flow as a visitor would. Confirm your AI agent responds correctly on WhatsApp.
🎨 Customize the design — Work with a developer to match the widget’s colors, fonts, and positioning to your brand. Since it’s pure HTML, CSS, and JS, everything is customizable.
📲 Connect more entry points — The website widget is just one way prospects can reach your AI agent. Set up additional inbound channels (like Facebook Messenger) and outbound conversations (where your agent reaches out first) to engage leads across multiple touchpoints. See our Entry Points & Conversation Channels guide.
📊 Monitor your conversations — Check your Irelia chat panel to see how visitors engage and how your AI agent performs. Look for patterns in the questions people ask — they’re gold for improving your agent.
🔗 Push leads to your CRM automatically — Use Irelia’s webhook events to send every new WhatsApp lead straight to your CRM, spreadsheets, or team chat. See our Zapier Integration Guide or Make.com Integration Guide to set this up.

✅ Quick Checklist

Use this to verify your setup is complete:

Setup

WhatsApp connected to Irelia
“Chat Title” customized with your business name or label
“Message text” set to a clear, inviting welcome message
Widget code copied from Irelia
Code pasted into your website (before </body> tag or via WPCode)
Default inbound agent configured in Irelia

Verification

Green WhatsApp bubble appears on your website (bottom-right corner)
Clicking the bubble opens the chat window with your title and message
Typing a message and hitting send redirects to WhatsApp
Your message appears pre-filled in the WhatsApp chat
AI agent responds after you send the message on WhatsApp

✅ All checked? You’re good to go!

🛠️ Troubleshooting & FAQs

How to fix it: Step 1: Connect WhatsApp first

Follow our How to Connect WhatsApp guide to link your WhatsApp Business number to Irelia
Once connected, return to “Settings” and scroll to the bottom — the “WhatsApp Widget” section will appear

The widget code isn't loading properly on your site

How to fix it: Step 1: Check code placement

Verify the code is placed inside the <body> section of your HTML (ideally just before </body>)
If using WPCode, confirm the snippet is set to “Active” and the insertion method is “Site Wide Footer” Step 2: Clear your cache
Clear your browser cache, or open the site in an incognito/private window
If your site uses a caching plugin (like WP Super Cache or W3 Total Cache), clear the site-level cache as well Step 3: Check for JavaScript errors
Right-click anywhere on your page → click “Inspect” → go to the “Console” tab
Look for red error messages — if you see any related to the widget, share them with your developer

The redirect to WhatsApp is being blocked, usually by a popup blocker or browser extension

How to fix it: Step 1: Check popup and ad blockers

Temporarily disable any ad blocker or popup blocker extensions in your browser
Try the widget again Step 2: Test in a different browser
Open your site in a different browser (e.g., Chrome, Firefox, Safari) to rule out browser-specific issues Step 3: Verify your WhatsApp connection
Go to Irelia “Settings” and confirm your WhatsApp number is properly connected and active

The visitor's message reaches WhatsApp successfully, but no AI agent replies

Possible causes:

No default inbound agent is configured, so Irelia doesn’t know which AI agent should respond
Your Irelia account has run out of credits, so the AI agent can’t process new conversations How to fix it: Step 1: Check your default inbound agent
Follow the Setting Up Your Default Inbound Agent guide
Make sure the correct agent is selected for inbound WhatsApp conversations Step 2: Check your credit balance
In Irelia, look at your credit balance in the “Subscription” section under “Settings”
If your credits are depleted, the AI agent won’t respond to new conversations even though everything else is configured correctly
Activate your subscription or anticipate the renewal to restore automatic responses Step 3: Verify the agent is configured for inbound conversations
Open your agent’s configuration in Irelia and confirm one of the agents are configured as default for inbound conversations

Can I have different widgets on different pages?

Yes. Since the widget is standard HTML code, you can customize and paste different versions on different pages. Either generate a new code from Irelia each time you change the text, or directly edit the title and message values in the copied HTML code itself.

Can I change the widget's colors, position, or design?

Absolutely. The widget code is pure HTML, CSS, and JavaScript — completely customizable. A developer can modify the colors, size, position, fonts, animations, and any other visual aspect. The code from Irelia is your starting point — from there, the design is entirely in your hands.

Does the widget work on mobile devices?

🆘 Need Help?

Irelia.ai Support:

Contact support in the WhatsApp priority support group or send an email to info@irelia.ai
Include: screenshots of your widget configuration, the issue you’re experiencing, and what you expected vs. what happened