Configuring Your Contacts Portal

The Contacts Portal is a personalized environment where your customers can view their loyalty status, track balances, buy gift cards, and refer friends. This lesson covers how to configure the content layout, design pages to match your exact brand style, and link your backend settings to create a high-converting revenue channel.

Key Takeaways

• Structuring the Access Flow: Under the portal setup, you can customize the entry pages for your customers:

  • Login Page: Toggle your logo on or off, choose its size, and add a background cover image.

  • Login Code Page: Personalize the text instructions users see when they receive their secure email verification codes.

  • Sign-Up Page: You can keep registration active or hide it completely. To ensure the lowest possible signup friction, you can remove unnecessary data fields (like first name or phone number) and manage your mandatory marketing consent checkboxes.

• Building a Dynamic Home Page: The Home Page utilizes a "New Header" design that gives users an instant overview of their unique customer QR code identifier, credit balance, prepaid funds, and an "Add to Apple Wallet" pass shortcut.

• Managing Content Blocks: You can arrange the core sections of your portal using a simple drag-and-drop system. These blocks include:

  • Gift Cards: Allows users to track existing balances or purchase new digital cards.

  • Rewards: Displays all available loyalty perks. It dynamically calculates milestones, showing users exactly how many more points they need to unlock a reward (e.g., needing 4 more points for a 30-point coffee).

  • Prepaid & Referrals: Houses account top-ups and your refer-a-friend program settings, including custom invite email subject lines and messages.

  • Display Blocks: Custom, flexible blocks used to promote limited-time offers or link out to external sales URLs.

• Visual Styling & Custom Fonts: Ensure your portal matches your brand kit by defining matching background colors, high-contrast button accent colors, and custom favicons. You can also apply any custom typography (such as Jokker Bold or Geist Black) previously uploaded to your account.

• Portal Domain and Backend Connections: Under the settings tab, you can connect your business profiles, map your Stripe or Mollie payment processors, and link a custom subdomain. While you can use manual code styling, it is highly recommended to stick to the default style parameters for your initial launch.

Dashboard Checklist

1. Navigate to Apps > Contacts portal and click Edit contact portal.

2. Go through the Login, Sign-up, and Home page options on the left menu to configure text layout and block visibility.

3. Use the six-dot grab handles to drag and drop your home page blocks into your preferred sequence.

4. Move to the Styling tab in the top navigation to set your brand colors, select your custom fonts, and upload your app icons.

5. Access the portal Settings tab to link your custom domain, assign your payment gateway, and select your active gift card program.

6. Review your design across both mobile and desktop preview modes, then save your changes to set the portal live.