Add the chat widget to your website
One line of code for any website - WordPress, Shopify, Wix, Squarespace, Webflow, Google Tag Manager or plain HTML - and how to lock it to your own sites.
Each chat widget has its own code. Open Widgets & chatbots > Chat widgets, open the widget and click Copy code. It looks like this:
<script src="https://www.ellibo.com/livechat/w.js?k=YOUR_KEY" async></script>Paste it once, before </body>, so it is on every page. It loads after your page, so it never slows your site.
Where to paste it
| Website | Where |
|---|---|
| WordPress | A "header and footer" plugin (paste in the footer box), or your theme's footer.php before </body> |
| Shopify | Online Store > Themes > Edit code > theme.liquid, before </body> |
| Wix | Settings > Custom code > Add custom code, place it in Body - end, all pages |
| Squarespace | Settings > Advanced > Code injection > Footer |
| Webflow | Project settings > Custom code > Footer code |
| Google Tag Manager | New tag > Custom HTML, trigger All Pages |
| Your own HTML or PHP | Before </body> in your page template |
| Your Ellibo website or store | No code: turn on the chat switch there |
If your site uses a strict Content-Security-Policy, allow https://www.ellibo.com in script-src and frame-src.
No website? The chat link
Every widget has a Chat link (https://www.ellibo.com/livechat/c/...): a page of its own to chat with you. Put it in your email signature, on WhatsApp, in your Instagram bio, or print it as a QR code.
Lock it to your websites
Under Where it may run, and privacy, list your websites, one per line (for example mybakery.com). That also covers www.mybakery.com and other sub-domains. On any other site, browsers refuse to show your chat and our servers refuse its calls, so nobody can copy your code onto their site. Your Ellibo website and store always work.
The look
- Colour, title and the line under it, welcome message and the away message
- Button: a round bubble, or a bubble with the title; bottom right or left
- Show the faces of the people online, and a sound for the visitor when you reply
- Opening hours: outside them the widget takes messages instead
- Before the chat: ask the name, email and phone (optional or must give)
The Preview on the right changes as you type. Click Try it to open your chat link.
For your developer: the JavaScript API
Once the code is on the page, window.EllChat has:
| Call | What it does |
|---|---|
EllChat.open() / close() | Open or close the chat window |
EllChat.hide() / show() | Hide or show the chat button |
EllChat.identify({name, email, phone, id, data}) | Tell the chat who a signed-in customer is |
EllChat.consent(true) | The visitor accepted your cookie banner: pages are tracked from now on |
EllChat.on('open' / 'close' / 'message' / 'chat', fn) | Run your code when something happens |
Calls made before the script has loaded wait: window.EllChat = window.EllChat || {q: []}; EllChat.q.push(['open']);
More than one site
Make a widget for each website or shop (Standard: 3, Professional: 10, Business: no limit). Each has its own look, hours, rules and chatbot, and chats show which widget they came from.