Generate Sharing-Screen

ReferralHero provides a function to generate the Sharing Screen of the Dashboard Widget. Before generating the Sharing Screen, it's essential to identify the subscriber. Once the subscriber is identified, you can use the following method:

RH_MFxxxxxxxxxx.generate.sharing_screen();

Generating the sharing screen manually can be advantageous in scenarios where you want to control exactly when and where the sharing screen appears. For instance, you might want to display the sharing screen after a user has completed a specific action, such as signing up or purchasing a product, or when they click a button.

Steps to Implement

1. Identify the Subscriber: Ensure that the subscriber is identified using the RH_MFxxxxxxxxxx.form.submit() or RH_MFxxxxxxxxxx.identify() method.

2. Generate the Sharing Screen: Call the RH_MFxxxxxxxxxx.generate.sharing_screen() method to create the Sharing Screen HTML element.

3. Append the Sharing Screen to Your Page: You can append the generated Sharing Screen to any element on your webpage, such as a div container. This will make the Sharing Screen visible to your users.

Example Implementation

Here's an example of how to display the Sharing Screen within a div element with the ID sharing-screen:

<div id="sharing-screen"></div>

<script>
  // Check if ReferralHero (RH) is available
  if (RH_MFxxxxxxxxxx) {
    // Generate the Sharing Screen
    var sharing_screen = RH_MFxxxxxxxxxx.generate.sharing_screen();
    
    // Get the div element where the Sharing Screen will be displayed
    var div = document.getElementById("sharing-screen");
    
    // Append the Sharing Screen to the div element
    div.appendChild(sharing_screen);
  }
</script>

Replace the MFxxxxxxxxxx with your specific campaign UUID.

Displaying the Sharing Screen in a Popup

To display the sharing screen in a popup, you can call the following function:

RH_MFxxxxxxxxxx.generate.popup(RH_MFxxxxxxxxxx.generate.sharing_screen());

This command will create the sharing screen and display it inside a popup window. This approach is useful for keeping your page clean and only showing the sharing options when necessary.

Example: Triggering the Popup on a Button Click

If you want to display the sharing screen when a user clicks a button, you can implement it like this:

<button id="btn">Open popup</button>

<script>
var button = document.getElementById("btn");

button.addEventListener("click", function(e) {
  if (RH_MFxxxxxxxxxx) {
    // Generate the sharing screen
    var sharing_screen = RH_MFxxxxxxxxxx.generate.sharing_screen();
    
    // Display the sharing screen in a popup
    RH_MFxxxxxxxxxx.generate.popup(sharing_screen);
  } 
});
</script>

Practical Use Case

This approach is perfect for scenarios where you want to offer a clean and focused user experience by only showing referral options when a user is ready, such as after completing a purchase or signing up for a service. It ensures that the sharing screen doesn't clutter the page and only appears when needed.