Popup Script to Display Discount Codes

We’re excited to help you make the most of your referral program! With the Referral Rocket popup script, you can easily display a discount code to users who have been referred by their friends. This guide will walk you through how to use the script, explain its parameters, and help you customize it to fit your brand.

Step-by-Step Guide to Adding the Popup Script

1. Copy the Script: Below is the script provided by Referral Rocket. Add this on the page referred users will land i.e. the share URL configured in the campaign.

<script
  type="text/javascript"
  class="hype_popup"
  campaign-id="campaign-id"
  src="https://app.referralrocket.io/widget/DiscountModal.js"
  defer
></script>

1. Replace the Placeholder Values:

   • Replace campaign-id with your actual campaign ID. This is a unique identifier for your referral or discount campaign.

   • Customize the other attributes (e.g., popup-header, background-color, button-color, etc.) to match your brand and campaign goals.

2. Add the Script to Your Website:

   • Paste the customized script into the HTML of your website, preferably just before the closing </body> tag. This ensures the script loads after the rest of your page content.

3. Test the Popup:

   • Once the script is live, test it by visiting your website as a referred user. The popup should appear with the discount code and the customizations you’ve applied.

Explanation of Script Parameters

Here’s a breakdown of each attribute in the script and what it does:

Attribute	Description
campaign-id	The unique identifier for your referral or discount campaign. Replace this with your actual campaign ID.
popup-header	Sets the heading text inside the popup. Customize this to match your messaging.
background-color	Defines the background color of the popup. Use color names or hex codes.
button-color	Specifies the color of the button inside the popup. Use color names or hex codes.
button-value	Determines the text displayed on the button (e.g., “Buy,” “Shop Now,” etc.).

---

Customization Tips

• Brand Consistency: Use colors (background-color, button-color) that align with your brand’s visual identity.

• Clear Messaging: Customize the popup-header and button-value to clearly communicate the discount and encourage action.

• Test Across Devices: Ensure the popup displays correctly on both desktop and mobile devices.

---

Troubleshooting

If the popup doesn’t appear as expected:

1. Double-check that the campaign-id is correct.

2. Ensure the script is placed just before the closing </body> tag.

3. Verify that there are no JavaScript errors in your browser’s console.