Configuring Your Website Widget

The website widget is an on-page touchpoint designed to drive loyalty registrations, capture subscriber data, and generate extra revenue directly from your website. This lesson covers how to build your widget from scratch, arrange functional content blocks, customize the client-facing access pages, and style the end-to-end experience to sit natively on your site.

Key Takeaways

• Arranging the Widget Layout: You can build your widget by dragging and dropping functional elements into your preferred sequence. The core blocks include:

  • Loyalty & Rewards: This core block is active by default and displays your first few available loyalty perks. Customers can click "See all rewards" (or your own custom text) to view the full list.

  • Announcement Block: A flexible, highly customizable space where you can add an image, write custom copy, and direct web traffic to an external URL (such as a company academy or sale page) via a call-to-action button.

  • Contact Form: Adds a direct communication portal where guests can type in their email, a subject line, and a message. Submissions are automatically routed to a designated backend support email address of your choice.

  • Gift Cards: Allows visitors to buy digital gift cards for themselves or others. Note: Dragging this block in requires an active payment processor configuration (like Stripe or Mollie) within your global settings.

  • Referrals & Subscriptions: The referral block manages your invite mechanics, allowing you to customize the subject line, text, and graphics of the email sent to the referred friend. The subscription block provides a clean field for users to explicitly opt into your marketing list. Note: Functional/operational email list types cannot be removed since they are required for transaction processing.

• Managing Client Access Pages: Just like the Contacts Portal, the widget contains secondary pages managed via the left-hand navigation:

  • Request a Code Page: The secure gateway for existing loyalty members to input their email and request a single-use login code. You can adjust or toggle your brand logo visibility here if it appears cut off in the small frame.

  • Registration Page: The signup form for new guests. While you can toggle this page off to restrict entries, leaving it turned on is highly recommended to maximize new program registrations.

• Positioning and Launch Settings: Under the styling menu, you can input a welcoming headline, a subheader, and a localized "pop-up message" that peaks out directly from the minimized floating launcher button. You can anchor the widget to the bottom-left or bottom-right of your website, establish custom horizontal/vertical border offsets, and decide whether the panel loads open or closed by default.

• Branded Interface Design: Finalize the widget’s appearance by selecting an off-white background or another palette from your brand kit, applying your custom typography (like Geist Black), and picking a launcher icon. You can choose between system icons (like a star, heart, or gift box) or upload a custom brand mark.

Dashboard Checklist

1. Navigate to Apps > Widget and click to add a new widget from scratch.

2. From the Overview page, drag and drop elements (Announcements, Contact Forms, Gift Cards, Referrals, or Subscriptions) into your ideal on-screen order.

3. Click directly onto any placeholder text fields inside the live preview wireframe to instantly update labels, button text, and destination URLs.

4. Head to the Request a code and Register tabs on the left menu to customize your logo assets and access rules.

5. Open the Styling menu to draft your launcher pop-up message, designate screen alignment offsets, select your brand colors, and pick your custom typography.

6. Choose a standard system launcher shape or upload your own custom icon, then hit Save changes to publish the widget live on your site.