Sauna CRM Help

Appearance

Widget reference ​

The widget tags are custom elements registered by the Sauna CRM widget script.

Shared attributes ​

Every widget needs this attribute:

  • brand-id: the brand ID from Website Integration.

The widget loads the public studio name and primary color from the brand ID, and carries the Sauna CRM base URL it should call. Advanced embeds can provide api-url, brand-name, or primary-color as explicit overrides. An api-url keeps its path, so give the base the API is mounted at (https://api.example.com or https://example.com/sauna) and not a path that already includes /api.

Common optional attributes:

  • theme: set to light, dark, or auto. Overrides the widget theme from Settings → Design for this embed only. Use dark to force dark, or auto to follow the host page's color scheme. With neither set, the studio's saved theme applies, falling back to light.
  • frame: set to true to render an outer card frame.

Booking calendar ​

Tag: <sauna-booking-calendar>

Use it for the full booking flow: session search, calendar, checkout, and account access. It opens on the current day and can switch to the whole week.

Optional attributes:

  • default-view: set to daily or weekly. Overrides which span the widget opens on from Settings → Design for this embed only.
  • location-id: restrict listings to one location.
  • account-url: link to the customer account page.
  • contact-url: link to the studio's customer-support or contact page.
  • signup-url: override the signup link shown to logged-out customers.
  • hide-account-menu: set to true when the account widget is embedded separately.

Schedule ​

Tag: <sauna-schedule>

Use it for a schedule of upcoming sessions, with booking and checkout on each session row. It opens on the current day and can switch to the whole week. Unlike the booking calendar, it cannot be pinned to one location with location-id.

Optional attributes:

  • default-view: set to daily or weekly. Overrides which span the widget opens on from Settings → Design for this embed only.
  • account-url: link to the customer account page.
  • contact-url: link to the studio's customer-support or contact page.
  • signup-url: override the signup link shown to logged-out customers.
  • hide-account-menu: set to true when the account widget is embedded separately.

Membership plans ​

Tag: <sauna-membership-plans>

Use it to list active published plans with checkout.

Optional attributes:

  • location-id: assign membership purchases from this embed to one home location. When omitted, customers choose a home location if the brand has multiple active locations.
  • account-url: link existing members to the customer account page.

Gift cards ​

Tag: <sauna-gift-card-purchase>

Use it for the gift card purchase flow with checkout.

Optional attributes:

  • amount-options: comma-separated list of preset amounts, such as 50,100,150,250. Defaults to 50, 100, 150, 250.
  • signup-url: override the signup link shown to logged-out customers.

Gift card amounts are shown and charged in your brand currency. There is no attribute to change it: the embed cannot change what your payment account settles in, so an override would only relabel the amount.

Customer account ​

Tag: <sauna-account>

Use it for self-serve bookings, memberships, and profile access.

Optional attributes:

  • customer-email: pre-fill the signed-in customer's email.
  • booking-url: link back to the public booking page.

Location map ​

Tag: <sauna-location-map>

Use it to show bookable locations and send customers to a booking page.

Optional attributes:

  • booking-url: destination when customers select a marker.

There is no default-view attribute here, because the map itself has no Day/Week switch. The calendar it opens when a customer picks a location follows Schedule opens on from Settings → Design.

Custom events:

The map dispatches two composed, bubbling CustomEvents so the host page can react to customer interaction. Both carry a detail of { locationId, locationName }.

  • sauna-location-select: fired when a customer selects a location.
  • sauna-location-book: fired when a customer starts booking at a location. If booking-url is set, the widget also navigates there with a locationId query parameter.

Because the events cross the widget's shadow DOM, listen on a host element or document:

js
document.addEventListener("sauna-location-book", (event) => {
  const { locationId, locationName } = event.detail;
  console.log("Booking at", locationName, locationId);
});