Placing the chat window in Shopify

You paste one line of code into your Shopify theme. After that, the chat window appears on every page of your webshop.

Time needed: 10 minutes

What you need: Access to your Shopify admin, and the line of code from your Chatunda delivery e-mail

Download this guide as a PDF, handy to send to your web builder.

Before you start

You have received an e-mail from us saying that your digital assistant is live. It contains a line of code that looks roughly like this:

<script src="https://yourshop.chatunda.com/widget/CC-2026-XXXXXX-widget.js"></script>

This line is unique to your business. Always use the line from your own e-mail, not the example above.

Tip: Do this on a computer or laptop, not on your phone. On a phone, the code window in the Shopify admin is very small.

Step by step

Open the e-mail from Chatunda and select the whole line of code, from <script up to and including </script>.
Right-click the selection and choose Copy. You can also press Ctrl and C at the same time (on a Mac: Cmd and C).
In a new tab, go to your Shopify admin and log in.
The address is usually admin.shopify.com.
In the menu on the left, click Online Store.
At the top is the theme your webshop currently shows, with the black Edit theme button. Next to that button, click the button with three dots ... and choose Edit code.
The menu behind the three dots, with Edit code
A new tab opens with the code of your theme. On the left is a list of folders.
In that list, click the layout folder. The folder opens. Then click the file theme.liquid.
The layout folder is open and theme.liquid is selected
A lot of code appears on the right. Don't worry: you only need to add one line.
Click anywhere in that code so the cursor is in it. Then press Ctrl and F at the same time (on a Mac: Cmd and F).
A search box appears at the top right. Type </body> and press Enter. The line with </body> is now highlighted. It is right at the bottom.
The search box with body, the line found at the bottom and the Save button at the top right
Click just before </body>, so the cursor is exactly at the start of that line. Press Enter once. An empty line appears above </body>.
Click in that new empty line and paste the code: right-click and choose Paste, or press Ctrl and V at the same time (on a Mac: Cmd and V).
It now looks like this:
```
<script src="https://yourshop.chatunda.com/widget/CC-2026-XXXXXX-widget.js"></script>
</body>
```
Click Save at the top right.

Watch out: Do not remove or change anything else in the code. Changed something by accident? Then do not click Save, but close the tab. Nothing will have changed.

Checking that it worked

Open your webshop in a new tab, the way a customer would.
Refresh the page: press F5 (on a Mac: Cmd and R).
A round button now appears at the bottom right (or bottom left, if you chose that). Click it and ask a question.

Done? Then your digital assistant is now visible to all your visitors. You don't need to do anything else.

It doesn't work

I don't see a button. Wait a minute and refresh the page again. Still nothing? Open the webshop in a private window (in Chrome: Ctrl, Shift and N), because your browser sometimes remembers the old version.
I can't find Edit code. Check that you are in Online Store, and click the three dots next to the black Edit theme button for the theme at the top of the page.
I chose a different theme later. Then the code is in the old theme. Repeat the steps above for the new theme.
It still doesn't work. E-mail info@chatunda.com with the address of your webshop. Feel free to attach a screenshot. We are happy to help.

Tip: Does someone else manage your webshop, such as a web builder? Then forward this guide to them, together with the line of code from your e-mail.

Version 2, 25 September 2026. Something not right any more? Email info@chatunda.com, we are happy to help.

All guides