Install Yaplet with Google Tag Manager

If your site already runs Google Tag Manager, you can add the Yaplet chat from there, without touching your site's code. You create one Custom HTML tag with the Yaplet code, let it fire on every page, and publish. This is also the way to go for site builders and shops that only offer a field for a Google Tag Manager ID: connect Tag Manager there first, then follow this guide.

This guide assumes the Tag Manager code is already on every page of your site. To publish changes in Tag Manager, you need Publish access to the container.

1. Copy your Yaplet code

In the Yaplet dashboard's left menu, go to Brand → (your brand) → Chat widget → Install. If the tab asks where your website runs, choose Google Tag Manager. Copy the code with the copy button on the code block.

Tag Manager needs the code inside <script> tags, so the code you paste in step 3 must have them.

2. Create a Custom HTML tag

1. Go to tagmanager.google.com and open the container of your website.
2. Click Tags, then New.
3. Give the tag a name you will recognize later, for example Yaplet chat.
4. Click Tag Configuration and choose Custom HTML.

3. Paste the code

In the HTML field, paste the Yaplet code. The code you paste must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. Google asks for JavaScript to always sit inside these tags. It looks like this:

<script>
(your Yaplet code)
</script>

4. Make it fire on every page

Click Triggering and choose Initialization - All Pages. Every web container has this trigger by default. Then click Save.

5. Test it in Preview mode

This step is optional. Click Preview (top right), enter your site's address and click Connect. Your site opens in a new window with your unpublished changes, and the chat button should appear in the bottom-right corner. Only your browser sees this preview, not your visitors.

6. Publish

Click Submit (top right). Leave Publish and Create Version selected, give the version a name, for example "Yaplet chat", and click Publish.

7. Check your site

Open your site in a new browser tab and reload the page. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.

For a full checklist, see Verify your installation.

If the chat doesn't appear

• The changes aren't published. Saved changes only show in Preview mode. Click Submit and publish.
• The <script> tags are missing. Open the tag and check that <script> is on the line before the code and </script> on the line after it.
• You can't publish. Your access may let you edit but not publish. Ask someone with Publish access to the container to publish it.
• The chat only shows after a visitor accepts cookies. Open the tag and go to Advanced Settings → Consent Settings. If Require additional consent for tag to fire is selected, the tag only fires once the visitor has granted the consent types listed there.
• Tag Manager isn't on the page. The tag only runs on pages that load your Tag Manager container. Check that the Tag Manager code is on every page of your site.
• You still see the old page. Your browser or your site's cache may show an older copy. Reload the page, or open it in a private window.

What's next

To see what the code does and where your widget ID is, read Install Yaplet.