# Advocate Dashboard Widget

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.

<figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FWOMvG3hp6bI3svB0KvUQ%2Fimage.png?alt=media&#x26;token=a00ecef2-2ef8-4e6b-a7fa-6c54df7bcb98" alt=""><figcaption><p>Sign up Form &#x26; Perosonalized Dashboard</p></figcaption></figure>

### **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.

       <figure><img src="https://1427773792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhQxsg0xCpG1doJ626L8X%2Fuploads%2FdexIYghSNnXtK4tbs21T%2FScreenshot%202024-09-09%20at%2011.16.31%E2%80%AFPM.png?alt=media&#x26;token=e0b0c8e6-c5bf-4341-88e3-eadac6bbd1e9" alt=""><figcaption></figcaption></figure>
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:

    ```html
    <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.
