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 (recommended)

Because Wix loads embedded HTML inside a sandboxed iframe, modern browser privacy features (Safari ITP, Firefox total cookie protection, Brave shields) prevent the widget from using its own storage. Without the snippet below your customers will be signed out and lose their cart on every page navigation. We strongly recommend adding it.

The snippet asks the widget to delegate persistence to Wix’s own storage (wix-storage) via postMessage. Wix’s storage is per-domain and unaffected by the sandbox, so login and cart state survives page navigation.

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. Click on the HTML element to confirm its ID (e.g. #html1, #html2). The snippet below uses #html1 — change it to match your element if different.
4. Add the following code to the page:

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

$w.onReady(function () {
  $w("#html1").onMessage((event) => {
    const data = event.data;
    if (!data) return;

    // 'rvModal' — widget asking us to scroll its container into view
    if (data === 'rvModal') {
      $w("#html1").scrollTo();
      return;
    }

    // 'rvReady' — widget just initialised; send back any stored token + cart
    if (data === 'rvReady') {
      let cart = { card: [], pass: [], free: [], subscription: [] };
      try {
        const stored = session.getItem('rvWixCart');
        if (stored) cart = JSON.parse(stored);
      } catch (e) {
        console.warn('Reservie: corrupted rvWixCart, resetting', e);
        session.removeItem('rvWixCart');
      }

      const tok = session.getItem('rvWixKey') || local.getItem('rvWixKey') || null;

      $w("#html1").postMessage(JSON.stringify({
        message: 'rvExtInitialize',
        data: { token: tok, cart }
      }));
      return;
    }

    // 'rvToken' — widget asking us to persist a JWT
    if (data.message === 'rvToken') {
      const persist = data.persist;
      const alreadyPersistent = local.getItem('rvWixKey') !== null;
      // persist=1 → always local; persist=2 → local only if already persistent;
      // anything else → session
      if (persist === 1 || (persist === 2 && alreadyPersistent)) {
        local.setItem('rvWixKey', data.value);
      } else {
        session.setItem('rvWixKey', data.value);
      }
      return;
    }

    // 'rvCart' — widget asking us to persist cart state
    if (data.message === 'rvCart') {
      session.setItem('rvWixCart', data.value);
      return;
    }
  });
});

5. Publish your site

What this snippet does

If you have an older version of this snippet

Earlier versions of this guide published a snippet that used different message names (cartUpdate, tokenUpdate, init, initResponse) and an older persist-handling block. Those versions never actually persisted anything because they didn’t match the message names the widget sends. Replace any older snippet with the one above — copy the new version over the top.

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.