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

When publishing your flow, you can choose between an in-page, popup or sidebar integration.

Publish popup

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

How to use a Product Check with the new popup or sidebar

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

Publish sidebar

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

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)

Documentation