All Collections
Use Cases
Survey Questions with Graphics
Survey Questions with Graphics

Describes setup for using our HTML actions in order to create survey questions using pictures as visual prompts

Landon Anspach avatar
Written by Landon Anspach
Updated over a week ago

Many brands want to know which color pattern is more attractive to a customer. Or they want to know which ad version someone saw on a particular social media platform. It can be cumbersome and confusing to attempt to describe a picture without a visual reference. So we're providing this opportunity to create survey questions that utilize those pictures, short clips, or GIFS!

Single Graphic Action

The simple version is set up to allow you to upload one picture, ad clip, or gif. This is best used for a single graphic that you are asking questions about to your customers. Think something like a "Check out our new product and answer a few questions about it here!" type of situation. No need to compare different visuals or choose between multiple options. Just show the graphic and move on to the questions.

Within your survey builder (either as your first question or add to an existing survey), click the Search Question Library button.

In the following modal, click the Actions menu, search for Single Graphic, and add the action to your survey.

GIF/Image File

From there, upload your image or GIF by going to Insert->Image within the HTML editor.

If the image you're using is already hosted online, input your own source location.

Otherwise, upload the file on your own.

Video Clip

If you'd rather show a short video clip of your product or something else, you'll first need to upload the video to YouTube, Vimeo, or some other place. Once complete, use Insert->Media to connect your clip to the KnoCommerce question.

Use the General tab if you have your own link (like for YouTube or Vimeo) or utilize the Embed option if you have your own embedded HTML to insert.

Multiple Graphics Action

This multiple-graphic action will allow your customers to compare several images or GIFs to determine their favorite visual or to indicate which ones look familiar to them. If you're experienced with HTML, go nuts! You don't need our help to get this set up. But if you're unfamiliar but would still like to utilize this action follow these instructions.

First, go to the Question Library to find the action.

Then find the Multiple Graphics Action and add it to your survey.

Replace GIF/Image

Now you'll have this view of the Action.

From here, go to Insert -> Image.

And finally, Upload the image that you would like to insert in the place of the Image 1 placeholder.

Repeat those steps for Images 2 through 4.

If you'd like to make other adjustments to the HTML, open the HTML editor here.

For instance, to remove the black borders, delete only the following: border: 1px solid black; from each of the four p-blocks.

For additional formatting and changes to this HTML, please consult a developer or reach out to KnoCommerce Support.

Did this answer your question?