Customize referrals | Firmhouse

If you have enabled Referrals, as well as the referral banner for the SSC, your customers will see this by default:

Read on to learn how to customize the banner and buttons.

Change the banner text

In the Referrals settings, you can adjust the text for the banner that appears in the SSC home page, as well as the text on the dedicated Referrals page. Note that you can use HTML to format the text to your liking.

Add a custom style to match your brand

If you want to add some extra color to go with your recognizable branding, you can use custom code to apply CSS and JavaScript. To do this, go to Settings > Self-Service Center and scroll down to Custom code.

See example code

Here's some code to get you started. Note that you can adjust not only colors, but also the text that will be used in emails and WhatsApp messages that your customers use to share their referral codes.

This code should go in the Self Service Center Body section.

<script>
  function customiseReferrals() {
    const currentUrl = window.location.href;
    const isEnglish = currentUrl.includes('/en/');
    
    const referrals_banner = document.querySelector('#referrals-banner');
    const referrals_banner_header = document.querySelector('#referrals-banner-header');

    if (referrals_banner) {
      referrals_banner.classList.remove('bg-white');
      referrals_banner.classList.add('bg-[#YOUR-COLOR]');
    }

    if (referrals_banner_header) {
      if (isEnglish) {
        referrals_banner_header.textContent = "Refer a friend!";
      } else {
        referrals_banner_header.textContent = "Verwijs een vriend!";
      }
    }

    if (currentUrl.includes('/referrals')) {
      const shareEmailBtn = document.querySelector('#share_email_btn');
      const shareWhatsappBtn = document.querySelector('#share_whatsapp_btn');

      if (shareEmailBtn) {
        if (isEnglish) {
          shareEmailBtn.setAttribute('href', 'mailto:?subject=' + encodeURIComponent('Check out this great subscription service!') + '&body=' + encodeURIComponent('Hey! I thought you might be interested in this subscription service. Use my referral link to sign up and we both get rewards!'));
        } else {
          shareEmailBtn.setAttribute('href', 'mailto:?subject=' + encodeURIComponent('Bekijk deze geweldige abonnementsdienst!') + '&body=' + encodeURIComponent('Hoi! Ik dacht dat je misschien geïnteresseerd zou zijn in deze abonnementsdienst. Gebruik mijn verwijzingslink om je aan te melden en we krijgen allebei beloningen!'));
        }
      }

      if (shareWhatsappBtn) {
        shareWhatsappBtn.classList.remove('bg-white'); 
        shareWhatsappBtn.classList.add('bg-[#YOUR-COLOR]');
      }

      if (shareWhatsappBtn) {
        if (isEnglish) {
          shareWhatsappBtn.setAttribute('href', 'https://wa.me/?text=' + encodeURIComponent('Hey! I thought you might be interested in this subscription service. Use my referral link to sign up and we both get rewards!'));
        } else {
          shareWhatsappBtn.setAttribute('href', 'https://wa.me/?text=' + encodeURIComponent('Hoi! Ik dacht dat je misschien geïnteresseerd zou zijn in deze abonnementsdienst. Gebruik mijn verwijzingslink om je aan te melden en we krijgen allebei beloningen!'));
        }
      }
    }
  }

  document.addEventListener('turbo:load', customiseReferrals);
</script>