How to implement Qonfi on your website

You can implement Qonfi on any website. 

Implementing your flow 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 flow will be displayed on a web page. You can use Smart Placements or manually add it. 

Step 1. Add the Qonfi script 

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: Directly to your website

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 script (see step 1-4 below) right before the closing </body> tag on your web page.

Option 2: Google Tag Manager

1. Click Publish flow in the top right corner of the editor.
2. Optionally, add a description of the changes you made in this configuration.
3. Click Publish! in the step 'publish changes' to publish your first changes.
4. In the next step (Install script), copy the script (inclusding your qonfiAccount ID, which is represented below as 'xxx-xxx-...'   <script> window.qonfiAccount = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'; const s = document.createElement('script'); s.async = true; s.src = 'https://platform.getqonfi.com/build-wizard3/wizard3.js'; document.head.appendChild(s); </script>
5. Log in to Google Tag Manager and select the container for your website. 
6. Within Google Tag Manager > click on ‘Tags’ (left navigation). 
7. Click on ‘New’ to add a new tag and give your new tag a name (e.g. ‘Qonfi’).
8. Click on ‘Tag configuration’ and choose ‘Custom HTML’ .
9. Paste the copied script (step 4).
10. Click on 'Triggering' and select 'All pages'.
11. Click Save.
12. Don't forget to submit your GTM changes. 

Step 2. Add HTML element

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 flow  will be displayed on a web page. 

There are two options to add Qonfi to your website: 1) smart placements 2) manually

Option 1: Smart placement

With smart placement, you can visually place your flow anywhere on your website, directly from within Qonfi. No development support needed. This is the fastest and easiest option. Watch the video below or follow the following steps. 

1. Create a placement template

A placement template determines how your flow is displayed on your website. You can use the same template for multiple flows. 

1. Click on Publish flow and click on the step 'add to website'. 
2. Click on +Add placement , click No template selected yet, click to select to open the Placement templates panel.
3. Click + Add template in the top right corner.
4. Fill in the template settings:

General

• Name: Give your template a name.
• Display type: Choose how the template is shown on your page. Select Banner, in-page or a timed popup.

Appearance

• Open type: Choose how the selling guide opens when a visitor interacts with the banner. Select Popup or Sidebar. Both types are already responsive for mobile. 

Styling

Customize the look of your display type: 

• Container background color: The background color.
• Text color: The color of the text.
• Button background color: The color of the button.
• Button text color: The text color on the button.
• Font size: By default set to Same as website, so the banner automatically matches your website's font size.
• Rounded corners: Choose between no, small, medium, or large rounded corners.
• Container shadow: Add a shadow to the banner to make it stand out.

Click Save to save the template. You can now select the template for your placement. 

2. Adding the flow to your website

Once you've created a template, you can determine where you want to add your flow to your website. 

Template

Select the template you just created from the Placement templates list. It will appear under Template in the Add placement panel.

Content

Adjust the content of your template that is shown to your visitors:

• Title: The text shown in the banner. For example: "Having trouble finding the perfect duvet?"
• Button text: The label on the button that opens the selling guide. For example: "Start product finder"
• Language: Select your preferred language or leave it on Default.

Location

Specify on which pages you want to add Qonfi and select the right element on the page. 

• URLs or paths: Enter the URLs or paths where your flow should be shown. Add one URL or path per line. You can use wildcards to target multiple pages at once. For example: /products/*
• Element: Click the edit icon to open the element selector. See Selecting an element below.
• Insert method: Determines how Qonfi places the banner in the selected element. Replace element content replaces the content of the selected element with your Qonfi banner.

Click Save to save the placement.

Selecting an element

The element selector lets you pick an existing element on your website as the location for your Qonfi placement.

Important: Make sure the Qonfi script is installed on the page where you want to select an element. If the script is not installed, the element picker will not work (see step '1 Adding the Qonfi script to your website'). 

1. Click the edit icon next to Element in the Location section.
2. In the Select element dialog, enter the URL of the page where you want to implement Qonfi.
3. Click Select element. Your website opens in a new tab with the Qonfi element picker active.
4. Select the element on your page where you want your Qonfi placement to appear.
5. A popup appears asking 'use this selector'. Click 'use'.
6. The CSS selector of the selected element is automatically filled in under Element.
7. Click on Save within the Qonfi interface on the top right. 

If you already know the CSS selector of the element you want to target, you can also click Enter CSS selector manually in the Select element dialog and type it in directly.

Once everything is saved, your Qonfi placement will automatically appear on the pages you specified, in the element you selected. 

Option 2: Manual placement

You can also add the Qonfi HTML element manually using a CMS like WordPress or you can implement the Qonfi HTML element directly in the website code. 

2.1 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. Click on Publish flow and click on the step 'add to website'. 
2. Click on 'manual placement' in the top right corner.
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. 

2.2 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. Click on Publish flow and click on the step 'add to website'. 
2. Click on 'manual placement' in the top right corner.
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 flow 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 flow and only show the changes to your visitors once you're happy with the changes you made.