End User Display
The Gamopanda End User Display can be embedded on any website — Shopify, custom storefronts, marketing pages, or web apps — using a single script tag and a small initialization snippet. It renders a launcher button and a slide-up panel that shows the logged-in customer's streak and challenge progress, milestones, and rewards.
Shopify integration
For Shopify stores, the Gamopanda app provides a native Storefront Script theme block that handles the initialization and customer authentication automatically — no manual coding required. See the Shopify Integration page for setup instructions.
How it works
- Add a single
<script>tag to your page to load the End User Display. - Pass your account, template, theme, and floating widget IDs in an initialize call.
- It renders a launcher button styled to your configuration. Clicking it opens a panel showing the user's streak and challenge progress, milestones, and rewards.
- For logged-in users, pass their
accessTokento show personalised progress. For guests, omit it — it shows public programme content only.
Quick start
Add the following to your page's <head> or just before </body>:
Code
Initialization parameters
Pass these fields in the initialize payload:
| Parameter | Type | Required | Description |
|---|---|---|---|
accountId | string | ✅ | Your Gamopanda account ID. Found in your dashboard settings. |
templateId | string | ✅ | ID of the Template that controls widget copy and localisation. |
themeId | string | ✅ | ID of the Theme that controls widget colours and typography. |
floatingWidgetId | string | ✅ | ID of the Floating Widget that controls the launcher button style and position. |
accessToken | string | ❌ | A signed JWT for the logged-in end user. Required to show personalised progress. Omit for guest/logged-out users. See Generating an Access Token. |
languageCode | string | ❌ | ISO 639-1 language code (e.g. en, es, ar). Defaults to en. Passed to the widget iframe for localisation. |
Logged-in users
When a customer is authenticated, your backend generates a signed JWT access token and passes it to the frontend. See Generating an Access Token for how to create the token.
Once you have the token, pass it in the initialize call:
Code
The widget uses the accessToken automatically once it has loaded. Your code only needs to provide it in the initialize payload.
Guest users
Omit accessToken entirely. The widget renders in guest mode — programme information is visible but personal progress is not shown until the user logs in.
Code
Related resources
| Resource | Description |
|---|---|
| Floating Widget | Configure the launcher button style, position, and label |
| Template | Widget copy and localisation |
| Theme | Widget colours and typography |
| Generating an Access Token | How to sign and issue end user access tokens |
| Member | Upsert end users and retrieve their externalId |
| Shopify Integration | Native Shopify theme block — no code required |