Add the Allinaa chatbot to a site built with Elementor

Elementor is a page builder on top of WordPress, which means you have three possible routes and only one of them depends on Elementor at all. The honest advice first: the WordPress routes are the sturdier ones, because they keep working if you ever change builder.

Before you start: copy your embed code

Create your account at bot.allinaa.com/start using your site's address. The setup wizard reads your own pages and drafts the knowledge from them so you can edit and approve it. Step 5, "Install", shows your line with a copy button:

<script src="https://bot.allinaa.com/widget.js" data-bot-id="your-bot-id" defer></script>

Route 1: Elementor's own Custom Code

Elementor has a site-wide custom code feature, found in its site settings rather than on an individual page, where you can add a snippet and choose where in the document it goes and which pages it applies to. Two things to know before you choose it:

• It is in the paid version. If you are on free Elementor the menu item is not there, and that is the expected behaviour rather than something to hunt for.
• It ties the widget to the builder. If you later rebuild without Elementor, the snippet goes with it - usually discovered when somebody notices the chat has been missing for a month.

If you use it, add the snippet site-wide with the placement set to the end of the body, and publish. Elementor's own documentation is at elementor.com/help; search it for "custom code" if the menu has moved since this was written.

Route 2 and 3: the WordPress ways, which do not care about your builder

Both are described in full on the WordPress guide:

1. A small plugin file in wp-content/mu-plugins/. It survives theme updates, theme switches and builder changes, and it is the method used on Allinaa's own customer sites. If you have file access, this is the one to pick.
2. A code-snippets plugin, if you would rather not touch files. Adds the line through the theme's footer hook.

Do not paste it into a parent theme's template directly: the next theme update removes it.

What not to do: an HTML widget on a page

Elementor has an HTML widget you can drop into a page, and it will work - on that one page. People use it, then wonder why the chat is missing everywhere else, and end up with the snippet on four pages out of forty. A chat widget belongs site-wide, because visitors from search land on deep pages, not on your home page. Put it in once, in one of the three routes above.

Caching and JavaScript optimisation

Elementor sites usually run a caching plugin, and its JavaScript optimiser is the most common reason a correctly installed widget never appears. Purge the cache after installing, and if the tag is still absent from the page source, exclude it from JavaScript combining or deferring. See install troubleshooting.

Elementor popups and the contested corner

If your site uses an Elementor popup, a sticky bar or a floating button, check the bottom-right corner of a phone screen after installing. That corner is where a cookie banner, a sticky call button and the chat bubble all want to sit, and two of them overlapping makes both unusable. See where to put the chat widget.

Check it worked

1. Open your site in a private window - a logged-in editor view can behave differently.
2. Check the bubble on the home page and on a deep page.
3. Ask it something about the page you are on and see whether the answer is about the right thing.
4. Open the same page on a phone and look at that corner.

Then go through the launch checklist.