Unliche SDK – Web Integration with Squarespace

Last Updated On January 03, 2019
< Back

In this document, we will show you how you can integrate Unliche SDK to your Squarespace website. Follow these simple Web SDK integration steps:

1. Login to Squarespace
2. Choose website
3. Go to Settings -> Advanced -> Code Injection
4. Add code snippet to your header/footer

Detailed Steps:

1. Login to Squarespace
Register with Squarespace and login using your account credentials.
Your panel will look like this once you login.

 

2. Choose the website in which you want to integrate the Unliche SDK.

3. Go to Settings -> Advanced -> Code Injection

 

4. Add the code snippet to your header/footer
In the Website summary page on Unliche, you can find the single line code to be integrated into your website code. A Unique API key for your website is pre-embedded into this code snippet making it unique only for your website

Click on save and test page by refreshing site preview on right side. You can inspect page and see the API logs.
And that’s it! You have integrated Unliche on your Spquarespace website.


Event Integration Steps:
Once the SDK is integrated, follow these steps to integrate the events or touchpoints that you want to use in your campaigns:

1. Go to Home > Pages
2. Select the page where an event needs to be added for a button/element
3. Right-click on the page and select ‘Inspect’. Look for the button’s/element’s second parameter in class property. Copy this parameter.

 4. Go to Page Settings icon > Advanced tab

5. Put the below code with your event_id and element_id in the PAGE HEADER CODE INJECTION area:

HTML

<script>
      window.Squarespace.onInitialize(Y, function() {
        document.querySelector(".sqs-block-button-element").addEventListener("click", function() {
               UnlicheSDK.trackEvent(EVENT_ID);
        });
    });
</script>


Note
EVENT_ID – will found under App > Page in the Advertiser’s Unliche panel
6) Click on Save and validate the event by clicking on button of site preview on the right side.

For more information about Squarespace developer documentation, please visit https://developers.squarespace.com