Integrate the Viral Loops form widget seamlessly into your React or Next.js application by following this step-by-step guide. This will allow you to embed Viral Loops' referral forms directly into your app, enhancing user engagement and referral tracking.

Prerequisites

A React or Next.js project set up.
Your Viral Loops Campaign ID (ucid).

Step 1: Create the Viral Loops Form Widget Component

Create a new file in your components directory, e.g., ViralLoopsFormWidget.jsx, and add the following code:

"use client";
import { useEffect } from "react";

function ViralLoopsFormWidget({ ucid, popup }: {
  ucid: string;
  popup: boolean;
}) {
    function loadViralLoops() {
        const SCRIPT_SRC = "https://app.viral-loops.com/widgetsV2/core/loader.js";
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${SCRIPT_SRC}"]`)) {
                resolve();
            } else {
                const script = document.createElement("script");
                script.src = SCRIPT_SRC;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            }
        });
    }

    useEffect(() => {
        loadViralLoops();
    }, []);

    if (!ucid) return null;

    return <form-widget ucid={ucid} mode={popup ? 'popup' : 'form'}></form-widget>;
}

export default ViralLoopsFormWidget;

Explanation

"use client";: This directive is necessary if you're using Next.js 13 with the App Router to specify that this component should be rendered on the client side.
loadViralLoops Function: Dynamically loads the Viral Loops script only once to prevent duplicate script tags.
useEffect Hook: Ensures the script is loaded when the component is mounted.
Form Widget: Renders the element provided by Viral Loops with the necessary ucid and popup props.

Step 2: Import and Use the Component

Import the ViralLoopsFormWidget component into the page or component where you want to display the form widget.

import ViralLoopsFormWidget from './path/to/ViralLoopsFormWidget';

function App() {
    const ucid = 'YOUR_VIRAL_LOOPS_UCID'; // Replace with your actual UCID
    const popup = false; // Set to true if you want the form to appear as a popup

    return (
        <div>
            {/* Your other components or HTML elements */}
            <ViralLoopsFormWidget ucid={ucid} popup={popup} />
        </div>
    );
}

export default App;

Popup Prop: Set popup to true if you prefer the form to display as a popup; otherwise, it will be embedded inline.

Step 3: Ensure Client-Side Rendering (Next.js Specific)

If you're using Next.js, make sure that the component is rendered on the client side. The "use client"; directive at the top of the ViralLoopsFormWidget component file ensures this.

TypeScript Support

If you are using TypeScript you may encounter the following error:

Property <form-widget> does not exist on JSX.IntrinsicElements ts(2339)

That is because our Form Widget is a Web Component and TypeScript cannot identify it as a React component. To fix this you can declare it on the JSX namespace like this:

declare global {
 namespace JSX {
        interface IntrinsicElements {
          'form-widget': any;
        }
    }
}

Below you can find a complete ViralLoopsFormWidget component written in TypeScript

"use client";
import { useEffect } from "react";

declare global {
 namespace JSX {
        interface IntrinsicElements {
          'form-widget': any;
        }
    }
}

interface ViralLoopsFormWidgetInput {
    ucid: string;
    popup: boolean;
}

function ViralLoopsFormWidget({ ucid, popup }: ViralLoopsFormWidgetInput) {
    function loadViralLoops() {
        const SCRIPT_SRC = "https://app.viral-loops.com/widgetsV2/core/loader.js";
        return new Promise((resolve, reject) => {
            if (document.querySelector(`script[src="${SCRIPT_SRC}"]`)) {
                resolve(true);
            } else {
                const script = document.createElement("script");
                script.src = SCRIPT_SRC;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            }
        });
    }

    useEffect(() => {
        loadViralLoops();
    }, []);

    if (!ucid) return null;

    return <form-widget ucid={ucid} popup={popup ? "true" : "false"}></form-widget>;
}

export default ViralLoopsFormWidget;