Install Yaplet on a Squarespace site

Squarespace's Code Injection adds a piece of code to every page of your site, and Squarespace names live chat as one of the things it is for. You copy one block of code from Yaplet, paste it into Squarespace, and the chat button appears on your site. You don't need an extension or a developer.

Code Injection is available on the Core, Plus and Advanced plans, and on the older Business and Commerce plans. It is not available on the Basic plan or the older Personal plan.

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 Squarespace. Copy the code with the copy button on the code block.

Squarespace asks for JavaScript to be wrapped in <script> tags, so the code you paste in step 3 must have them.

2. Open Code Injection

In your Squarespace site, open the Pages panel. At the bottom of the panel, click Custom Code, then Code Injection. On a version 7.0 site, click Website Tools at the bottom of the panel instead, then Code Injection.

3. Paste the code into the Footer field

1. Click into the Footer field. Code in this field goes just before the end of every page.
2. 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.
3. Click Save.

The Footer field should look like this:

<script>
!function (Yaplet, t, i) { … your Yaplet code … }();
</script>

4. Check your site

Open your site in a private (incognito) browser window and reload the page. While you edit, Squarespace can switch custom code off in its preview, so a private window shows what your visitors see. 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 code shows up as text on your pages. The <script> tags are missing. Add them in the Footer field as in step 3, and save.
• You can't find Code Injection. Your plan doesn't include it. Code Injection needs the Core plan or higher.
• The chat doesn't show while you edit. If Squarespace says "Scripts have been disabled on your site preview", custom code is off in the editor only. Open your site in a private window to see it as visitors do.
• The chat is missing on the checkout page. That's expected: Squarespace doesn't run custom code on checkout pages.
• Your site is on version 7.0 with Ajax loading on. Squarespace says Ajax loading can conflict with custom code. If the chat behaves oddly, try switching Ajax loading off.
• You still see the old version of your site. Reload the page without the browser cache, 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.