How to use dynamic images in your flow

With dynamic images, you can automatically show the correct image based on the choices a user makes in your flow. The answer images will dynamically change. The benefit of dynamic images is that you can use the same question and answers, but can display a different image. The user can immediately see what a product or option looks like, based on their choice. In the example below, we explain how to use dynamic images in your flow.

1. Preparing the images

The first step is to prepare your images. To achieve this, use consistent image URLs. The URL of an image should only differ based on the properties. Examples of consistent URLs:

example.com/enscape_type01-super-white-rook-vierkant-rvs.png

example.com/enscape_type01-super-white-helder-rond-staal.png

example.com/enscape_type01-super-white-melk-rond-zwart.png

2. Storing the Images

Next, store the images in the cloud. Like in your CMS or PIM system. If your CMS or PIM does not support the creation of consistent image urls, you can use tools like Cloudinary. 

3. Setting Up Variables

The next step is setting up variables in Qonfi. Go to 'settings > configure > Enable variables'. Variables allow you to store information. For example a user choice or input. In this example, we use variabels to store the choices a user have made, in order to build a dynamic image url based on those choices. 

For example, for the question “Which color do you want?” you can create a variable called kleur. If the user selects an answer “Super White” for example, the value of the variable is super-white. 

Notice that this value (super-white) of the 'kleur' variable now exactly matches the property in the image URL: 'example.com/enscape_type01-super-white-rook-vierkant-rvs.png'. 

Since the variable now matches a property of the image url, you can built dynamic image urls in Qonfi. 

You can apply the same principle for other properties such as model and glas. For each question, add a variable and give it the value that matches the property in the image URL. This way, Qonfi can combine all user choices to automatically show the correct image.

vairiable

4. Building the Image URL Dynamically

Once the variables are set, you can build the image URL dynamically. This means you don’t have to manually enter each URL; instead, you use a general URL where the variables are inserted. For example:

example.com/enscape_{vars.model}-{vars.kleur}-{vars.glas}-vierkant-rvs.png

In this URL, {vars.model}, {vars.kleur}, and {vars.glas} are automatically replaced with the user’s selections. This ensures that the correct image always appears for the right answer, saving time and preventing errors.

superwhite

5. Testing and Checking

After setting up the variables and building the URL, it’s important to test everything carefully. Check that the correct image appears for each choice. Make sure the variable names exactly match the properties in your image URLs. Small differences, such as spaces or capital letters, can prevent the image from being displayed.

If an image does not appear, also check:

  • The file type (e.g., .png)
  • That the image has been correctly uploaded to your CMS or PIM system
  • That the variable and URL match exactly

Documentation