Adding the HabitMove widget to a WordPress 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 WordPress

• Sign in to the WordPress administration area and open Pages.
• Create a booking page or edit the page where the schedule should appear.
• Add a Custom HTML block. Do not use a Paragraph or standard Code block.
• Paste the complete HabitMove widget code into the Custom HTML block.
• Preview the page, publish or update it, and test customer sign-in and booking.

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.