How to add a timed Qonfi popup to your website

To avoid losing customers due to choice stress, you can show a popup after x seconds to grab the users' attention and let them know they can get help choosing the right product.

Using Google Tag Manager (GTM)

In GTM, add a new "Custom HTML" Tag and give it a name like "Qonfi timed popup". Choose the desired trigger (for example "All pages" if you want the popup to appear on all pages) and add the following code to the HTML field:

<div id="qonfi-timed-popup">
    <p>Need help finding the right product?</p>
    <button data-qonfi-uuid="xxxx-xxxx-xxxx-xxxx" data-qonfi-view-type="popup" id="qonfi-timed-popup-button">Help me choose</button>
    <button id="qonfi-timed-popup-close" aria-label="Sluiten" style="opacity: 1;">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgTHVjaWRlIENvbnRyaWJ1dG9yczogaHR0cHM6Ly9sdWNpZGUuZGV2LyAtLT4KPHN2ZyAKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjMDAwMDAwIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiIC8+CiAgPGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIgLz4KPC9zdmc+"
/>
    </button>
</div>

<style>
    #qonfi-timed-popup {
        position: fixed;
        z-index: 9999;
        bottom: 10px;
        left: 10px;
        max-width: 300px;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        margin: 0px 0;
        padding: 20px 60px 20px 20px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    }

    #qonfi-timed-popup p {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
    }
  
    #qonfi-timed-popup-button {
        background: #f97316;
        color: #FFF;
        border: 0;
        padding: 8px 16px;
        border-radius: 6px;
    }

    #qonfi-timed-popup-close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 20px;
    }
</style>

<script type="text/javascript">
    setTimeout(function () {
        document.getElementById("qonfi-timed-popup").style.display = "flex";
    }, 7000);

    document.getElementById("qonfi-timed-popup-close").addEventListener("click", function() {
        document.getElementById("qonfi-timed-popup").style.display = "none";
    });
</script>

Change data-qonfi-uuid="xxxx-xxxx-xxxx-xxxx" to your Qonfi uuid and adjust the texts and styling to your liking. You can also adjust the time it takes for the popup to appear by changing the number "7000" (7 seconds) in the code to something like "10000" (10 seconds).

Once added a popup will appear after a few seconds letting the user know help is available!