Configuration File

ReferralHero utilizes a configuration file behind the scenes, containing all the properties of your campaign, such as the color of buttons, header text, social buttons to display, and more.

Note: Use the custom configuration file only if you want to customize the properties of your campaign.

Custom Configuration File

You can manually override any setting by using a custom configuration file. To do this, instantiate a global window.RH_MFxxxxxxxxxx_Config object before the Tracking Pixel. The custom configuration file must be instantiated before the Tracking Pixel; otherwise, it won't work.

This is particularly useful when you want to make changes "on-the-fly" or only on specific pages. You don't need to specify every property—just include the settings you want to change, and ReferralHero will use your campaign defaults for the rest.

Important:

• The custom Configuration file must be instantiated before the Tracking Pixel or else it won't work.

• Replace 'MFxxxxxxxxxx' with your actual campaign UUID.

<script type="text/javascript">
  window.RH_MFxxxxxxxxx_Config = {
      defaults: {
        form_container_id: "maitre-widget", // The ID of the div where the form will appear.
        sharing_screen_container_id: "maitre-sharing", // The ID of the div for the sharing screen.
        default_url: "http://referralhero.com", // The URL for creating referral links.
        source: "Twitter", // The marketing channel attribution.
        email: "[e-mail]", // Default value for the email field.
        name: "John Smith", // Default value for the name field.
        extra_field: "USA", // Default value for the extra_field field.
        extra_field_2: "[phone]" // Default value for the second extra_field field.
      },

In this snippet, we start by setting up some default values. The form_container_id is where the form will be placed on your webpage. Similarly, sharing_screen_container_id is where the sharing screen will appear. The default_url is the link that will be used for referrals, and source determines the marketing channel. Default values for email, name, and additional fields are also set here.

      settings: {
        track_events: false, // Determines if custom events can be tracked.
        one_click_signup: {
          enable: true, // Toggles the one-click-signup feature.
          name: "rh_name",
          email: "rh_email", // URL parameter for extracting the email.
          extra_field: "rh_extra_field",
          extra_field_2: "rh_extra_field_2"
        },

Here, the settings section provides additional controls, such as enabling event tracking or the one-click-signup feature. For instance, you can customize the URL parameters for tracking user data like name, email, and extra fields.

        floating_button: {
          enable: true, // Whether to enable the Floating Button.
          text: "Join our Ambassador Program",
          color: "#1781bb",
          position: "left" // Position of the button: "left", "center" or "right".
        },

This part of the configuration deals with the floating button. You can toggle it on or off, customize the text, color, and position on the screen to match your website’s design.

        design: {
          enable: true, // If disabled, the form will load without a stylesheet.
          custom_css: "",
          colors: {
            primary: "#1781bb"
          }
        },

The design section allows you to control the appearance of your form. You can enable or disable styling and even provide custom CSS to further tailor the look and feel of the form.

        form: {
          cover: "https://mywebsite.com/images/cover.jpg",
          header: { text: "Sign up to win", color: "#1781bb" },
          name: { require: true, placeholder: "Your name" },
          email: { placeholder: "Your email" },
          extra_field: { require: false, placeholder: "" },
          extra_field_2: { require: false, placeholder: "" },
          submit_button: {
            text: "Submit",
            check_position: "Check status",
            submitting: "Submitting...",
            color: "#1781bb"
          },
          status: { text: "Check status", back: "Back" },
          terms_conditions: {
            require: true,
            text: "I accept the terms and conditions",
            url: "https://mywebsite.com/legal/terms"
          }
        },

Next, the form section is where you define the actual content and layout of the form. You can add a cover image, set up the header text and color, and control the fields that users will fill out, such as name and email. Additionally, you can customize the submit button’s text and color

        sharing: {
          redirection: {
            enable: false, // Enable/disable redirection after sign-up.
            url: ""
          },
          popup: false,
          open_if_signed_up: true,
          header: { text: "Congratulations, you're in!", color: "#222" },
          subheader: {text: "", color: "#bbb" },
          people_referred: { show: true, text: "Your referrals" },
          position: { show: true , text: "Your position", ordinal: true },
          instructions: "Refer your friends with the link below",
          referral_link: { copy_button: "Copy", copied_button: "Copied" },
          verification: {
            text: "Don't forget to confirm your email",
            reminder_email: "Your email hasn't been verified yet.<br>Check your inbox - including the junk folder - and if you don't find it click the link below to resend it.",
            resend_email: "Resend confirmation email",
            resending_email: "Sending email...",
            email_replace: "confirm your email", // String replaced with a link to popular email providers.
            email_resent: "Email has been sent. Check your inbox."
          },

The sharing section is where you manage what happens after users sign up. You can enable redirection and customize the sharing screen. You can also set up email verification reminders to ensure users complete the process.

          socials: {
            twitter: { show: true, message: "I just signed up on this awesome website! %referral_code%" },
            facebook: { show: true },
            facebook_messenger: { show: false },
            email: { show: true, message: "Check this out %referral_code%", subject: "" },
            whatsapp: { show: false, message: "" },
            linkedin: { show: false, message: "" },
            reddit: { show: false, message: "" },
            telegram: { show: false, message: "" },
            line: { show: false, message: "" }
          },

Next, in the socials section, you can control which social media platforms will be available for sharing. For instance, you can allow sharing on Twitter with a custom message or enable sharing on Facebook and email. You can also choose to disable other platforms like WhatsApp or LinkedIn if they’re not relevant to your campaign.

          leaderboard: {
            show: true,
            position: "Position",
            subscriber: "Subscriber",
            points: "Points",
            footnote: "1 referral = 1 point"
          },

In the leaderboard section, you can display a leaderboard showing the position of each subscriber based on the points they’ve earned. You can customize the labels for position, subscriber, and points, as well as add a footnote explaining the points system.

          rewards: {
            header: "This is what you can win",
            list: [
              { title: "Free Hat", description: "1st position", image: "https://mywebsite.com/images/reward.png"  },
              { title: "Free Suite", description: "2nd position", image: "https://mywebsite.com/images/reward.png"  }
            ],
            referrals: "Referrals",
            unlocked: "Unlocked!"
          }

Lastly, in the rewards section, you can showcase the rewards subscribers can win. You can list different rewards with titles, descriptions, and images, and specify how many referrals are needed to unlock each reward.

        alerts: {
          subscriber_not_found: "Email not found.",
          subscriber_already_promoted: "You have already been promoted.",
          form_incomplete: "Something is missing. Please fill out the form before submitting.",
          server_problem: "We are experiencing some issues on our server. Please try again.",
          failed_recaptcha: "It looks like you're a bot.",
          terms_conditions: "You must accept the Terms & Conditions",
        }
      },

The alerts section lets you define custom messages for various situations, such as when a subscriber is not found, has already been promoted, or fails the reCAPTCHA. You can also set alerts for incomplete forms or server issues.

     callbacks:  {} // See Callbacks article
  }
</script>

The callbacks section is where you can define custom functions that will execute in response to specific events. For example, you might use callbacks to handle actions after a user submits a form or interacts with the campaign in a particular way.

This part of the code is currently empty, but you can add functions here to customize the behavior based on your campaign needs. For more details on how to use callbacks, refer to the Callbacks article.

Key Points

• The window.RH_MFxxxxxxxx_Config object must be instantiated before the Tracking Pixel.

• You only need to include the properties you want to override; ReferralHero will use campaign defaults for others.

• The configuration allows for dynamic adjustments to the campaign on specific pages or conditions.