Cloudflare Zaraz
Install the Yaplet chat widget with Cloudflare Zaraz's Custom HTML tool on a site that runs behind Cloudflare. No changes to the site's code.
Overview
Cloudflare Zaraz is Cloudflare's tool for loading outside scripts. If a website runs behind Cloudflare, a Custom HTML tool in Zaraz can load the Yaplet code on every page view, without touching the site's code. For a site that isn't proxied through Cloudflare, paste the code into the site directly instead, as described on the Installation page.
Installation Steps
Copy your Yaplet code
In your Yaplet dashboard, go to Brand → Chat widget and open the Install tab. If the tab asks where your website runs, choose Other website. Copy the code with the copy button on the code block.
If the code you copied starts with !function (Yaplet, it has no <script> tags around it yet. Zaraz needs those tags, so you add them when you paste the code.
Add a Custom HTML tool
In the Cloudflare dashboard, go to the Tag setup page. If you have added tools before, select Third-party tools and click Add new tool. Choose Custom HTML from the tools catalog and select Continue.
If Cloudflare asks you to grant the tool's permissions, allow them. The Custom HTML tool needs them to run scripts on your pages.
Paste the code
Set up the tool's action: give it a name (for example Yaplet chat) and choose Pageview under Firing Triggers. In the HTML Code field, paste the Yaplet code. The code 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. The finished code looks like this:
<script>
(your Yaplet code)
</script>
Then select Save.
Publish, if Zaraz asks for it
By default, Zaraz makes every change live right away. If the Preview & Publish Workflow is turned on, select Publish to make the change live.
Check your site
Open the site in a new browser tab and reload it. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.
Troubleshooting
- The code shows up as text on the pages — the
<script>tags are missing: Zaraz adds anything outside them to the page as text. Edit the action and add the tags. - Nothing appears at all — Zaraz may not be loading. Check that the domain is proxied by Cloudflare, that Auto-inject script is on in Zaraz's settings, and that the Custom HTML tool is enabled.
- The chat waits for cookie consent — if you use Zaraz's consent management and assigned the Custom HTML tool to a purpose, the tool only runs after the visitor agrees to that purpose.
- The chat loads twice on a single-page app — if Single Page Application support is on in Zaraz's settings, open the Custom HTML action, select Add Field, add Ignore SPA and switch it on.
- The chat stopped working after a busy month — the account may have used up its free Zaraz events. Turn on Zaraz Paid on the Zaraz plans page, or wait for the next billing cycle.
- You still see the old page — the browser or the site's cache may show an older copy. Reload, or open the site in a private window.