Triba — home
Learn
Documentation
The form bundle (booking-form.js in production) mounts <triba-booking-form>: the full booking flow inline, with no “Book now” launcher. Typography uses the same --triba-* tokens as the portal; see docs/PORTAL-FONTS.md for the full token model.
triba-key query param, or set data-api-key on the element.<triba-booking-form></triba-booking-form> where the form should appear, with data-experience-id set.<script
type="module"
src="https://cdn.triba.tech/latest/booking-form.js?triba-key=YOUR_TRIBA_KEY"
></script>
<triba-booking-form
data-experience-id="YOUR_EXPERIENCE_ID"
></triba-booking-form>Set custom properties on triba-booking-form (or on :root for a shared baseline). The panel and fields inherit --triba-bg, --triba-fg, --triba-muted, --triba-border, and --triba-radius from the shared Triba theme system.
:root vs triba-booking-formUse :root when every Triba widget on the page should share the same --triba-* values. Use triba-booking-form { … } to theme only this instance.
| Variable | Purpose |
|---|---|
--triba-bg | Panel surface and primary button background (via shared button styles). Maps to the form card fill. |
--triba-fg | Default text and icon colour on that surface. |
--triba-muted | Secondary text: helper copy, muted status lines, payment placeholders, and add-on intro/eyebrow labels. If unset, the form uses color-mix: 60% --triba-fg with 40% of the surface (--triba-panel-bg then --triba-bg), so muted copy tracks light and dark themes automatically. |
--triba-border | Panel outline, dividers, and input borders. |
--triba-radius | Corner radius for the panel and controls. |
--triba-input-bg | Optional input field background (defaults to a light fill). |
The experience name renders as an <h3>. Set --triba-h3-font-* or use the same body and heading patterns as in docs/PORTAL-FONTS.md.
| Attribute | Purpose |
|---|---|
data-experience-id | Required. Which experience to book. |
data-api-key | Concord API key. Omit if the script URL includes triba-key. |
data-on-success / data-on-error | Names of functions on window for booking lifecycle callbacks. |
data-publishable-key | Override the Stripe publishable key. A pk_test_… key selects test mode for PaymentIntents; pk_live_… uses live mode. |
Stripe PaymentElement mounts in the light DOM inside <triba-booking-form>(not Shadow DOM), so payment fields behave like normal inputs on your page.
Tweaks apply as inline CSS on <triba-booking-form> — same tokens as in the docs (page background uses the stage wrapper).