Adding the HabitMove widget to a Squarespace site

Before you begin

Sign in to your HabitMove provider dashboard, open Customer Experience, then Customer Site. Choose the pages, default schedule view, venues, and width you want before copying the generated code.

Copy the entire JavaScript snippet, including both script blocks. The generated provider ID connects the widget to your business and should not be changed.

Add HabitMove to Squarespace

• Open the Squarespace page editor for the page where customers should book.
• Add a Code block in a full-width section.
• Set the block to HTML, paste the complete HabitMove widget code, and save it.
• If the widget only appears after refreshing, disable Ajax loading for that page or template.
• Open the published page in a private browser window and complete a booking-flow check.

Example widget code

Use the code generated in your own provider dashboard. This example only shows the expected format; replace the placeholder with your generated code rather than typing a provider ID manually.

<script src="https://book.habitmove.com/widget.js" type="text/javascript"></script>
<script type="text/javascript">
habitmove.calendar({
    provider_id: YOUR_PROVIDER_ID,
    type: "main",
    width: "100%",
    specific_pages: [],
    view: "schedule.month",
    venue_ids: "~all",
    disable_venue_selector: false,
    version: 3
});
</script>

Check the live booking page

• Open the published page in a private browser window so you see the customer experience.
• Confirm the class schedule, provider colours, venues, and booking buttons are visible.
• Open a class and check that customer sign-in or account creation returns to the selected booking.
• Test at desktop and mobile widths. The HabitMove widget adapts its layout automatically.
• Use one HabitMove widget per page for the clearest customer experience.

Troubleshooting

• If the browser shows the script as text, move it into an HTML, embed, or custom-code element.
• If the schedule is blank, confirm both script blocks were copied and that the generated provider ID is unchanged.
• If the widget is narrow or clipped, make the containing section full width and remove a fixed height from the surrounding block.
• If changes are not visible, publish the website again and test in a private browser window.