Loyalty on your website

Website, booking engines, one sign-in

How a hotel group puts its loyalty club on its own website and in its booking engines, so a guest joins or signs in once and is recognised everywhere they go next.

The three pieces

The website popup

Join and sign in to the club without leaving the hotel’s website. One line of code; the hotel sets it up in GuestMaker.

Booking engine sign-in

The booking engine recognises the member, to show member rates and fill in their details.

One shared sign-in

A guest who signs in once is signed in for 30 days, on the member portal and in every booking engine of the group.

What the guest experiences

With all three pieces in place, this is the whole journey.

1
On the hotel’s website, the guest clicks “Join the club” or “Sign in”. The popup opens over the page.
2
Joining, and signing in with an emailed link, finish inside the popup. Signing in with a password takes the whole page to the guest’s member portal: that one page change is what signs them in.
3
The guest goes on to book. The booking engine sends them to the GuestMaker sign-in, they are already signed in, so they come straight back without seeing a form, recognised.
4
When the guest logs out, from the portal or from a booking engine, they are signed out everywhere.

Who does what

Piece	Hotel team (in GuestMaker)	Website or engine developer
Website popup	Lists the websites allowed to show it, in Loyalty → Program → Website popup.	Adds one line of code and points the buttons at it.
Booking engine sign-in	Asks GuestMaker for the engine’s credentials.	Connects the engine with one of the two sign-in guides.
Shared sign-in	Nothing.	Nothing. It works on its own once the pieces above are in place.

Paste this line once in the head of every page, or add it in Google Tag Manager as a Custom HTML tag on all pages. Replace the program name with the hotel group’s, shown in Loyalty → Program → Website popup.

<script src="https://www.guestmaker.ai/sdk/loyalty-popup.js" data-program="your-program" async></script>

Then open it from any button

Do this	Good for
`href="#gm-enroll"` or `href="#gm-login"`	Any site builder: set the button’s link and nothing else.
`data-gm-loyalty="enroll"` or `"login"`	Any element, when you control the HTML.
Existing links to the club’s pages	Nothing to change: they open the popup instead of leaving the site.
`?gm-loyalty=enroll` on any page	Emails, adverts and QR codes that should land with the popup open.
`GuestMakerLoyaltyPopup.open("login")`	Your own JavaScript.

Good to know

The popup shows the club’s real join and sign-in pages, with the design, languages and rules set in GuestMaker. It follows the page’s language unless you set data-lang.
It only opens on the websites the hotel listed. Anywhere else the guest gets a “Continue” button to the full page, never a dead button.
A site with a strict Content-Security-Policy must allow https://www.guestmaker.ai in script-src, frame-src and connect-src.
If members use the portal on the hotel’s own address, add data-portal-host="rewards.hotel.com" so links to it open the popup too.

Events for your analytics

Each step fires a gm-loyalty:<event> event on the window and, if Google Tag Manager is on the page, a gm_loyalty_<event> entry in its data layer. The events say what happened, never who the guest is.

window.addEventListener("gm-loyalty:enrolled", (e) => {
  // e.detail → { program: "your-program", view: "enroll" }
});

// open · ready · enrolled · link-sent · signed-in · close · error

2. Connect the booking engines

Each booking engine sends the guest to the GuestMaker sign-in and gets them back recognised. There are two ways to connect one; both share the same sign-in.

OIDC quickstart

For an engine with one fixed callback URL, or one that already supports an OpenID Connect sign-in.

Club externo

For an engine whose page carries the guest’s search (dates, hotel, occupancy) and must come back to exactly that page.

3. The shared sign-in

Signing in anywhere (the popup, the member portal or a booking engine) signs the guest in with GuestMaker for 30 days, for that hotel group only. Every booking engine then gets the guest back without a form. Each engine can also:

Need	How
Check quietly whether the guest is signed in, without showing anything	`prompt=none`
Always show the form (another person, a shared computer)	`prompt=login`
Log the guest out everywhere	The logout in each guide

Showing “Hello, Maria” on the website

The popup never tells the website who signed in. To greet the member or show member prices on the website itself, the website’s server connects exactly like a booking engine: it gets its own credentials and uses the Club externo sign-in with prompt=none. A signed-in guest comes back recognised; anyone else comes back with ?hlError=login_required and sees the normal page.

Club externo: keeping the guest signed in

Know before you start

A password sign-in in the popup leaves the website. Browsers do not let a page inside a popup frame keep a sign-in, so the guest is taken to their member portal to finish. Joining and emailed-link sign-in stay in the popup.
The shared sign-in lives on the GuestMaker address. If the hotel serves its member portal on its own address (such as rewards.hotel.com), a sign-in there is not seen by the booking engines, which always sign in through GuestMaker: the guest will be asked to sign in once more when they book.
One hotel group per sign-in. A guest of another group’s club signs in again.