Adding a Schedule to Wix

Overview

You can add your reservie schedule to a Wix website so that customers can browse and book your events directly from your site. There are two approaches: embedding the schedule widget using an HTML element, or linking to your hosted schedule page.

Before you start

Make sure you have already created a schedule in reservie. See Getting Started with Schedules for instructions.

Getting your embed code

1. Navigate to Schedules in the sidebar menu
2. Find the schedule you want to add to Wix
3. Click the action menu (three dots) on the schedule and select Get Code
4. The dialog shows two tabs: Widget and Hosted Page

Widget code

The Widget tab provides a script tag:

<script src="https://public-cdn.reservie.app/embed.js"
  data-subdomain="your-site"
  data-schedule-id="your-schedule-id">
</script>

Hosted page link

The Hosted Page tab provides a direct URL:

https://your-site.reservie.net/schedule/your-schedule-id

Method 1: Embedding the widget in Wix

This method displays the schedule directly inside a page on your Wix site.

1. Copy the Widget code from the Get Code dialog
2. Open the Wix Editor for your site
3. Click Add Elements (the + button)
4. Select Embed Code > Embed HTML
5. An HTML element will appear on your page — click it and select Enter Code
6. Paste the widget code you copied and click Update
7. Resize the HTML element to fit your page layout — make sure it is wide enough and tall enough to display the schedule comfortably
8. Check the mobile version of your page and adjust the element size if needed
9. Publish your site

The schedule will now display inside your Wix page, allowing customers to browse events and book directly.

Using Wix Velo developer mode (optional)

Some browsers with strict security settings may prevent reservie from storing session data (such as login tokens and cart contents). If your customers experience issues staying logged in or losing their cart, you can enable Wix’s storage mechanism using Velo developer mode.

1. In the Wix Editor, enable Developer Mode (Dev Mode) from the top menu
2. Open the page code for the page containing your HTML element
3. Add the following code, replacing #html1 with the actual ID of your HTML element:

import { session, local } from 'wix-storage';

$w.onReady(function () {
  $w("#html1").onMessage((event) => {
    let receivedData = event.data;

    if (receivedData.type === 'cartUpdate') {
      session.setItem('reservie_cart', JSON.stringify(receivedData.cart));
    }

    if (receivedData.type === 'tokenUpdate') {
      local.setItem('reservie_token', receivedData.token);
    }

    if (receivedData.type === 'init') {
      let cart = session.getItem('reservie_cart');
      let token = local.getItem('reservie_token');
      $w("#html1").postMessage({
        type: 'initResponse',
        cart: cart ? JSON.parse(cart) : null,
        token: token || null
      });
    }
  });
});

4. Verify the HTML element ID — click on the HTML element to see its ID (e.g. #html1, #html2). Make sure the ID in the code matches your element.
5. Publish your site

This code allows the reservie widget to use Wix’s storage to persist cart and login data across page navigation.

Method 2: Linking to the hosted page

If you prefer not to embed the schedule directly, you can link to the hosted page instead.

1. Copy the Hosted Page URL from the Get Code dialog
2. In the Wix Editor, add a button or text link to your page
3. Set the link to the hosted page URL
4. Publish your site

When customers click the link, they will be taken to the schedule on your reservie-hosted page where they can browse and book.

Tips

• Resize for mobile: Wix has separate desktop and mobile layouts. Make sure the HTML element is appropriately sized in both views.
• Test after publishing: Always test the schedule on your live site after publishing to ensure it displays and functions correctly.
• Multiple schedules: You can add multiple schedules to different pages by repeating the process with different schedule embed codes.