Overview

This article will walk you through instructions for how to connect your Wix site with Referral Rock in order to:

• Track referral conversions through Wix forms

🚧

Prerequisites

• This integration requires installation of Referral.js SDK. Add your SDK to the header on each page of your Wix site.
• Make sure your program's referral destination is set to your Wix site

This integration utilizes Wix's Velo development environment and Referral Rock tracking technology to track all referral web visits and conversions on your Wix website.

Track Referrals on Forms

Step 1: Install Scripts for Conversion Tracking

The video below shows how to setup your forms for conversion tracking using the two scripts below. Use the video and the scripts below to setup your tracking.

Video tutorial

Script to store member code on browser

Ensure this script is placed on the webpage referrals land on after clicking a share link.

import wixLocation from "wix-location";
import { local } from "wix-storage";

$w.onReady(function () {
  const query = wixLocation.query;

  if (typeof query.REFERRALCODE !== "undefined") {
    local.setItem("referralCode", query.REFERRALCODE);
  }
});

Script to add member code to form field

The below code should be added to any page you have a form on and will add the member code to the form to associate the referral to the member.

The only code that should be edited is this line here:

$w("#wixForms1").onWixFormSubmit(async (event) => {

You will need to replace wixForms1 with the ID of the form on the page. An example is shown in the video tutorial above.

import { local } from "wix-storage";
import { fetch } from "wix-fetch";
import wixLocation from "wix-location";

$w.onReady(function () {
  let referralCode = local.getItem("referralCode");

  if (referralCode) {
    $w("#referralCode").value = referralCode;
  }

  $w("#wixForms1").onWixFormSubmit(async (event) => {
    if (referralCode) {
      const response = await fetch(
        `${wixLocation.baseUrl}/_functions/referral`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ fields: event.fields }),
        }
      )
        .then((json) => json.json())
        .then((json) => json);
    }
  });
});

Step 2: Connect Wix.com to Referral Rock's API

In this step you will add API keys and code that creates a referral in Referral Rock anytime a form is submitted that includes a value for the hidden Referral Code field you setup above. This is done in two steps:

1. Create and add your Referral Rock API keys to Wix
2. Add a backend method below to Wix

Watch the video tutorial for instructions on how to enter your API keys and adding the code below.

Video tutorial

Code to create a referral in Referral Rock

Use code below in conjunction with the video tutorial to setup what fields you send to Referral Rock.

import { fetch } from "wix-fetch";
import { ok, badRequest } from "wix-http-functions";
import { getSecret } from "wix-secrets-backend";

const BASE_URL = "https://api.referralrock.com";

export async function post_referral(request) {
  const PUBLIC_KEY = await getSecret("Referral_Rock_Public_Key");
  const PRIVATE_KEY = await getSecret("Referral_Rock_Private_Key");
  // create base64 auth header from public and private key
  const AUTH_HEADER = Buffer.from(`${PUBLIC_KEY}:${PRIVATE_KEY}`).toString(
    "base64"
  );
  const body = await request.body.json();
  const data = body.fields.reduce((acc, { fieldName, fieldValue }) => {
    if (fieldName === "First Name") {
      acc.firstName = fieldValue;
    }

    if (fieldName === "Last Name") {
      acc.lastName = fieldValue;
    }

    if (fieldName === "Email") {
      acc.email = fieldValue;
    }

    if (fieldName === "Phone") {
      acc.phoneNumber = fieldValue;
    }

    if (fieldName === "Referral Code") {
      acc.referralCode = fieldValue;
    }

    return acc;
  }, {});

  const sendToApi = await fetch(`${BASE_URL}/api/referrals`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Basic ${AUTH_HEADER}`,
    },
    body: JSON.stringify(data),
  })
    .then((json) => json.json())
    .then((json) => json)
    .catch((err) => err);

  console.log(sendToApi);

  if (sendToApi.message === "Referral Added") {
    return ok(sendToApi.referral);
  } else {
    return badRequest(sendToApi);
  }
}

Test the Integration

Watch the video below for an example of how to test and debug this integration. If you have problems with your integration, click the blue chat icon at the bottom right of this window to contact our support team.