Elara Help

Appearance

Widget reference ​

The widget tags are custom elements registered by the Elara widget script.

Shared attributes ​

Every widget needs this attribute:

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

Supported production embeds use the managed script from Settings > Website Integration. The widget loads the Elara API connection, public studio name, and primary color from its brand-id. Set widget appearance under Settings > Design.

Self-hosted production bundles are not supported. The api-url, brand-name, and primary-color attributes are developer-only overrides for local repository work, not production customization options. Production snippets should not include them.

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 false to drop the outer card frame, for host pages that draw their own. Widgets render the frame by default.

Boolean attributes are enabled when present without a value, for example <sauna-schedule hide-account-menu>. To disable one explicitly, use false, off, no, or 0 (case-insensitive, with surrounding spaces ignored). Removing an attribute restores the widget's default for that option.

Schedule ​

Tag: <sauna-schedule>

Use it for session browsing, booking, checkout, and account access. It opens on the current day and can switch to the whole week.

The booking filter controls follow the preset, visibility, and order saved under Settings → Design. With no saved filter configuration, the Universal preset keeps the existing Session type, Session, Instructor, Location, and Sort order. Filter configuration is intentionally not an embed attribute: studios choose from the supported controls while Elara owns their layout and behavior.

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.
  • 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: include this attribute, or set it to true, when the account widget is embedded separately.

Hiding Location or another control does not remove matching sessions. A valid locationId query parameter from the location map preselects a location and remains clearable, including when its control is hidden. An explicit location-id pins the embed to that location and takes precedence over the query parameter.

The studio's mobile app opens this page for sessions it cannot book itself, adding saunaBrandId, saunaScheduleId and saunaDate query parameters that identify the chosen session. A schedule for that brand reloads the session and opens its booking details, then removes those three parameters from the address. When several schedules for the brand share the page, the first one in page order that covers the session's location handles the link; a schedule pinned with location-id covers only that location. The link never overrides a checkout the schedule is resuming or a choice the customer has already made on it. If the session is no longer offered, the schedule says so and the customer can choose another.

The schedule provides inline account access, so customers can review their account and return to session browsing without leaving your page. The standalone <sauna-account> widget remains available for dedicated account pages.

Membership plans ​

Tag: <sauna-membership-plans>

Use it to list active published plans with checkout.

Credit packs show their price per credit. When at least two packs in one currency can be compared, the cheapest per credit is marked Lowest price per credit. Studios can turn that marker off under Settings → Design.

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.

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 page hosting <sauna-schedule>.

Location map ​

Tag: <sauna-location-map>

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

Optional attributes:

  • booking-url: page hosting <sauna-schedule>, used when customers choose Book at a location.

With booking-url, the map adds a locationId query parameter to the destination. Without it, the map opens an embedded schedule pinned to the chosen location, with a back action to return to the map. There is no default-view attribute on the map itself. Its embedded schedule follows Schedule opens on and booking filters from Settings → Design, and keeps the map's frame setting.

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);
});