# Generate Dashboard Widget

You can integrate the ReferralHero Dashboard Widget into your website to allow users to sign up, log in, and share referrals. This widget can be generated and added to your webpage using JavaScript.

The complete ReferralHero Dashboard Widget, which includes both the signup/login form and the sharing screen, you can use the following JavaScript function:

```javascript
RH_MFxxxxxxxxxx.generate.form();
```

This function returns an HTML element containing the full widget. You can then append this widget to a specific element on your page to make it visible to users.

### **Steps to Display the Widget** <a href="#steps-to-display-the-widget" id="steps-to-display-the-widget"></a>

* **Create an HTML Element**: First, add a `div` element to your webpage where you want the widget to appear. For example:

```html
<div id="signup-form"></div>
```

* **Generate and Append the Widget**: Use the following JavaScript code to generate the widget and append it to the `div` element created above:

```html
<script>
if (RH_MFxxxxxxxxxxx) {
  // Generate the full dashboard widget
  var form = RH_MFxxxxxxxxxx.generate.form();
  
  // Select the div where the widget will be displayed
  var div = document.getElementById("signup-form");
  
  // Append the generated widget to the div
  div.appendChild(form);
}
</script>
```

### **Displaying the Dashboard Widget in a Popup** <a href="#displaying-the-dashboard-widget-in-a-popup" id="displaying-the-dashboard-widget-in-a-popup"></a>

To enhance user engagement and streamline interactions, you can display the ReferralHero Dashboard Widget in a popup. This approach allows users to access the signup/login form and sharing screen without navigating away from their current page.

**Generating the Widget Popup**

You can easily display the widget in a popup by calling the `RH_MFxxxxxxxxxx.generate.popup()` function. This function creates a popup containing the widget, providing a seamless user experience.

Here's how to implement it:

* **Create a Button to Trigger the Popup**: Add a button or any clickable element to your webpage that will open the popup when clicked.

```html
<button id="btn">Open Popup</button>
```

* **Write JavaScript to Handle the Button Click and Open the Popup**: Use the following JavaScript code to generate the widget and display it in a popup when the button is clicked:

```html
<script>
// Get the button element
var button = document.getElementById("btn");

// Add a click event listener to the button
button.addEventListener("click", function(e) {
  if (RH_MFxxxxxxxxx) {
    // Generate the full dashboard widget
    var form = RH_MFxxxxxxxxx.generate.form();
    
    // Display the widget in a popup
    RH_MFxxxxxxxxxx.generate.popup(form);
  }
});
</script>
```

{% hint style="warning" %}
**Note:**

* **Ensure the ReferralHero Tracking Code is Installed**: Make sure that the ReferralHero Tracking Code is correctly included on your page to enable the generation and display of the widget.
* Replace MFxxxxxxxxx with your specific campaign UUID.
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.referralhero.com/integrate/javascript-web-api/generate-dashboard-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.