Embed Form + Popup widget

Use an embed sign up form and the popup sharing stage

Add the snippets for the popup

Go to the Installation step in your campaign wizard, select the I'll do it myself option, Custom Built in the dropdown menu and copy the HTML snippet. It should look something like this:

Paste it before the closing </body> tag of your website.

<script>!function(a,b,c,d,t){var e,f=a.getElementsByTagName("head")[0];if(!a.getElementById(c)){if(e=a.createElement(b),e.id=c,e.setAttribute("data-vrlps-ucid",d),e.setAttribute("data-vrlps-version","2"), e.setAttribute("data-vrlps-template", t),e.src="https://app.viral-loops.com/popup_assets/js/vl_load_v2.min.js",window.ub){jQuery=null,$=null;var g=a.createElement(b);g.src="https://code.jquery.com/jquery-2.2.4.min.js",f.appendChild(g)}f.appendChild(e);var h=a.createElement("link");h.rel="stylesheet",h.type="text/css",h.href="https://app.viral-loops.com/static/vl-loader.css",f.appendChild(h);var i=a.createElement("div");i.id="vl-overlay",i.style.display="none";var j=a.createElement("div");j.id="vl-loader",i.appendChild(j),a.addEventListener("DOMContentLoaded",function(b){a.body.appendChild(i);for(var c=a.getElementsByClassName("vrlps-trigger"),d=0;d<c.length;d++)c[d].removeAttribute("href"),c[d].onclick=function(){a.getElementById("vl-overlay").style.display="block"};var e=a.querySelectorAll("[data-vl-widget='popupTrigger']");[].forEach.call(e,function(b){var c=a.createElement("div");c.className="vl-embedded-cta-loader",b.appendChild(c)})})}}(document,"script","vrlps-js",throw new Error("please insert your own popup snippet!"),"waitlist");</script>

Add the snippets for the embed form

In the same page, you can find the snippet for the embedable form widget on Step 3. It looks likes this:


<!-- Paste this where you'd like the embeded signup form-widget to be -->
<form-widget ucid='<your campaigns public token>'></form-widget>

<!-- your site's html -->
<script type="text/javascript" src="https://app.viral-loops.com/widgetsV2/core/loader.js"></script>

</body>

Add the button that will replace the embed form

When a new participant arrives, they're going to see the sign up form, which they'll use to register to your campaign. If they revisit the page, and they're already 'logged in', you can add a "Check your status" button,which will trigger the sharing state popup.

It can look something like this:

<div role="button" id='check-your-status' style="display: none;">
  Check your status!
</div>

Add the script that shows/hides the popup

Finally, we need a bit of logic to show/hide the popup and show/hide the form-widget and the "Check your status" button. The following snippet will show the embed form until the user signs up. After they sign up, the popup with their status will appear.

If they revisit the website in the future, the popup is going to open automatically. You can also implement a more specific behaviour that fits your needs!

const onVLLoad = (cb) => window.VL ? cb() : setTimeout(() => onVLLoad(cb), 200)
const formWidget = document.querySelector("form-widget")
const ucid = formWidget.getAttribute("ucid")
const getUser = (ucid) => JSON.parse(localStorage.getItem(`${ucid}#user`) || '""')
const isUserLoggedIn = (ucid) => getUser(ucid) && typeof getUser(ucid) === 'object'
const triggerButton = document.querySelector("#check-your-status");
let listener = null;

onVLLoad(function checkState() {
  if (isUserLoggedIn(ucid)) {
    // user is logged in, show the popup
    setTimeout(() => VL.openModal(), 500)
    console.log("[VL] user is logged in!");

    formWidget.style.display = "none";
    triggerButton.style.display = "block";

    triggerButton.addEventListener("click", () => {
        VL.openModal();
    })
    return true;
  } else {
    // user is not logged in, show the embed form
    if (listener) return;
    listener = formWidget.shadowRoot.querySelector("form").addEventListener("submit", () => {
        checkState();
    });

    return false;
  }
})

// watch for when the user logs in
let interval = null
onVLLoad(() => {
    if (!isUserLoggedIn(ucid)) interval = setInterval(() => {
        if (interval && checkState()) clearInterval(interval);
    }, 150)
});