How to implement Qonfi on your website

You can implement Qonfi on any website. Once you’re happy with your selling guide, you can publish it to your website. Publishing the selling guide to your website requires you to: 

  1. Add a script to your website. The script takes care of loading Qonfi on your website.
  2. Add a HTML element to your website. The HTML element determines where your selling guide will be displayed on a web page.

Want to show Qonfi in a popup or sidebar on your website? Check out how to show Qonfi in a popup or sidebar on your website.

1. Adding the Qonfi script to your website

You can add the Qonfi script using Google Tag Manager or by implementing the script directly on your website without a tag manager.

Option 1: Adding the Qonfi script using Google Tag Manager

We recommend you to add the Qonfi script directly to your website (option 2). There may be some delay when implementing Qonfi via Google Tag Manager (GTM) due to that other tags are fired first, depending on your GTM set-up. GTM also might get blocked when someone uses Safari Incognito mode or has enabled Safari Advanced Protection. When implementing Qonfi via GTM, Qonfi is therefore also not showing up in these cases. If you want to prevent this, we recommend you to add the Qonfi script directly to your website. See 'Adding the Qonfi script directly to your website' 

  1. Go to Publish in the left navigation bar.
  2. Click on ‘create your first publication’. 
  3. Copy the script at step 1: <script src="https://platform.getqonfi.com/build-wizard3/wizard3.js"></script>
  4. Log in to Google Tag Manager and select the container for your website. 
  5. Within Google Tag Manager > click on ‘Tags’ (left navigation). 
  6. Click on ‘New’ to add a new tag and give your new tag a name (e.g. ‘Qonfi’).
  7. Click on ‘Tag configuration’ and choose ‘Custom HTML’ .
  8. Paste the copied script (step 3).
  9. Click on 'Triggering' and select 'All pages'.
  10. Click Save.
qonfi-gtm-tag

Option 2: Adding the Qonfi script directly to your website

If you don't use Google Tag Manager, you can simply add the script to your website directly. Depending on what CMS you use, you can do this in your CMS or you can ask your developer to directly add it in the code. 

Regardless of what option you choose you have to add the following script right before the closing </body> tag on your web page: <script src="https://platform.getqonfi.com/build-wizard3/wizard3.js"></script>

2. Adding the Qonfi HTML element to your website

Once you've added the Qonfi script, the last thing you need to do is to add the Qonfi HTML element to your website. The Qonfi HTML element determines where your selling guide will be displayed on a web page. You can add the Qonfi HTML element using a CMS like WordPress or you can implement the Qonfi HTML element directly in the website code.

Adding the Qonfi HTML element using a CMS like WordPress

Many content management systems (for example WordPress) allow you to add custom HTML on your web page. Most times you can also add a custom HTML block if you use a page builder plugin. For example WPBakery. 

You can add the HTML element with the following steps: 

  1. Go to Publish in the left navigation bar.
  2. Click on 'create your first publication'.
  3. Copy the script at step 2: <div data-qonfi-uuid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" style="min-height: 286px;"></div>
  4. Paste the copied script in the HTML block of your CMS or page builder plugin as shown in the example below. 
wpbakery

Adding the Qonfi HTML element directly in code

Sometimes you don't have access to a CMS or your CMS doesn't support custom HTML code/blocks. If this is the case, please ask your developer to add the HTML element for you. In this case, share the Qonfi HTML element code with your developer. You can find the code with the following steps: 

  1. Go to Publish in the left navigation bar.
  2. Click on 'create your first publication'.
  3. Copy the script at step 2: <div data-qonfi-uuid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" style="min-height: 286px;"></div>

Awesome! If you followed all the steps, your selling guide should now be visible on your website. Only when you publish the configuration, the changes you made are visible to your visitors. This way, you can go ahead and edit your configuration and only show the changes to your visitors once you're happy with the changes you made.

Documentation