How to Install Live Chat on Your Website: Horoshop, Prom, OpenCart, WordPress, Tilda, Shopify

Installing live chat seems scary only until the first time. In reality, you copy one line into the right field. Below are instructions for the platforms most Ukrainian stores run on. The examples use Talkoly, but the logic is the same for most services.

What you need before you start

1. An account with a chat service. With Talkoly, sign-up is free and no card is needed.
2. Access to your site’s admin panel with rights to change settings or the template.
3. The widget code. It looks roughly like this:

<script src="https://talkoly.com/w.js" data-site="ID" async></script>

In your account, your site’s ID will already be filled in instead of ID. Copy the whole code without changing the quotes. The async attribute means the widget loads after the main page content and does not slow the page down.

Tip: before changing a template, make a copy of the file or write down what you change. That way, undoing it takes a minute.

Horoshop and Prom.ua

Horoshop

Horoshop is a popular Ukrainian store builder.

1. Open your store’s admin panel.
2. Go to Settings → Integrations.
3. Find the “Additional code in <body>” field (in some versions it is called “Third-party scripts”).
4. Paste the widget code and save.

The code will automatically appear on every page of your store. Features for this platform are covered on the chat for Horoshop page.

Prom.ua

Prom.ua is a large Ukrainian marketplace that also lets companies build their own site. This section is about that company website created on Prom, not your listing on the marketplace — you cannot add a third-party chat there.

1. Log in to your company account on Prom.
2. Open Settings → Site settings.
3. Find the “Embed code” field.
4. Paste the line of code and save.

Prom details and working with products from your feed are described on the chat for Prom page.

OpenCart

OpenCart 3: plugin

OpenCart 3 has a ready-made module in OCMOD format. Download it from the plugins page, install it via Extensions → Installer, then refresh modifications (Extensions → Modifications, the refresh button) and enter your site ID in the module settings.

OpenCart 4 and 2: via the template

1. Open Design → Theme Editor.
2. Choose your theme and the common/footer file.
3. Find the closing </body> tag and paste the code right before it.
4. Save and clear the cache in the dashboard.

More about OpenCart on the chat for OpenCart page.

WordPress and WooCommerce

The easiest way is the plugin. It not only adds the widget but also passes the name, email and phone of a logged-in customer to the chat. Your manager won’t need to ask for contact details again.

1. Download the plugin from the plugins page.
2. In WordPress, open Plugins → Add New → Upload Plugin, choose the archive and activate it.
3. In the plugin settings, paste the site ID from your account.

If you don’t want to install plugins, you can add the code to your theme’s footer.php before </body>. But a theme update may wipe out your changes, so a child theme or the plugin is better. Store details are on the chat for WooCommerce page.

Tilda and Shopify

Tilda

1. Open your project and go to Site Settings → More.
2. Find HTML code for the HEAD section and add the line of code.
3. Save and republish all pages — without this, the changes won’t appear on the site.

Shopify

1. In the admin, open Online Store → Themes, and next to the active theme choose Edit code.
2. Open the theme.liquid file.
3. Paste the code before </body> and save.

For other platforms and custom-built sites, the rule is the same: the code goes before </body> on every page. Instructions for other CMSs (website management systems) are on the plugins page.

How to check that the chat works

1. Open your site in an incognito window — this way you see it without your own browser cache.
2. Make sure the chat button appears in the corner of the page.
3. Send a test message as a customer.
4. Check that it arrives in the agent panel, on your phone or in Telegram, and reply.
5. Look at several different pages: home, category, product page, cart.

In Talkoly, your account has a “Check installation” button: it tells you whether it can see the code on your site.

Why the chat doesn’t show up: common problems

• Code in the wrong place. It was pasted into a meta tags field, into page text, or into a template used on only one page. Check that the code is on every page — open the page source (Ctrl+U) and search for w.js.
• Cache. Caching plugins in WordPress (and the OpenCart cache) can serve an old version of the page. Clear the plugin cache, and the CDN cache too if you use one.
• Script optimizers. Some plugins “merge” or delay JavaScript and break third-party widgets. Add the chat script to the exceptions.
• Wrong domain. Your account says shop.ua, but the site opens at www.shop.ua or on a test subdomain. Check the site address in the chat settings.
• The code was copied only partly, or the quotes turned into “curly” quotes after pasting through a text editor. Copy it again straight from your account.
• Ad blockers. This is rare, but if only you can’t see the chat, turn off browser extensions and check again.

What to set up right after installing

A chat that just sits in the corner works worse than it could. Spend another 15 minutes on the basics.

1. Greeting. Short and human: “Hi! We can help with sizes, stock or delivery. Just write.” Skip “How can I help you?” — nobody answers that.
2. Topic buttons. “Stock”, “Delivery and payment”, “Exchanges and returns”, “Order status”. Tapping is easier for customers than putting a question into words.
3. Working hours and auto-reply. Set the hours when you reply. Outside them, let the offline form collect a phone, Telegram or email.
4. Telegram. Connect the bot so you can reply from your phone, even when you are away from your computer. How it works — in our article how to reply to customers from Telegram.
5. Quick replies. Save a few ready-made phrases about delivery and payment. Take ready wording from our collection of chat sales scripts.

If you are choosing which service to install, see our comparison of live chats for websites. If you are switching from another chat, remove the old code first so there aren’t two chat buttons on the site at once.

FAQ