The Advocate Portal is the dashboard where your advocates can manage every aspect of their referral program account. From sharing your brand to tracking their performance and receiving payouts, the Advocate Portal provides a seamless experience for your advocates.
This guide will walk you through how to create, customize, and manage the Advocate Portal to suit your program’s needs.

The Advocate Portal is built using the Bootstrap 4 Framework, HTML5, CSS3, and JQuery, making it fully responsive, customizable, and compatible with all modern browsers and devices.

A fully built portal includes everything your advocates need to get started, such as:

• Header: Displays your program’s title, subtitle, and background image.
• Navigation Menu: Provides easy access to key sections like Overview, Access, Share, Earn, and Get Paid.
• Overview Page: Introduces your referral program and explains how it works.
• Access Page: Allows advocates to log in, sign up, or reset their passwords.
• Share Page: Enables advocates to share your brand across multiple channels.
• Earn Page: Displays real-time stats and rewards earned by advocates.
• Get Paid Page: Shows available payout methods and allows advocates to request payouts.
• Footer: Includes copyright and contact information.

The Advocate Portal includes a Header, Menu, Overview, Access, Sharing Tools, Statistics, and Payouts pages. To view a complete list of all pages, click the Current Page dropdown menu on the upper left side of the Editor.

The Header is the top section of your Advocate Portal, serving as the first visual element advocates see when they access your referral program. It typically includes a background image, a title, and a subtitle, creating a welcoming and engaging introduction to your program.

Default Header Content
By default, the Header displays:

• Title: "Refer our Services and Earn Rewards"
• Subtitle: "Do you want to make some extra money? Tell your family and friends about us and enjoy the rewards!"

How to Edit the Header

1. In the Website Editor, locate the top-right menu bar and click on the Current Page dropdown menu.
2. From the dropdown options, select Header to begin customizing your page header.
3. Customize the Header by:

• Replacing the Background Image: Upload a new image that aligns with your brand.
• Editing the Text: Update the title and subtitle to reflect your program’s messaging.
• Using Alternative Blocks: Replace the Header with other available blocks if desired.

Pro Tips for Header Customization

• Keep It Visually Appealing: Use high-quality images and concise, engaging text.
• Align with Your Brand: Ensure the Header reflects your brand’s colors, fonts, and tone.
• Test Responsiveness: Check how the Header looks on different devices to ensure a seamless experience.

The Navigation Menu is a key component of the Advocate Portal, providing easy access to the main sections of your referral program. By default, it includes five tabs:

1. Overview: Introduce your referral program and explain how it works.
2. Access: Allows advocates to log in, sign up, or reset their passwords.
3. Share: Provides tools for advocates to refer your brand across multiple channels.
4. Earn: Displays real-time stats and rewards earned by advocates.
5. Get Paid: Enables advocates to request payouts using their preferred method.

How to Customize the Navigation Menu

1. In the Website Editor, locate the top-right menu bar and click on the Current Page dropdown menu.
2. From the dropdown options, select Menu to begin customizing your page.
3. Customize the menu by:

• Modifying the Text: Update the names of the tabs to better align with your program’s terminology.
• Removing Tabs: Delete any tabs that are not relevant to your program.

Pro Tips for Menu Customization

• Keep It Simple: Use clear and concise labels for each tab to ensure advocates can easily navigate the portal.
• Align with Your Program: Tailor the menu to reflect the structure and goals of your referral program.
• Test Usability: Ensure the menu is intuitive and works seamlessly across all devices.

The Access Page is where participants can log into their referral program accounts.

To customize this page:

1. Go to the Website Editor and locate the Current Page dropdown menu in the top-left corner.
2. Select Access to edit the page’s content and layout.

Signup Form
The Signup Form is where potential advocates register to join your referral program. By default, Genius Referrals requires the following fields:

• Full Name
• Email Address
• Password

You can also add custom fields to gather additional information tailored to your program’s needs. For detailed instructions on adding custom fields, refer to our Form Guide.

Login Form
The Login Form allows advocates to access their program dashboard by entering their:

• Email
• Password: This form ensures secure and seamless access to their accounts.

Logout
The Logout feature enables advocates to securely log out of members-only pages, protecting their account information.

Forgot Password Form
The Forgot Password Form allows advocates to reset their password if they forget it. This ensures uninterrupted access to their accounts.

Forgot Security Code Form
The Forgot Security Code Form enables advocates to request their security code, providing an additional layer of account recovery.

Authentication
The Access Validation Page is displayed when an advocate attempts to access a members-only page without being logged in. This ensures that only authenticated users can view sensitive content.

The Share Page is the hub where advocates can refer your brand to their network. This page provides multiple distribution channels, allowing advocates to share your business with a single click.

• Customize Social Media Channels: You can select which social media platforms are displayed on this page and remove any channels that are not relevant to your program.
• Flexible Layout: If you want to rearrange the layout, drag and drop the blocks to your preferred configuration.

To edit the Share page:

1. Go to the Website Editor and locate the Current Page dropdown menu in the top-left corner.
2. Select Share to customize the content, channels, and layout.

The Footer is the section that appears at the bottom of the Advocate Portal. It serves as a useful space to display important information such as:

• Copyright Details: To protect your content and brand.
• Contact Information: To provide advocates with a way to reach out for support or inquiries.

You can customize the footer to include additional elements like links to your privacy policy, terms of service, or social media profiles, ensuring it aligns with your program’s branding and communication needs.

To customize the Get Paid page:

1. Go to the Website Editor and locate the Current Page dropdown menu in the top-left corner.
2. Select Footer to edit the content.

A well-designed footer enhances your Advocate Portal's professionalism and provides advocates with easy access to essential information.

To exit the Website Editor and return to the Program Editor, click on the Arrow symbol (←) located on the left side of the top bar menu. This will take you back to the Program Editor, where you can manage and customize other aspects of your referral program.

Align with Your Brand: Use your brand’s colors, fonts, and imagery to create a cohesive experience.
Keep It Simple: Ensure the portal is easy to navigate and understand.
Test Responsiveness: Check how the portal looks on different devices and browsers.
Update Regularly: Keep the content fresh and relevant to maintain advocate engagement.

For additional guidance, explore these resources:

How the Website Editor Works
Adding a Multi-Column Forms
Icons in the Editor
Edit Form Fields
Page Settings
How to Set Page Fonts
Referral Program Advocate Templates

If you have any questions or need further assistance, visit our Help Center or contact our support team.