Squarespace Integration Plugin

Owned by Ekaterina Slesarchik
Last updated: 27-06-2023
3 min read

First of all, download the zip archive with the two files and extract this zip archive:

  1. wizart-floating-button.js

  2. wizart-entry-point-button.js

Version 7.0

Please enable Developer Mode (click the link to see how). Having activated the Developer mode, download the files of your site. You can see the site.region file (this is your main file). If you are using a template for the Online Store, in this file, you can find the following two necessary strings:

  1. {.equal? collection.typeName "index"} (this is for the Homepage)

  2. {.equal? collection.typeName "products"} (this is for Products)

After extracting the zip archive, add the two files from the zip archive into the ‘scripts’ folder of your site.

  • Integration on the Homepage
    After ‘index’ you need to add the following code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"></script> <squarespace:script src="wizart-floating-button.js" combo="true" />

On the Homepage, add the token to:

var floatingButton = new window.WFloatingButton({

    token: "your_token",

    element: document.getElementsByTagName("body")[0]

});

Also, you can add settings for your button. Follow these instructions to customize the button.

Be careful, in the default code, there are scripts that add jquery library, please check that you don’t have any errors!

  • Integration on a Product Page
    After ‘products’ you need to add the next code:

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <squarespace:script src="wizart-entry-point-button.js" combo="false" />

Look at the screenshot to see how it should look at the end: (default template) 

Version 7.1+

Unfortunately in version 7.1, Squarespace doesn’t support Developer mode, so you can’t access the code files of your site. However, you can add the code to your site using the default free code injector or a premium one. In the zip archive, you can find the necessary code to insert the custom javascript code. By default use Page Settings > Advanced.

  • Homepage

In the Page Header Code Injection, you need to add:

<script type="application/javascript"   src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"></script>

And then the code from the wizart-floating-button.js embedded in the <script> tag.

  • Product Page
    In the Page Header Code Injection, you should add:

And then the code from the wizart-entry-point-button.js embedded in the <script> tag.

Â