viral-loops-react

React component wrapper for https://viral-loops.com/ script.

Install

yarn add viral-loops-react
# or
npm install viral-loops-react

Usage

Setting up your Viral Loops component involves 3 steps:

1. Installing the Viral Loops script.
2. Importing the ViralLoops module.
3. Configuring the <ViralLoops /> component.

1: Install the Viral Loops script

First, log in to your Viral Loops dashboard via your account. Next, select the campaign you're interested in, click the "edit" button, then, in the footer of the page, click the "Installation" link.

On this page, select "I'll do it myself", and copy/paste the revealed script into the file that renders the root of your React application. For create-react-app users, this will be your public/index.html file.

To finish off this step, get the "Campaign ID" public token from the same page as the script you just copied, and include it in your project as an environment variable.

2: Import the ViralLoops module

Secondly, import the ViralLoops module into the view where you want the Viral Loops widgets to be displayed.

import ViralLoops from 'viral-loops-react';

In preparation for the next step, you'll also need to import the Viral Loops "Campaign ID" that you stored in an environment variable at the end of the previous step.

e.g. (assuming you're using dotenv to manage env vars)

# in .env
REACT_APP_VIRAL_LOOPS_CAMPAIGN_ID='yourCampaignID'

Note: If you're using create-react-app and the env var's name isn't prefixed with "REACT_APP" it will not be included in the build. This is a create-react-app convention.

# in config.js
const config = {
  viralLoopsCampaignId: process.env.REACT_APP_VIRAL_LOOPS_CAMPAIGN_ID
}

# in your view's file
import config from './config';

3: Configure the <ViralLoops /> component

Lastly, declare the component, passing it the necessary props to get the widgets you want.

Valid props are:

publicToken: 'string' (required)

formWidget: 'boolean' (optional) <--- displays the "Form" widget

milestoneWidget: 'boolean' (optional) <--- displays the "Milestones" widget

counterWidget: 'boolean' (optional) <--- displays the "Referral Counter" widget

e.g.

<ViralLoops 
  publicToken={config.viralLoopsKey}
  formWidget
  milestoneWidget
/>

Note:

viral-loops-react does not support Internet Explorer 11, due to errors that are thrown by the Viral Loops script when included in projects generated by create-react-app.