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

From version 1.14.0, getMemberships() returns the signed-in customer's memberships and the organization's active public plans, from GET /memberships:

const { memberships, availablePlans } = await tiquo.getMemberships();

const current = memberships.filter((membership) => membership.isCurrent);

// Memberships held in a connected system such as HubSpot are read-only, so only
// offer payment, billing and cancellation actions on Tiquo memberships.
const manageable = current.filter((membership) => !membership.isExternal);

memberships is typed as TiquoMembership: a Tiquo membership (source: "tiquo") always has planId, price, currency, billingPeriod and paymentStatus. A connected-system membership (isExternal: true) has no planId, and the other fields appear only when that system provides them.

Other patterns:

• If the site already knows which public plans to promote, render its own plan content and call embedMembership(planId, ...) for the selected plan.
• 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 permissions

From version 1.18.0, getPermissions() returns the membership permissions the signed-in customer holds now, and hasPermission(name) checks for one. These are the permissions ticked in the Permissions section of a membership plan. See Membership permissions.

if (await tiquo.hasPermission('VIP Lounge')) {
  document.querySelector('#vip-lounge').hidden = false;
}

const permissions = await tiquo.getPermissions();
// ["Priority booking", "VIP Lounge"]

• A customer holds a plan's permissions while the membership is in force: their own membership, or one held by a company they belong to. A membership that has ended, has not started yet, or is unpaid past its grace period grants none. Tiquo applies the same rule to membership-gated services and prices.
• Names come back as written in Tiquo, sorted by name, each once. hasPermission() ignores case and surrounding spaces, and resolves false when no customer is signed in. getPermissions() requires a signed-in customer.
• Both methods read permissions from getMemberships(), so each call requests GET /memberships. useTiquo and useTiquoAuth expose both.
• Each membership's and plan's features list the permission names on that plan. Memberships held in a connected system such as HubSpot grant no Tiquo permissions.

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

Pass date, startTime, partySize, lengthMinutes or lengthOptionId in the options to carry choices the customer already made on your page into the booking. See Carry the customer's choices into the booking.

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

Locked category booking

For a card representing a category with several booking types, use embedCustomerFlow() with ?categoryId=CATEGORY_ID&lockCategory=true on the flow's /embed/CUSTOMER_FLOW_ID URL. The category stays fixed while the customer chooses an eligible service within it, such as Member or Guest.

Use the category ID from getFlowServices().categories, omit serviceId and lockService, and keep the customer signed in through the DOM Package for membership access. The additional flowId query parameter is not required for a correctly configured public embed.

See Embed booking for a selected category for the complete example and the difference between booking configuration, flow, category, and service IDs.

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.