Widget catalog · family

The guest rewards widget

The operator-side widget: it joins guests to this property’s rewards programme and shows the reward wherever money shows. Merchant organizations only — an operator with a programme to join. Everything below is live; it runs the exact components and state as The Wayfarer demo.

Every page

Theme and variants

One theme pick re-colours the whole family — the corner chip, the mini wallet, the banner, and the reward tags. These are the same controls as the demo site’s developer view, and your choice here is applied live on The Wayfarer too.

Layer 1

The wallet chip and mini wallet

The one permanent element: it rides the corner of every page — including this one, bottom right, live. Tap it to open the mini wallet; joining there is real against the sandbox.

On load: the offer for this page (percent, currency, where it is spendable).
On join: create the guest and their Kicbak account; the verification email goes out.
On resend: the verification email again, rate-limited.

Embed code

tsx

import { KicbakRewards } from "@kicbak/rewards-react";

export default function Layout({ children }) {
  return (
    <KicbakRewards
      operator="wayfarer-demo"
      property="The Wayfarer"
      percent={5}
      apiKey="YOUR_API_KEY"
      variants={{ theme: "slate", chipShape: "pill", tagStyle: "card" }}
    >
      {children}
    </KicbakRewards>
  );
}

Replace YOUR_API_KEY with the operator's publishable widget key. The npm package name is provisional.

Layer 1

The join banner

The programme offer on the homepage and rates page. It renders here in whatever state the demo is in — join through it and it becomes the confirmation; as a member it stands down entirely.

On join: create the guest and their Kicbak account; the verification email goes out.

Embed code

tsx

import { RewardsBanner } from "@kicbak/rewards-react";

// Directly under the hero, and again on the rates page.
<RewardsBanner className="mt-6" />

Layer 2

The reward on a rate

Hand it a stay total and it shows the exact amount back — anonymous offers carry the unlock button, a member sees the amount as theirs. Two styles; the picker above switches them.

Members get · Up to 5%up to $26 back

Members get · Up to 5%up to $14 back

No call of its own: the amount is worked out locally from the offer the widget already has.

Embed code

tsx

import { RateTag } from "@kicbak/rewards-react";

// Per room, beside the price. The total is nightly × nights for the chosen dates.
<RateTag total={stayTotal} />

Layer 2

The checkout offer

Sits above the confirm button, prefilled from the booking form's own email field so opting in is one tap. For a member it renders the reward as a locked line item on this booking.

Add your email to get up to $26 back on this stay

This never blocks your booking. Join free and the cashback applies to this stay — it creates your Kicbak account too.

On activate: create the guest and their Kicbak account with the booking email.

Embed code

tsx

import { CheckoutRewards } from "@kicbak/rewards-react";

// Tag the booking form's email field so the offer follows it:
<input type="email" data-kicbak-booking-email {...register("email")} />

// Then, above the confirm button:
<CheckoutRewards total={total} prefill={email} />

Layer 2

The confirmation

The conversion event and the last offer in the funnel: the reward pending the stay, or a claim for a guest who booked without joining. It announces the booking to Kicbak when it mounts, so the catalog documents it rather than firing it — see it live by booking on the demo checkout.

On the page: the booking event — reference, total, room.
Server-side, by the operator's rule: the reward is created against the booking (5% of the stay, locked until the guest stays).
On claim: create the guest and their Kicbak account with the booking email.

Embed code

tsx

import { ConfirmationRewards } from "@kicbak/rewards-react";

<ConfirmationRewards
  booking={{ reference, total, room: room.name }}
  bookingEmail={email}
/>