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