Using images in your surveys and other interactions

When you configure a survey or promotion in your Informizely dashboard you can use images in two ways:

  • You can specify a background image for the survey/promotion widget.
  • You can add images as separate (optionally clickable) items to a survey page.

Using a background image

Exit Popup

Background images are especially useful for exit overlays, like shown above. Each page of a survey or promotion can have its own background image, or none at all.

You can use any image as a background image, even transparent ones. The image will be shown below all other widget items. Text can be part of the image (like "HEY WAIT!" in the image above), or you can use Informizely text items for the text. In any case you should leave enough room for the widget items that must be placed on top of the image. There can be small differences in how text is rendered and wrapped between browsers, so we recommend to leave some free vertical space at the bottom so that page items won't cover important parts of the image when a browser needs a bit more vertical space.

To configure a background image for a page, go to your survey's "Script" tab, select the page in question and open the section named "Background image & Margins" on the right:

Please note: if the widget will be shown in an HTTPS website, please make sure that the image is also loaded from an HTTPS URL.
After entering the URL for the background image, it is shown in the preview section on the left. The controls on the survey page are initially shown at the left/top of the image, but can be positioned by adjusting the extra top, left and right margins.

When a background image is first specified, the widget width is set to the width of the background image. If needed, the widget width can be adjusted on the "Style" tab. It is tried to set the widget height so that the original width/height ratio of the background image is respected for the widget, but when controls fall outside of the bottom the height is increased and the background image is zoomed in so that the complete background is covered.

If you want to use the same background settings for all survey pages, you can copy the settings for the current page to all other pages for which no explicit background settings have been configured by clicking the button "Copy settings to all pages".

If you want to show the survey or promotion on mobile devices, you should set "Optimize on mobile" to "No" (on the "Style" tab), since mobile optimized surveys automatically set a fixed width and height for the widget (thereby zooming in the background image), depending on the device's screen dimensions.

If a survey with background settings does not fit in the browser window the survey widget is scaled to fit, so that the contents will be displayed smaller than intended. This is different from surveys without background settings, where the width is adjusted. To avoid the contents being displayed too small, you should not use very wide background images on mobile devices (you can expect scaling on older mobile devices starting from a width of 320 pixels, or 360 pixels on newer devices).

Please read the section "Image loading" below.

Adding image items to a survey page

Image Left Image Inline Image Right

You can add any number of images to your survey pages. Optionally, an image can have a click action assigned to it.

To add an image to a survey page, go to your survey's "Script" tab and press the button named "Add an item". Then select the item type "Image" and press "Add". A default image will be added as last item on the page (you can change this location by dragging its "Image" title to a new location). You can then specify the URL where the image will be loaded from, or select an image from the image gallery.

An image can be positioned to the left or right of other items on the survey page, or inline. An inline image is shown as a normal item, below a possible previous item and above a possible following item, as shown in the second example above.

By default, the width of the image is set to the maximum available width, while maintaining the original aspect ratio. If you want to set a fixed width and/or height for the image, change the "Size" from "Auto" to "Fixed dimensions". You can then also specify the horizontal alignment (left, right or center). Note that the width of the survey widget is set on the "Style" tab. If the image is positioned left or right from the other items you may want to adjust the width of the survey before setting an explicit image width or height.

Click actions

By default, an image is not clickable. If you want to, you can specify a "click action" for your image. There are four possible click actions:

  • Open a URL, either in the current window or in a new window.
  • Execute some JavaScript code when the image is clicked.
  • End the survey.
  • Go to a specified survey page.

If an image click opens a web page or executes JavaScript code, a survey response will always be registered, even when no questions are answered by the user. In the reporting dashboard the response will show the number of "call-to-actions" that were activated by the user.

Image loading

If your survey runs in an HTTPS website, please make sure that the image is also loaded from an HTTPS URL, otherwise some browsers may complain.

A survey that contains images will only be shown when all of its images have finished loading. When the Informizely code is loaded on a web page, it starts preloading all images of all surveys that can potentially be activated on the page, so that most images will probably have been loaded when the survey needs to be shown.
In order to minimize the load time, we recommend to not use images that are much larger than needed (a bit larger may be wanted, so that the image also looks good when the user has zoomed his browser).