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:

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

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

<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:

<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

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.

<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:

<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>

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.