Embedded surveys

When you embed Digital surveys into website pages the survey looks and behaves as an integral part of a website. Embedded surveys work similarly to other Digital web surveys; however, instead of displaying information in a dialog or a separate page, embedded surveys reside inside of a hosting HTML container element created on websites and allocated for this purpose.

Embedded surveys can be targeted to include or exclude visitors on certain pages, or use custom rules to determine whether to display the survey inside the HTML element or not.

Embedded survey.

Display the survey by creating a new HTML element with an ID attribute on a selected web page, then configure the Form Targeting Configuration for Embedded In Page trigger type and specify the ID in the embedded form targeting settings, as described in the following topics:

Setting up an embedded survey

To set up an embedded Digital survey, a webpage or app needs an HTML element to display the form. Define an element with an id attribute to host the embedded survey using an HTML tag such as:

<div id="satisfaction_emb_form" style="height:450px; width:450px;"></div>
Important: The element used for the embedded form must be empty because this is where the Digital survey is displayed. This includes any hidden characters or HTML Entities such as &nbsp (non-breaking space). If it is not empty the survey is not displayed.

To configure Digital to embed the survey at the element with this id, open the Targeting tab of the Embedded Form Settings screen.

Embedded form settings.

Page Element Id (1)
Specify the ID of the HTML element in which the survey should be hosted. In the example DIV tag, the ID of the HTML element is 'satisfaction_emb_form', write this for Page Element Id. The embedded survey then takes the place of this DIV. For size specifications, see Testing/previewing an embedded survey.
Note: Several surveys can target the same element as long as they each have a unique targeting rule condition.
Targeting the following devices (2)
Select any combination of device types. This allows the use of a different survey for each device type with all of them occupying the same DIV based on the targeting settings set for each survey.
Target by Rule (3)
Optionally use Rules (Automation > Rules Engine) to select how to present the embedded survey to the customer.
Exclude visitors on URLs (4)
Specify pages or URL paths on a website to exclude from presenting the embedded survey. If the field is empty, no pages are excluded. Enter one URL per line.
Include visitors on URLs (5)
Specify pages or URL paths on a website to display the embedded survey. If the field is empty, no pages are excluded. Enter one URL per line.

Embedded survey size settings

Specify sizes for embedded surveys on the Form Settings page, which is accessible from Survey Builder. The HTML element that contains the survey can also have size settings, using the height and width HTML attribute (dependent on the HTML tag), and the height, min-height, max-height, width, min-width, and max-width CSS properties.

Embedding a survey into an element does not override any of the attributes assigned to it. For example, if the survey's height or width is between the minimum and maximum attributes of the HTML element, the HTML element's size is adjusted accordingly. If the survey's height or width is larger than the stated property, vertical and horizontal scroll bars are added inside the element.
Note: The survey's buttons are always visible and docked to the bottom of the survey.

In some situations you might need to constrain the survey to a certain area of the page. You should make the constraints flexible enough for the survey to fit in. The survey can be configured to consume the space of the HTML object or have specific size settings. Usually it is easier to set it to consume available space, which means the Web developer needs to place the HTML object in the correct space and might need to add specific classes or CSS to ensure it is constrained according to the website design.

Note: When the survey is either closed or submitted, the size of the hosting element is adjusted according to the displayed content and the defined element properties. It is recommended to test different display options using the preview function.

Testing/previewing an embedded survey

Use the survey preview function to determine possible sizes for the HTML container element and to view how the survey is displayed. Enter the width, minimum height, and maximum height for the HTML container element in the Embedded Form Container Size section (1). Then click Apply Changes (5) for the preview to reload with the survey within an HTML container element of the requested size.

Note: If no value is specified, the preview simulator assumes that this property was not specified at all for the hosting HTML element.

Display settings.