How to Add Live Chat to Elementor: Plugin, Footer and Custom Code

You can add live chat to Elementor in a few minutes, and you do not need to edit a single template to do it. Elementor is a page builder that runs on WordPress, so the chat widget loads the same way it would on any WordPress site: through a plugin, through a script placed in the footer, or through Elementor’s own custom code feature. This guide shows all three routes, explains which one to pick, and lists the checks that catch the usual problems, such as a widget that appears on the home page but not on landing pages.

The widget in this guide is Talkmio, whose assistant Mio answers visitors from your website, FAQ and uploaded documents and hands the chat to your team when it cannot answer. Installation is one snippet before the closing body tag, or the Talkmio WordPress plugin with a site key.

Which Way to Add Live Chat to Elementor

Elementor controls how pages look, not how scripts load, which is why there are several valid routes. They differ in effort, in how many pages the widget reaches, and in whether you need a paid Elementor plan. The table compares them.

Route	Best for	Reaches	Needs Elementor Pro	Effort
Talkmio WordPress plugin	Most sites	Every page, post and template	No	Lowest
Elementor Custom Code	Teams that already manage scripts in Elementor	Whole site or chosen conditions	Yes	Low
HTML widget in a footer template	Sites with a Theme Builder footer	Every page using that footer	Yes, for the footer template	Medium
HTML widget on a single page	One landing page only	That page	No	Low, but limited
Theme footer or header snippet	Developers with a child theme	Every page	No	Medium

For most sites the plugin is the right answer. It does not depend on which Elementor templates exist, survives a redesign and keeps working when someone rebuilds the footer. The other routes are useful when you cannot install plugins or when you want the chat only on selected pages.

Before You Start: Account and Site Key

Whichever route you choose, the first steps are the same. Create a free account at app.talkmio.com and confirm your e-mail. Add your website under Websites, which gives you a site key and an install snippet. The Free plan needs no card and includes one operator, one website and 50 AI answers a month, enough to test the whole setup.

While you are there, teach Mio a little. Open Mio AI, then Knowledge base, and add your website address so Mio can read every public page on the same domain, respecting robots.txt. Add a business instruction or two, such as what you sell and what it must never promise. You can do this before or after installing; the order does not matter for the widget to appear.

Route 1: The Talkmio WordPress Plugin

This is the simplest way to add live chat to Elementor sites, because Elementor never touches it. In the WordPress dashboard, open Plugins, then Add New, and install the Talkmio plugin. Activate it, open Settings, then Talkmio, and enter your site key. Save, open your site in a private window and look for the chat bubble in the corner.

Because the plugin adds the script at the site level, it appears on pages built with Elementor, pages built with the block editor, posts, archives and the 404 page alike. That consistency is the main reason to prefer it. Our general guide to adding live chat to WordPress covers the same plugin from the WordPress side, including what to check if the bubble does not show.

Route 2: Elementor Custom Code

Elementor Pro includes a Custom Code feature, found in the Elementor menu in the WordPress dashboard. It is designed for tracking and chat scripts. Create a new entry, give it a clear name such as “Talkmio chat”, paste the snippet from your Talkmio account and choose the location at the end of the body. Then set the display conditions: the entire site is the usual choice, with exclusions for pages where a chat would distract, such as a checkout.

Menu labels differ slightly between Elementor versions, so use the Elementor help centre if yours looks different. Publish the entry and test it in a private window, because logged-in editors sometimes see a different version of the page. Custom Code has one advantage over a plain footer: you can switch it off or change its conditions without editing any page.

Route 3: An HTML Widget in the Footer Template

If your site uses Elementor’s Theme Builder, the footer is a template that every page shares. Open that template, add an HTML widget anywhere inside it, paste the Talkmio snippet and update the template. The script then loads on every page that uses the footer.

Two cautions apply. First, check that every page type really uses that footer: a landing page built on a blank canvas template or a custom footer will not include the widget. Second, the HTML widget shows its content in the editor as an empty box, which is normal. Do not judge the result inside the editor; judge it on the live page. If you only want the chat on a single landing page, you can place the same HTML widget on that page instead, with the trade-off that you will have to repeat the step for each page.

Route 4: A Child Theme Footer or Header Snippet

Developers who maintain a child theme can add the script to footer.php just before the closing body tag, or through a small function hooked to the footer action. This route does not need Elementor Pro and is equally site-wide. Use a child theme so that a theme update does not overwrite the change, and keep a note of the change somewhere your colleagues will find it. For everyone else, the plugin does the same job without code.

Check the Widget on Every Template

Elementor sites tend to have many templates: home, blog, single post, product, landing and 404. Test the widget on one page of each type, in a private window and on a phone. Look for four things: the bubble appears, it does not cover a button or a cookie banner, the chat opens and sends, and a test question gets a sensible answer. Our guide to live chat widget placement explains how to move the bubble when it collides with something.

