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.

Option 1: Smart placements 

We highly recommend you to implement Qonfi via smart placements. The implementation is way faster, more scalable, offers more flexibility and you have less dependencies. Follow the steps in the link above (create a placement template) and choose 'Timed popup' as a Display type.

Option 2: 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 find your data-qonfi-uuid by clicking on publish > publish current configuration > step 2).

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!