Squarespace Setup

❗️

Deprecation Notice

OneSignal stopped supporting new apps from using Blogger, Bubble, Squarespace, Webflow, Weebly, Wix, HTTP sites, and website builders that don't support uploading Service Workers to a server (which are required for web push).

We used to provide a workaround subdomain like https://LABEL_HERE.os.tc so we would host the Service Worker files for you, but this isn't going to be supported anymore for several reasons, the most important being:

• This doesn't work for iOS Web Push
• It provides a bad User Experience for your users
• Chrome is making a change detailed in their storage partitioning plans / CHIPS which when enabled prevents our SDK from checking unsubscribe stats when using the https://LABEL_HERE.os.tc/unsubscribe page.

If you currently use the the os.tc subdomain, you can continue to use it but will no longer be able to prompt for push notifications. Your existing subscriptions will continue to receive notifications. Starting September 8th, Chrome's change will prevent users from being able to unsubscribe when they visit the https://LABEL_HERE.os.tc/unsubscribe page. They will need to unsubscribe from the browser notification settings.

Sorry for the inconvenience. We know a lot of people want this. Especially for blogger, hopefully the Google Team will support this someday: Is it possible that I can build progressive web app for my Blogger blog

If you use one of these types of site builders, you may be able to work around this by following our Typical Website setup and put a CDN in front of your domain to host the OneSignalSDKWorker.js Service Worker file. But this is quite technical and we don't have any guidance on how to setup the CDN.

This guide will walk you through how to set up web push on Squarespace. If you do not use Squarespace, or wish to write custom code, please go to Web Push Quickstart.

At any time to get back to setup, go to App Settings and click Configure for the Google Chrome platform (instructions for Safari are here).

📘

As of December 1, 2017, Squarespace requires customers have Premium plans to be able to add custom code to your site, which is required for web push.

---

Step 1. Choose Integration

OneSignal supports sending web push notifications from a variety of different web technologies. Select Squarespace to continue:

Step 2. Site Setup

Once you've selected Squarespace as your integration, you must fill out information about your site.

Enter Site URL

Most users just enter their base site URL for this field (e.g. yoursite.com).

If your site is accessible from both www & non-www links (e.g. example.com AND www.example.com), please only enter the URL that you wish to send push notifications from. We recommend redirect traffic from one to the other (e.g. users that visit example.com are redirected to www.example.com), so that all your traffic only goes to one.

Auto Resubscribe

Recommended: This feature is only for HTTPS sites and if you do not select "My site is not fully HTTPS". This allows users to automatically resubscribe upon returning to the site without being prompted if they clear their browser cache or if you are transferring to OneSignal from another push provider.

Default Notification Icon URL

Enter a link to an icon file that is at least 80x80 pixels. Recommended size is 192x192. The file must be .png, .jpg, or .gif.

Choose a Label

Squarespace implementations must choose a unique label to be displayed in your notifications. For example, the below image shows notifications are coming from mylabel.os.tc:

Warning: You can only change your label if you have less than 100 web users. Once you have 100+ web users, this setting is disabled.

FAQ

How does OneSignal work differently with HTTP sites?

What if my site is in a subfolder?

Why does my site require a label?

Why can't I change my label?

Step 3. Permission Prompt Setup

To send push notifications to users, you first must ask them for permission using a Prompt. You must have at least one Prompt on your site for web push to work. Click Add a Prompt to open the permission prompt selector.

Permission Prompt Editor

In the Permission Prompt Editor, you can select which prompts you wish to use, and style them as you like. Once you have edited the prompt to your liking, click Save.

Subscription Bell - a small icon at the corner of your page that users can interact with to subscribe

Slide Prompt - a small modal that comes from the center of the page and asks if users are interested in signing up.

HTTP Pop-Up Prompt (HTTP-only) - a pop-up window that appears after other prompts that is required for HTTP sites.

Custom Prompts - create your own links or buttons as prompts.

Step 4. Welcome Notification

Optional: Welcome notifications an optional way to thank users after subscribing to your site. Users will see a welcome notification as soon as they subscribe. You can edit or disable them here.

-## Step 5. Advanced Options

Optional: Most sites will not have to edit anything in Advanced options. See Web Push Advanced Options to learn more about each option.

👍

Site Configured

Once you've completed steps 1-5, click 'Save' to save your configuration.

Next, you'll need to add OneSignal to your site by following step 6.

Step 6. Add Code to Site

To enable OneSignal on your Squarespace site, you will need to copy the code from Web Push Settings.

Next, follow the Squarespace guide to Code Injection(https://support.squarespace.com/hc/en-us/articles/205815908), and paste your OneSignal code into the Header section:

Next, click Save.

FAQ

Troubleshooting: adding code in the right location

👍

You're Done!

Next step: Send your first push notification via the OneSignal Dashboard