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>
		</>
	);
}