Skip to main content

Revisual.io: SquareSpace -->Embedding your widget

Here's how to embed your calendar or event alert widget on your SquareSpace website.

Piotr Poźniak avatar
Written by Piotr Poźniak
Updated yesterday

This walkthrough will guide you in embedding your Revisual widget on your SquareSpace website.

Sometimes, new embeds do not show up in on builder pages until published. We suggest using a test page or private mode to set things up. Once things are set as you want them, you can update the actual page or make your private page public.

Part I: Make sure you have a widget to embed

You will need a Revisual widget (Calendar or Event Alert). If you have not already created one, please do that before continuing this process: https://help.revisual.io/en/articles/9046289-revisual-io-creating-your-first-calendar-or-event-alert

Part II: Make sure you have a website to display it on

Did you tell Revisual about your website(s)? If not, please do that now: https://help.revisual.io/en/articles/9046252-revisual-io-managing-your-websites

Part III: Embed your widget

After you log in to Revisual...

Step 1: If you do not see the dropdown menu under Widgets, click on Widgets to open the menu.

Step 2: Click on Calendars or Event Alerts.

Your dashboard will open.


Step 3: Inside your chosen category, open the item you wish to work with.

Step 4: Make sure your item is published. If not, please do that now: https://help.revisual.io/en/articles/11208113-revisual-io-install-overview

Step 5: Click the purple Install button.

You will see the following display:

CALENDARS

[OR]

EVENT ALERTS

Step 6: Click on the SquareSpace button.

Step 7: Then click the blue Next button. You will see the following display:

CALENDARS

[OR]

EVENT ALERTS


Installing Revisual on SquareSpace (Calendars and Event Alerts)

(1) This part applies both to calendars and event alerts.

(2) If you are using an older version of SquareSpace, the path to your Code Injection might look a little different. If these next three steps do not look relevant for you, click here.

Step 1: In your SquareSpace dashboard, click on Settings (turquoise box in image below).

Step 2: Within the Settings menu, click on Advanced (turquoise box in image below).

Step 3: Within the Advanced Settings menu, click on Code Injection (turquoise box in image below). The Code Injection page will open.

FOR OLDER VERSIONS OF SQUARESPACE

If you are using an older version of SquareSpace, the path to your Code Injection might look a little different: Website --> Pages --> Website Tools --> Code Injection

Video does not have audio.


FOR EVERYONE, CONTINUE THE PROCESS

Step 1: Go to Revisual and copy the code from #4.

CALENDARS

EVENT ALERTS

Step 2: Return to SquareSpace and paste the copied code into the HEADER section.

Step 3: Click Save to confirm your changes.

REMEMBER! You only have to do the above part once, regardless of the number of widgets you embed. In other words...

  • if you embed more than one calendar in this same website, you do not need to repeat the steps above.

  • once you have installed the script, all event alerts will be displayed on your website.

IF YOU HAVE DONE THIS FOR AN EVENT ALERT: You are finished.
IF YOU HAVE DONE THIS FOR A CALENDAR: Continue below.


CONTINUE THE INSTALLATION OF YOUR CALENDAR

Step 1: Return to the SquareSpace main Settings page (gold arrow in image below).

Step 2: Click on Edit (turquoise box in image above). You are now on your SquareSpace website page.

Step 3: Click on Add Block (gold box in image below).

Step 4: Choose the Code block option.

Step 5: Position the block where you want your calendar widget to display.

Step 6: Double click on the block to open the content popup. This is where you will tell SquareSpace more about the calendar you wish to embed.

Step 7: Go back to Revisual, and open the Adding calendar to selected page section.

Step 8: Copy the code snippet from #5 (see image above).

Step 9: Paste the copied code into the SquareSpace popup content space.

Step 10: Click Save to confirm your action.

Your Revisual calendar widget is now displaying.

NOTE: If the preview shows that the widget IS NOT displaying, contact us for support via our website chat.

Repeat this section and ONLY this section to embed other Revisual calendars on the same webpage or other pages on your website.

Did this answer your question?