Integrate Snöball with Accelevents
Ariane Ramirez avatar
Written by Ariane Ramirez
Updated over a week ago

To encourage new registrants to share and promote your event, you can integrate Snöball with your event. The Snöball pop-up will appear at the end of the registration.

Before starting, get the script you need from Snöball, just like the script in the red box below. They should supply you with a widget integration instructions page where you can retrieve the script.

This is the script you'll need to add in Initial Script in Accelevents, but you'll need to add this code to the start of it:

<script> (function(){

And this code at the end:

})();</script>

So when you paste it, it should look something like this:

<script> (function(){var myScript = document.createElement("script");
myScript.setAttribute("src", "https://i.snoball.it/share/file/p/XXXX/widget.js");
myScript.setAttribute("type", "text/javascript");
document.getElementsByTagName('head')[0].appendChild(myScript);})();</script>

Integrate Snöball with Accelevents

  • Go to Settings > Integrations in your event admin console

  • Click Add Custom Script for the Landing Page

  • On the Initial Script, paste the code you appended and copied from Snöball:

    <script> (function(){var myScript = document.createElement("script");
    myScript.setAttribute("src", "https://i.snoball.it/share/file/p/XXXX/widget.js");
    myScript.setAttribute("type", "text/javascript");
    document.getElementsByTagName('head')[0].appendChild(myScript);})();</script>

    Note: the XXXX in the script above is just an example.

  • On the Header Script, paste this code below:

    <script>
    const buyerData = {};

    function handleInputBlur(event) {
    const element = event.target;
    const fieldName = element.name.replace(/\s+/g, '');
    buyerData[fieldName] = element.value;
    }

    function handleDomChange(mutationsList, observer) {
    const purchaseComplete = document.querySelector('.purchaseTicketCompleteContainer');
    const regComplete = document.querySelector('.reg-approval-success-container');
    const buyerDetails = document.querySelectorAll('.buyer-information input');
    const registrationDetails = document.querySelectorAll('.registration-approval input');

    function addBlurListener(elements) {
    elements.forEach(element => {
    if (!element.value) {
    element.addEventListener('blur', handleInputBlur);
    }
    });
    }

    addBlurListener(buyerDetails);
    addBlurListener(registrationDetails);

    mutationsList.forEach(mutation => {
    if (purchaseComplete || regComplete) {
    const divElement = document.createElement('div');
    divElement.id = 'snoball-share-container';
    divElement.dataset.email = buyerData['Email'] || buyerData['EmailAddress'];
    divElement.dataset.firstName = buyerData['FirstName'];
    divElement.dataset.lastName = buyerData['LastName'];
    document.body.appendChild(divElement);
    observer.disconnect();
    }
    });
    }

    const observer = new MutationObserver(handleDomChange);

    const config = { attributes: true, childList: true, subtree: true };

    observer.observe(document.body, config);
    </script>

  • Click Save.

To test if it works, register for the event through the event landing page. It should appear as a pop-up after the registration.

Did this answer your question?