Install the chat on your website

You install the chat by pasting one line of code into your website. Each agent has its own line, in its Widget tab: you copy it, paste it once, and the chat appears on every page that carries it.

Before you start

• The agent has to be active. An agent that is a Draft or is Paused does not show the chat even when the code is in place. Switch it on with the Activate button (or Resume, if it was paused) on the agent’s page.
• You need to be able to edit your website, or have someone who can: the person who built it, your agency or your platform’s support. The code and this article are all they need.
• The look does not have to be finished. Colours, the greeting and everything else can be changed later from the app without touching the website again. See customise the look of your website chat.

Copy your agent’s code

1. Go to Agents and open your agent.

2. Open the Widget tab and, inside it, Installation.

3. Under Installation code you will see a line like this one. Press Copy.

   <script src="https://backendiagentify.yarqat.com/widget.js" data-agent="your-agent-key" async></script>

   Always copy the one in the app, not the one in this article: yours carries your agent’s public key, which is what tells the chat who answers.

Paste it into your website

The code goes just before the </body> tag, on every page where you want the chat. If your site uses one shared template for all its pages, pasting it once in that template is enough.

If your site is built with one of these platforms, follow its guide:

• Install the chat on WordPress
• Install the chat on Shopify
• Install the chat on Wix
• Install the chat on Squarespace
• Install the chat on Webflow

On a hand-built site (HTML)

1. Open the page’s file, for example index.html, or the template all your pages share.

2. Find the </body> tag. It is almost at the end of the file.

3. Paste the code on the line above it:

       <!-- the content of your page -->
       <script src="https://backendiagentify.yarqat.com/widget.js" data-agent="your-agent-key" async></script>
     </body>
   </html>

4. Save the file and publish it the way you always do: by FTP, from your hosting panel or with your deployment system.

5. Repeat the steps on any page that does not use that template.

On another platform or content manager

Look in its settings for an option called “custom code”, “code injection”, “scripts” or “footer” that adds code to the whole site before </body>, and paste the line there. If the platform only lets you add code to the header (<head>), that works too: the chat waits for the page to finish loading.

Check that it works

1. Open your website in a private browser window, so that you do not see a saved copy.

2. The chat button appears in a bottom corner of the page. Press it.

3. Type a question. The reply arrives within seconds and the conversation shows up under Conversations, inside the app.

After it is installed

• Changing the look or the texts. Whatever you change in the Widget tab applies when you press Save changes, without pasting the code again. On your website it can take about a minute to show.
• Switching agent. Each agent has its own code. To have a different agent look after your website, replace the line with the new agent’s.
• Removing the chat. Delete the line from your website. If you only want it to stop answering for a while, pause the agent: bear in mind that it then stops answering on WhatsApp and Instagram too.

If the chat does not appear

Most often the agent is not active, your domain is not under Allowed domains, or you are looking at an old copy of the page. The full list, with how to check each cause, is in the chat does not appear on your website.