ReferralHero
  • Welcome to the Support Center
  • Common Questions
  • Features
    • Subscribers
      • Subscriber Profile
      • Unique Identifier
      • Active Visitors
      • 'Quick Add' Referral
      • Update Referral Status
    • Campaign Templates
      • Contest
      • Website Referral Analysis
      • Net Promoter Score
    • Unique Identifier
      • Phone Number
      • Confirmation Email
        • Thank-You Page
    • Automations
      • A/B Test
    • Security
      • Manual Review & Confirmation
      • Secondary Verification Method
      • High Risk
      • Blacklist
      • ReCaptcha
    • Reward
      • Reward Status
      • Advanced Reward Options
      • Transactions
    • Analytics
      • Active Visitors
      • Subscribers
      • Sources
      • Shares
      • Devices
      • Unsubscribers
    • Misc
      • Memorable referral links
      • 1-Click Signup
      • Forward & Refer
      • Coupon Codes
      • Custom Attribution
  • Integrate
    • Embeddable Widgets
      • Custom Domain
    • Integrations
      • Active Campaign
      • Aweber
      • Blockchain
      • Facebook Pixel
      • Calendly
      • Discord
      • HubSpot
      • Intercom
      • KakaoTalk
      • Klaviyo
      • Mailchimp
      • Salesforce
      • SendLane
      • Slack
      • Stripe
      • Tango Card
      • Telegram
      • Tremendous
      • Twilio
      • Typeform
      • Webhooks
      • Zapier
      • Zoho
    • Platform-specific Instructions
      • Google Tag Manager
      • WordPress
      • Webflow
      • SquareSpace
      • ClickFunnels
      • Unbounce
      • Instapage
      • Shopify
      • Carrd
      • WIX
    • Javascript Web API
      • Getting Started
      • Configuration file
      • Callbacks
      • Add a subscriber
      • Add a Pending Referral
      • Track multi-step conversion events
      • Track Transaction
      • Identify a Subscriber
      • Identify a Referrer
      • Generate Dashboard Widget
      • Generate Sharing-Screen
    • ReactJS
    • REST API
      • Errors
      • Webhooks
      • Objects
      • Endpoint Reference
    • Mobile SDKs
      • iOS SDK
        • Getting Started
        • Public Methods
        • Public Classes
        • API Interaction Methods
      • Android SDK
        • Getting Started
        • Public Methods
        • Public Classes
        • Listeners & Interfaces
      • Flutter SDK
        • Getting Started
        • Public Methods
      • React Native
        • Getting Started
        • Public Methods
        • Mobile App Testing in Development Mode
      • Mobile App Testing in Development Mode
  • API Tutorials
Powered by GitBook
On this page
  • Steps to Display the Widget
  • Displaying the Dashboard Widget in a Popup

Was this helpful?

  1. Integrate
  2. Javascript Web API

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.

PreviousIdentify a ReferrerNextGenerate Sharing-Screen

Last updated 2 months ago

Was this helpful?