Booking: Attributes Reference

Attributes Reference

The booking application accepts the following attributes. All attributes are available in both formats:

• Modal implementation: Use with data- prefix (e.g., data-system)
• Embedded implementation: Use without prefix (e.g., system)

system (Required)

This identifies your organization in the Caspeco system.

Format: String (e.g., “se__testbb”)

Where to find it: In the Booking backoffice under Administration > Booking Administration or https://rms.caspeco.se/booking/administration/bookingAdministration

unit (Required)

Identifies the specific establishment or restaurant unit.

Format: String (e.g., “13”)

Where to find it: In the Booking backoffice under Administration > Units

lang (Optional)

Sets the language for the booking interface.

Default: “sv-SE” (Swedish)

Supported values:

• “en-GB”: English
• “sv-SE”: Swedish
• “nb-NO”: Norwegian
• “da-DK”: Danish
• “fi-FI”: Finnish
• “es-ES”: Spanish
• “fr-FR”: French
• “fr-BE”: French (Belgium)
• “nl-NL”: Dutch
• “nl-BE”: Dutch (Belgium)
• “de-DE”: German
• “de-BE”: German (Belgium)
• “et-EE”: Estonian
• “lt-LT”: Lithuanian
• “lv-LV”: Latvian

section-ids (Optional)

Limits available sections for booking to specific section IDs.

Format: Comma-separated string of section IDs (e.g., “123,456”)

Example: section-ids="42,43" or data-section-ids="42,43"

tag (Optional)

Filters available web rules by tag.

Format: String (e.g., “lunch”)

Example: tag="lunch" or data-tag="lunch"

activity-booking (Optional)

Activates the activity booking flow instead of regular table booking.

Modal: needs the value spelled out — data-activity-booking="true"

Embedded: the attribute on its own is enough — activity-booking

position (Optional, modal only)

Docks the modal to a corner of the page instead of centring it, so it sits alongside your content rather than covering it.

Default: “center”

Supported values:

• “center”: full page overlay with a dimmed background
• “bottom-right”: panel in the bottom right corner, no dimming
• “bottom-left”: panel in the bottom left corner, no dimming

Corner positions apply from 769px wide and up. On narrower screens the modal opens full screen whatever you set here, since a corner panel isn’t usable at phone widths.

In a corner position your page stays scrollable and clickable behind the panel, and clicking outside it won’t close it — use the close button in the panel, or window.caspecoBooking.closeModal().

Example: data-position="bottom-right"

This has no effect on the embedded <Caspeco-Booking> element, which is placed by your own page layout.

Examples

Modal with all attributes

<button
    class="caspeco-booking-widget"
    data-system="se__testbb"
    data-unit="13"
    data-lang="en-GB"
    data-section-ids="42,43"
    data-tag="dinner"
    data-activity-booking="true"
    data-position="bottom-right"
>
    Book Activity
</button>