Pay special attention to full-width landing pages with sticky buttons. A floating “Call now” button in the bottom right corner and a chat bubble in the same corner will fight. Either move the chat to the left in the widget settings or move your button. In Talkmio the colour, position, assistant name, welcome and offline texts are set under Websites, and changes apply within five minutes.

Common Problems and Their Fixes

Most failures come from a small number of causes. Work through this list in order before assuming the widget is broken.

• The bubble does not appear at all. Check the site key, clear the page cache and the Elementor CSS cache, and reload in a private window. Caching plugins often serve a stored copy of the page from before you installed the widget.
• It appears on some pages only. The footer template or Custom Code conditions exclude those pages. Switch to the plugin or widen the conditions.
• It appears twice or two bubbles overlap. You added the snippet in two places, for example the plugin and Custom Code. Keep one.
• It is hidden behind another element. A sticky header, cookie banner or popup has a higher stacking order. Move the chat or adjust the other element.
• The snippet was pasted but nothing loads. Some editors turn straight quotes into curly quotes. Paste the snippet as plain text.
• A security or optimisation plugin blocks it. Exclude the Talkmio script from delayed loading or script blocking, or whitelist the domain.

If you use a performance plugin that delays JavaScript, test both with and without it. Delayed loading is fine for a chat widget, but it can mean the bubble appears a few seconds late. Our article on live chat widget page speed explains how to measure the effect so you can decide with numbers.

Set Up the Assistant Before Visitors Arrive

Installing the widget is the easy half. Before you announce it, spend ten minutes with Try Mio in the Talkmio dashboard. Ask the questions your customers ask most, see which knowledge pieces each answer used and fix the gaps by improving the page or adding a Q&A pair. Write a rule for anything you do not want answered automatically, such as delivery dates, and make sure someone watches the Inbox. Mio hands the chat to your team when it cannot answer, when the visitor asks for a person, complains or asks about a specific order.

When the whole team is offline, visitors are asked for an e-mail before their first message, and your later reply from the Inbox goes out as an e-mail. The checklist for testing an AI chatbot before launch is a good final pass before going live.

After Launch: Keep It Healthy When You Redesign

Page builders encourage redesign, and redesign is where chat widgets quietly disappear. If you installed through the plugin, a new Elementor template cannot remove the widget. If you used a footer template or Custom Code, add “check the chat bubble” to your launch checklist for any new footer, header or landing template. A two-minute test on the live site after every redesign is cheaper than discovering a week later that conversations stopped.

It is also worth testing after a major WordPress or Elementor update, since updates occasionally change how scripts are queued. If the widget disappears after an update, clear caches first and then re-save the Custom Code entry or the footer template. The Talkmio documentation lists the install steps for every platform in one place.

Frequently Asked Questions

Do I need Elementor Pro to add live chat to Elementor?

No. The Talkmio WordPress plugin works with free Elementor because it adds the widget at site level, outside Elementor. Elementor Pro is only needed if you want to use Custom Code or a Theme Builder footer template. Both are optional ways to place the same snippet.

Where should I paste the chat snippet in Elementor?

Before the closing body tag. In Elementor Pro, use Custom Code with the end-of-body location. Alternatively add an HTML widget to the footer template, or place the snippet in your child theme’s footer. The WordPress plugin avoids pasting altogether and needs only your site key.

Why does the chat bubble not show on my Elementor landing page?

Landing pages often use a blank canvas template without the shared footer, so a footer-based snippet never loads there. Use the plugin or a Custom Code entry set to the whole site. Also clear page caches and test in a private window, because logged-in views can differ.

Will live chat slow down my Elementor site?

A chat widget adds one script, and the effect on page speed is usually small but should be measured rather than assumed. Test your key pages before and after installing, and try your performance plugin’s delayed loading if the bubble affects your scores.

Can I show the chat only on some Elementor pages?

Yes. Use Elementor Custom Code with display conditions, or add the HTML widget only to the pages where you want the chat. The plugin runs site-wide, so use one of those two routes if you need to exclude pages such as checkout or legal notices.

Is the chat widget free to try on my Elementor site?

Yes. The Free plan includes one operator, one website, 50 AI answers a month and needs no card. Pro adds more operators, websites and answers, the e-mail channel and the option to remove the Powered by Talkmio line. Check the pricing page for current plans.

The Bottom Line

To add live chat to Elementor, install the Talkmio WordPress plugin, enter your site key and check one page of each template type in a private window. Use Custom Code or a footer HTML widget only when you need page-level control. Spend your real effort on the assistant: a knowledge base that answers your top ten questions and clear rules for anything it must pass to a person. Create a free Talkmio account, install the plugin and have the chat running before your next coffee.