React
Start by installing the Viral Loops package from npm
npm install @viral-loops/widgets
Import the component and the getCampaign
function like so:
import { ViralLoopsWidget, getCampaign } from '@viral-loops/widgets/dist/react';
You can access the Viral Loops campaign like this:
const VIRAL_LOOPS_CAMPAIGN_ID = 'iev8dcEBHtsNToNqaCGnXGGCmsc'; // replace with your campaign ID
const campaign = await getCampaign(VIRAL_LOOPS_CAMPAIGN_ID);
To embed the widget inside a React component:
function VLWrapper() {
const VIRAL_LOOPS_CAMPAIGN_ID = 'iev8dcEBHtsNToNqaCGnXGGCmsc'; // replace with your campaign ID
return (
<>
<ViralLoopsWidget ucid={VIRAL_LOOPS_CAMPAIGN_ID} />
</>
);
}
If you wish to embed the widget as a popup you can set popup prop to true
:
<ViralLoopsWidget ucid={VIRAL_LOOPS_CAMPAIGN_ID} popup={true}/>
Below you can find a React Component implementation that wraps the Viral Loops widget and binds the user registered in Viral Loops:
// App.jsx
import { useState, useEffect } from 'react';
import logo from './assets/react.svg';
import './App.css';
import { ViralLoopsWidget, getCampaign } from '@viral-loops/widgets/dist/react';
function App() {
const [vlUser, setVlUser] = useState();
const VIRAL_LOOPS_CAMPAIGN_ID = 'iev8dcEBHtsNToNqaCGnXGGCmsc'; // replace with your campaign ID
async function logout() {
const campaign = await getCampaign(VIRAL_LOOPS_CAMPAIGN_ID);
campaign?.logout();
window.location.reload();
}
async function bindViralLoopsUser() {
if (vlUser) return;
const campaign = await getCampaign(VIRAL_LOOPS_CAMPAIGN_ID);
const loggedInUser = campaign.getUser();
if (loggedInUser) {
console.log('[Viral Loops] user logged in to viral loops is:', loggedInUser);
setVlUser(loggedInUser);
} else {
campaign.on('participation', (vlUser) => {
console.log('[Viral Loops] user participated to viral loops!', vlUser);
setVlUser(vlUser);
});
}
}
useEffect(() => {
bindViralLoopsUser();
});
return (
<>
<div className="App">
<img src={logo} alt="" />
<h1> The Company Name </h1>
<div className="card">
<ViralLoopsWidget ucid={VIRAL_LOOPS_CAMPAIGN_ID} />
{vlUser && (
<div>
<h2>
You're logged in as
<span> {vlUser.email} </span>
</h2>
<p> Invite your friends! (You currently have {vlUser.referralCount} referrals) </p>
<button onClick={() => logout()}> Logout </button>
</div>
)}
</div>
</div>
</>
);
}
Updated 10 months ago