Embeds and memberships
Display current memberships, list available plans, and embed membership signup.
Embeds and memberships
Display current memberships, list available plans, and embed membership signup. First, complete the installation.
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>Current memberships
Inspect collection filters, the repeatable template, every membership field, style data attribute, and empty state.
Membership
Your current plan
Membership name
Atlas Plus
Membership icon
A
Status label
Active
Membership summary
Active since Jun 2025 · Renews Jul 2026
Price label
£25/month
Current membership
Current
Every other membership field
8 fieldsPlan description
Priority access and member pricing.
Raw status
active
Payment status
Paid
Active since
Active since Jun 2025
Renewal label
Renews Jul 2026
End label
Ends 31 Jul 2026
Billing period
month
Membership features
Priority booking, Guest passes
No active membership
Available plans can be shown below this state.
Use status all to include inactive, expired, cancelled, and suspended memberships.
Useful membership fields:
| Field | Description |
|---|---|
name | Membership plan name |
description | Plan description |
icon | Configured icon, or the first letter of the plan name |
status | Raw status, such as active |
statusLabel | Display status, such as Active |
paymentStatusLabel | Display payment status |
summary | For example, Active since Jun 2025 · Renews Jul 2026 |
activeSinceLabel | For example, Active since Jun 2025 |
renewalLabel | For example, Renews Jul 2026 |
endLabel | Membership end label, when present |
priceLabel | For example, £25/month or Free |
billingPeriodLabel | For example, month or year |
features | Comma-separated plan features |
color | Configured membership color |
currentLabel | Current for the active membership |
Use data-tiquo-status="all" to include inactive, expired, cancelled, and suspended memberships.
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>Available membership plans
Inspect current-plan filtering, the repeatable template, every plan field, signup link, badges, and empty state.
Memberships
Choose your plan
Plan name
Atlas Plus
Plan description
Priority access and member pricing.
Price label
£25/month
Plan features
Priority booking, Guest passes
Every other membership-plan field
6 fieldsPlan ID
plan_atlas_plus
Plan slug
atlas-plus
Plan type
recurring
Billing period
month
Plan colour
#7157ff
Plan icon
A
No other plans available
The current-plan filter controls which plans are listed.
Current-plan filtering accepts include, exclude, or only. Signup URLs are assigned safely to links.
data-tiquo-current accepts:
| Value | Behaviour |
|---|---|
include | Include all public plans and mark the current plan |
exclude | Omit the customer's current plan |
only | Show only the current plan |
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>Authenticated membership embed
Inspect the mount element, embed call, generated iframe, and minimum-height option.
Secure embed mount
Atlas Plus signup
Join Atlas Plus
Secure, automatically resizing membership flow
The iframe receives a short-lived one-time handoff token; raw customer access tokens are never appended to its URL.
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.