Embeds and Memberships

The DOM Package can create hosted Tiquo iframes while your application controls where they appear. When the parent page has an authenticated customer session, the SDK hands that session into a compatible iframe without adding bearer tokens to the iframe URL.

Embed a Customer Flow

<div id="customer-flow"></div>

const iframe = await tiquo.embedCustomerFlow(
  'https://book.tiquo.app/embed/CUSTOMER_FLOW_ID',
  '#customer-flow',
  {
    width: '100%',
    minHeight: '240px',
    autoResize: true,
    onLoad: () => console.log('Customer flow loaded'),
    onError: (error) => console.error(error),
  }
);

The container can be a CSS selector or an HTMLElement. The method clears that container, appends the iframe, and returns its HTMLIFrameElement.

Embed Options

embedCustomerFlow(), embedServiceBooking(), and embedMembership() accept the same options:

Set autoResize: false and provide height when the application needs a fixed-height frame.

Embed Membership Signup

Use a public membership plan ID to open that plan's signup journey:

<div id="membership-signup"></div>

await tiquo.embedMembership(
  'MEMBERSHIP_PLAN_ID',
  '#membership-signup',
  {
    width: '100%',
    minHeight: '240px',
  }
);

The method builds https://book.tiquo.app/embed/membership/MEMBERSHIP_PLAN_ID. The plan must be active and public. An authenticated customer continues into the hosted flow with their session; an anonymous visitor follows the flow's normal sign-in or signup journey.

Listing Memberships and Plans

The npm DOM Package does not currently expose a typed getMemberships() convenience method. This is an API-surface distinction, not a rule that every plan must remain unlisted.

Choose one of these patterns:

• If the site already knows which public plans to promote, render its own plan content and call embedMembership(planId, ...) for the selected plan.
• For an authenticated customer portal that needs current memberships and available active public plans, call GET /memberships with getAccessToken().
• In Webflow or another site builder, use the Hosted Package membership collections.

The Customer API returns the signed-in customer's membership records and active public customer plans. It does not publish private or company-only plans as a general public catalog.

Membership Access and Service Price

Membership eligibility controls whether a customer is allowed to see or book a gated service. It does not by itself determine the service price.

A free or paid membership can grant access to a paid service. The service becomes free only when a discount, store credit, included-credit rule, or another configured pricing rule reduces its effective price to zero.

Locked Service Booking

Use embedServiceBooking() when your application has already selected a service and should skip the hosted catalog:

await tiquo.embedServiceBooking(
  'CUSTOMER_FLOW_ID',
  'SERVICE_ID',
  '#service-booking'
);

See Service Catalogs and Locked Booking for the complete catalog-to-detail-page pattern.

Authentication and Security

Embed helpers use an origin-bound postMessage exchange and a short-lived iframe token. Access and refresh tokens are not placed in the iframe URL. The SDK also recognizes compatible Tiquo iframes already on the page or added later and can register the same authentication bridge for them.

For normal embeds, prefer the high-level methods on this page. getIframeToken(customerFlowId?) is available for an advanced manual integration, but the caller is then responsible for the handoff protocol and origin checks.

An iframe created by these methods is a hosted Tiquo flow; it does not mean the website is using the Hosted Package. The Hosted Package is the separate script and data-tiquo-* API for sites that do not install the npm SDK.