Embeds and memberships

Embed category booking flows and membership signup, display current memberships, and list available plans. First, complete the installation.

Embed a category booking flow

Use Tiquo.embedCustomerFlow() inside window.Tiquo.ready() to open a category-locked booking URL: https://book.tiquo.app/embed/CUSTOMER_FLOW_ID?categoryId=CATEGORY_ID&lockCategory=true.

The category stays fixed while the customer chooses an eligible booking type, such as Member or Guest, in the flow. Use the category ID returned by getFlowServices(), and omit serviceId and lockService. A correctly configured public embed does not need the additional flowId query parameter. The Hosted Package hands its authenticated customer session into the iframe so the normal membership and service-access rules apply.

See Embed booking for a selected category for a complete example, category-card guidance, and the meaning of each ID.

Render the current membership

Use data-tiquo-memberships for the collection wrapper. The first data-tiquo-membership-item child is the Webflow template that Tiquo clones for each matching membership.

<div
  data-tiquo-memberships
  data-tiquo-status="active"
  data-tiquo-limit="1"
>
  <article data-tiquo-membership-item>
    <span data-tiquo-membership="icon"></span>
    <h2 data-tiquo-membership="name"></h2>
    <p data-tiquo-membership="summary"></p>
    <span data-tiquo-membership="statusLabel"></span>
    <span data-tiquo-membership="priceLabel"></span>
    <span
      data-tiquo-membership="color"
      data-tiquo-style="background-color"
    ></span>
  </article>

  <div data-tiquo-empty>
    You do not have an active membership yet.
  </div>
</div>

Useful membership fields:

Use data-tiquo-status="all" to include inactive, expired, cancelled, and suspended memberships.

Memberships from HubSpot

When the organization has HubSpot connected, the collection also lists the customer's HubSpot subscriptions. They are read-only: their payments, cards and cancellation are managed in HubSpot, and their price fields are empty when HubSpot does not provide them.

Each rendered item carries data-tiquo-membership-source (tiquo or hubspot) and data-tiquo-membership-external (true or false), so CSS alone can hide Tiquo-only actions on them:

[data-tiquo-membership-external="true"] .manage-membership {
  display: none;
}

Add data-tiquo-source to the collection wrapper to filter by source: all (default), tiquo, external (any connected system) or hubspot.

Render available membership plans

Use a separate collection for active public customer plans:

<div data-tiquo-membership-plans data-tiquo-current="include">
  <article data-tiquo-membership-plan-item>
    <span data-tiquo-membership-plan="icon"></span>
    <h3 data-tiquo-membership-plan="name"></h3>
    <strong data-tiquo-membership-plan="priceLabel"></strong>
    <p data-tiquo-membership-plan="description"></p>
    <p data-tiquo-membership-plan="features"></p>
    <span
      data-tiquo-membership-plan="currentLabel"
      data-tiquo-hide-empty
    ></span>
    <a
      data-tiquo-membership-plan="signupUrl"
      data-tiquo-preserve-text
    >Choose membership</a>
  </article>

  <div data-tiquo-empty>
    There are no other memberships available.
  </div>
</div>

data-tiquo-current accepts:

Plan fields include id, name, description, slug, type, priceLabel, billingPeriodLabel, features, color, icon, popularLabel, currentLabel, and signupUrl.

data-tiquo-preserve-text keeps the Webflow link label while Tiquo assigns signupUrl to href. data-tiquo-hide-empty hides elements such as Current and Popular badges when their value is empty.

Authenticated membership embeds

embedMembership creates an automatically resizing membership iframe:

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

<script>
  window.Tiquo.ready(function (tiquo) {
    tiquo.embedMembership(
      "membership_plan_id",
      "#membership-signup",
      { minHeight: "240px" }
    );
  });
</script>

You can also add a Tiquo /embed/ iframe directly. The package discovers existing and dynamically added Tiquo iframes.

When the website has an authenticated session, Tiquo requests a short-lived, one-time iframe token and sends it only to the matching Tiquo origin with postMessage. The access token is never appended to the iframe URL. If the visitor is not authenticated, the embedded flow displays its normal sign-in interface.

See Rendering and empty states for shared collection behaviour.