Ambassador page

Every ticket buyer can be an Ambassador: they share their link, and when their mates buy through it they earn the rewards the organiser set. If your site has a page selling that programme, let Grofomo fill in the parts that change, so the page never promises a reward the organiser has since edited.

ambassadors.js does it with one script tag. The page keeps its own design: mark where each part goes and the script fills the element in. Whatever you put inside an element stays there until live data arrives, so your own copy is the fallback if the programme is unpublished or the API cannot be reached.

The drop-in

<script src="https://developers.grofomo.com/ambassadors.js" defer></script>

<p>Bring <span data-grofomo-ambassadors="thresholds" data-event="summer-fest">2, 5 or 10</span> mates.</p>

<div data-grofomo-ambassadors="tiers" data-event="summer-fest"
     data-threshold-label="Bring {n} mates" data-threshold-label-one="Bring 1 mate">
  <!-- your static tiers, shown until the live ones load -->
</div>

<div data-grofomo-ambassadors="rules" data-event="summer-fest"></div>

<div data-grofomo-ambassadors="apply" data-event="summer-fest"
     data-label-estimated-tickets="How many tickets could your crew bring?"
     data-label-note="By sending this you agree to the rules above. 18+ only."></div>

All the parts on a page share one request.

Part	What it renders
tiers	The reward ladder, lowest first: tier name, threshold, and each reward with its detail and how it is collected.
rules	The organiser's rules as a list.
apply	The partner application form, or a one-line "not taking applications" when the organiser has closed it.
thresholds	Plain text for a sentence: "2, 5 or 10".
description	The organiser's short pitch for the programme, as plain text.

Options

Attribute
data-event	The event's slug. Required.
data-key	Your publishable key (pk_live_...), when the organiser requires one.
data-threshold-label, data-threshold-label-one	How a threshold reads, with {n} for the number. Default "Sell {n} tickets".
data-label-*	Any of the form's wording: name, email, phone, instagram, estimated-tickets, audience-reach, choose, submit, sending, success, closed, note.
data-unstyled	Leave the markup unstyled for your own CSS.

Styling

The default styles only lay things out; the markup inherits your font and colours. Every element has a stable class to target: .gfm-amb-tiers, .gfm-amb-tier, .gfm-amb-tier-name, .gfm-amb-tier-threshold, .gfm-amb-reward (with data-reward-type), .gfm-amb-reward-title, .gfm-amb-reward-description, .gfm-amb-reward-how, .gfm-amb-rules, .gfm-amb-form, .gfm-amb-field, .gfm-amb-submit, .gfm-amb-note. Each tier also carries data-threshold, and a filled element gets data-gfm-loaded.

From script

GrofomoAmbassadors.mount('#rewards', {
  event: 'summer-fest',
  part: 'tiers',
  thresholdLabel: 'Bring {n} mates',
  onLoad: (page) => console.log(page.programme),
});

// Or render it all yourself:
const api = GrofomoAmbassadors.client({ event: 'summer-fest' });
const page = await api.programme();
await api.apply({ name, email, estimatedTickets: '25_50', website: honeypotValue });

Building your own

The drop-in is a thin layer over two endpoints:

• Ambassador programme: the tiers, rules, and whether the form is open.
• Apply to be a partner: sends the form.

Two things to get right on your own form: hide it when partnerApplications.open is false, and include the hidden website field (see the reference).

What happens next

• Ticket buyers are enrolled when they buy, when the organiser has automatic enrolment on (automaticEnrolment). Their link and running total are in the Grofomo app and in their emails, so point people there rather than to a sign-up form.
• Partner applications go to the organiser's queue in Grofomo. Nothing is sent to the applicant until the organiser approves or declines. An approved partner is emailed their own link and a way to get paid.

Before it works on your domain

Your site's domain must be on the organiser's allowed domains in Grofomo (Settings, Developers), or the browser will refuse the requests. The organiser also switches the partner form on for the event, on the event's Affiliates page.