Generate the sharing screen

You can generate the ReferralHero Dashboard Widget Sharing Screen manually by calling:

RH.generate.sharing_screen();

You must first identify the subscriber and then generate the sharing screen.

Alternatively, if you want to generate the full Dashboard Widget (signup/login form + sharing screen), see here.

This function will return an HTML element. To display the sharing screen on your page, simply append it to another element on your page. For example, you can append the sharing screen to a div on your page like this:

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

<script>
if (RH) {
  var sharing_screeen = RH.generate.sharing_screen();
  var div = document.getElementById("sharing-screen");
  div.appendChild(sharing_screeen);
}
</script>

You can see a live example here: https://codepen.io/Manu66/pen/eYYqPVz

When to generate the sharing screen

Generating the sharing screen manually can be useful in circumstances where you want to display the sharing screen in a specific place or upon a specific user behavior (like a click).

However, be aware that you can only generate the sharing screen when the subscriber has been identified. Attempts to generate the sharing screen without a subscriber will fail.

Display sharing screen in a popup

If you want to display the sharing screen in a popup simply call:

RH.generate.popup(RH.generate.sharing_screen());

For example, if you want to trigger the popup when a button is clicked, you can do something like this:

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

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

button.addEventListener("click", function(e){
  if (RH) {
    var sharing_screen = RH.generate.sharing_screen();
    RH.generate.popup(sharing_screen);
  }
})
</script>

You can see a live example here: https://codepen.io/Manu66/pen/bGGXmKP

Last updated