Generate the dashboard widget

You can generate the ReferralHero Dashboard Widget manually by calling:

RH.generate.form();

This will generate the full dashboard widget (signup/login form + sharing screen).

Alternatively, if the user is already within your own login portal and you have first identified them, you can directly generate the sharing screen by itself.

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

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

<script>
if (RH) {
  var form = RH.generate.form();
  var div = document.getElementById("signup-form");
  div.appendChild(form) 
}
</script>

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

Display the dashboard widget in a popup

If you want to display the dashboard widget in a popup you don't need to append the form into an existing element. Instead, simply call:

RH.generate.popup(RH.generate.form());

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 form = RH.generate.form();
    RH.generate.popup(form);
  }
})
</script>

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