Referral Hero Documentation
Getting StartedFeaturesIntegration
  • Introduction to ReferralHero
  • Getting Started
    • Quickstart
    • Creating a New Campaign
      • Choose a Campaign Type
      • Set Your Goals
      • Define a Unique Identifier
      • Set Up Integrations
      • Set Up Automations
      • Configure Options
  • Features
    • Subscribers
      • Types Of Subscribers
  • Integrations
    • Overview
    • Embeddable Widgets
      • Advocate Dashboard Widget
      • Referral Signup Widget
      • Referral Welcome Banner
      • Sharing Widget
      • Floating Button
      • Customize the Widgets
    • Javascript Web API
      • Getting Started
      • Configuration File
      • Callbacks
      • Add a Subscriber
      • Add a Pending Referral
      • Track multi-step conversion events
      • Track Transaction
      • Identify a Subscriber
      • Identify a Referrer
      • Generate Dashboard Widget
      • Generate Sharing-Screen
    • React JS
    • Platform Specific Integration
      • Shopify
      • Webflow
      • WordPress
    • Mobile SDK's
      • React Native
        • Getting Started
        • Mobile App Testing in Development Mode
    • REST API
      • Lists
        • 🟠POST lists
        • 🟢GET lists
        • 🟢GET lists/:uuid/leaderboard
        • 🟢GET lists/:uuid/bonuses
    • API Tutorials
Powered by GitBook
On this page
  • User Experience Flow:
  • Customize the Advocate Dashboard Widget
  • Installing the Advocate Dashboard Widget
  1. Integrations
  2. Embeddable Widgets

Advocate Dashboard Widget

PreviousEmbeddable WidgetsNextReferral Signup Widget

Last updated 8 months ago

The Advocate Dashboard is a versatile widget that can be seamlessly embedded into your website or web app, triggered as a popup, or even used as a standalone landing page. This widget is designed to boost engagement in your referral campaign by providing users with a personal dashboard where they can easily access their referral link or QR code, track referrals, view rewards, and check the leaderboard.

User Experience Flow:

  1. Signup Form: The first step typically involves displaying a signup form. However, if subscribers are identified through our API, this step can be bypassed, allowing for a smoother user experience.

  2. Dashboard Access: After a successful signup (or bypass), users are directed to their personalized Dashboard. Here, they can engage with your referral program by accessing all the essential tools and information they need to participate actively.

Customize the Advocate Dashboard Widget

  1. Navigate to the Widget Builder:

    • Go to Campaign Overview > Edit Campaign > Widget Builder

  2. Select Advocate Dashboard:

    • Choose the Advocate Dashboard from the widget options.

  3. Customize the Form & Dashboard:

    • Adjust the settings for the form, including the placement, text, and display options.

  4. Save Your Changes:

    • Make sure to save any changes you make to apply them to your campaign.

Installing the Advocate Dashboard Widget

To add the Advocate Dashboard Widget to your website, follow these steps:

  1. Get Your Global Tracking Code:

    • Navigate to your ReferralHero account and go to your Campaign Overview > Edit Campaign > Launch.

    • Copy the Global Tracking Code provided.

  2. Add the Global Tracking Code:

    • Integrate the ReferralHero Global Tracking Code into your website so that it loads on every webpage.

    • Typically, this involves placing the code within the <head></head> section of your website's HTML.

  3. Place the Dashboard Widget:

    • Decide where on your webpage you want the Advocate Dashboard Widget to appear.

    • Paste the following snippet within the <body></body> section of your HTML code, exactly where you want the widget to be displayed:

    <body>
      <div id='referralhero-dashboard-MFxxxxxxxxxx'></div>
    </body>

That’s it! Your Advocate Dashboard Widget is now set up and ready to go on your website.

Sign up Form & Perosonalized Dashboard