How to show Qonfi in a popup or sidebar on your website

Creating a custom popup or sidebar that looks great and is easy to use on each device can be quite challenging. 

That’s why Qonfi provides you with easy-to-use, fully responsive, default popup and sidebar integrations right out of the box. You can use these integrations to easily implement Qonfi on your website. Both integrations are fully optimized for all devices, saving you time and making it even easier to implement Qonfi.

The popup integration shows your flow in a large popup. On mobile devices, the popup (and sidebar) integration will be displayed full-screen to make the most of the space we have. You can find an example here.

Popup demo

When using the sidebar integration, your flow will show up in a sidebar in the right side of the screen. The sidebar integration can be experienced as less intrusive than the in-page and popup integrations. You can find an example here.

Sidebar demo

How to add the popup or sidebar to your website

Once you've added the Qonfi script, you need to add the Qonfi HTML element to your website. The Qonfi HTML element determines where your flow  will be displayed on a web page. When publishing your flow, you can choose between an in-page, popup or sidebar integration.

Option 1: Smart placement

There are two options to add Qonfi to your website: smart and manual placement. We highly recommend you to use Smart placements. Implementation is way faster, more scalable, offers more flexibility and you have less dependencies. 

Option 2: Manual placement

In case you do not want to use smart placements, please follow the steps below. 

1. Click Publish flow in the top right corner of the editor.

2. Click Publish! in the step 'publish changes' to publish your first changes.

3. Instal the Qonfi script (step 1)

4. Click on the step 'add to website'. 

5. Click on Manual Placement

6. Click on the Popup or Sidebar button. 

When choosing popup or sidebar, simply add the shown “data attributes” to the button on your page that should open the popup or sidebar.

qonfi_pop_up

How to use a Product Check with the popup or sidebar

You can also use the  popup or sidebar integration in combination with the Product Check on your product page.

Click on 'With product check' or 'Without product check' as shown below. 

qonfi_product_check_pop_up

When choosing popup or sidebar, simply add the shown “data attributes” to the button on your page that should open the Product Check.

Product check button hidden by default when product ID does not exists
The Product Check button is hidden by default. When your product page loads, Qonfi checks if the given product id actually exists in your flow before showing the Product Check button. This way, you don’t have to worry about the Product Check button showing for products that are not in your flow.

Opening Qonfi in a popup or sidebar using an url

If you are unable to edit the HTML of your website, you can also use an url to open Qonfi in a popup or sidebar. This structure of the url is as follows:

javascript:openQonfi(qonfiId, viewType, productId, language, currency, stylesheet) 

Examples

Open Qonfi in a popup.

  • Opening Qonfi in a popup with the language 'de':
    javascript:openQonfi('xxxx-xxxx-xxxx-xxxx', 'popup', '', 'de')
  • Opening a Qonfi productcheck in a sidebar with the language 'fr':
    javascript:openQonfi('xxxx-xxxx-xxxx-xxxx', 'sidebar', '123', 'fr')
  • Opening a Qonfi productcheck in a popup with the language 'pl', using the Polish złoty as currency and a custom stylesheet:
    javascript:openQonfi('xxxx-xxxx-xxxx-xxxx', 'popup', '123', 'fr', 'pln', 'https://example.com/qonfi-stylesheet.css)

When you want to add a link to your newsletter that will open Qonfi directly when visiting the link, you can do this by adding the following script to your website:

<script>
(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const qonfiId = urlParams.get('qonfi');

    if (qonfiId) {
        const checkQonfi = setInterval(() => {
            if (typeof openQonfi === 'function') {
                openQonfi(qonfiId, 'popup'); // Use 'sidebar' to open in a sidebar
                clearInterval(checkQonfi);
            }
        }, 100);

        setTimeout(() => clearInterval(checkQonfi), 5000);
    }
})();
</script>

Next, add the "qonfi" parameter with your flow uuid to your url, for example: https://mywebsite.com/products?qonfi=xxxx-xxxx-xxxx-xxxx. That's it! Qonfi should now open in a popup as soon as you go to that url.

Documentation