Viral Loops Widgets for React, Vue, Angular, Svelte and Solid

This repo is in beta, if you find any bugs please contact our support!

npm install @viral-loops/widgets

React Installation

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

Installation instructions for other frameworks are on the works! If you have questions please contact our support team!