iFrame Embedding Example

Find the iFrame code

Embedding Stim Admin viewer into a survey is very easy. Simply go to the “Embed” section in the menu in Stim Admin, and select your project.

You will then see some options to select which Stims to show, and their ordering. You can also toggle emotions on and off. The default options are usually fine.

Click the “Generate Code” button to generate Javascript code that you can paste into your survey platform. By default, the Javascript embed option is shown. Click the “IFRAME” tab to show the Iframe code.

Note that the iframe option is not available for the Implicit test.

Understanding the code

The code provided by StimEngine will look something like this:

<iframe src=”https://teststim.beaglex.com/stim-engine-integration-demo/n-stims.html?config={&quot;stimUids&quot;:[&quot;e642855860ad4cac34da9307654bd8aa&quot;,&quot;76781d52fc0009639ba89f2a6371901f&quot;],&quot;pointSetsFirst&quot;:3,&quot;pointSetsBetween&quot;:1,&quot;pointSetsLast&quot;:3,&quot;emoEnabled&quot;:true}” width=”100%” height=”480″ ></iframe>

This can be copy and pasted into anything that supports the display of HTML code. Try copying the code above and pasting it here:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Copy and paste all the code in italics into the left panel of the test page. You can replace all other code that is in there and only leave the iFrame code.

NOTE: width=”100%” height=”480″ have been added into the iFrame code above this forces the height and width to ensure the iFrame displays correctly in this example. You are welcome to adjust these parameters also, or modify the CSS to display correctly in your website.

Code Breakdown

Here is a breakdown of what is contained in this URL.

&quot;

&quot; is the encoded equivalent to the quotation mark (“) symbol and will decoded automatically once the iFrame is launched. &quot; needs to be used to replace any quotation marks (“) after the src=” section of the iFrame as the next uncoded quotation mark (“) will end the source.

NOTE: Missing or untranslated quotes will cause the iFrame to not initialize properly, so check and replace any additional quotation marks (“) in the code with encoded (&quot;).

StimID

This sequence of digits relates to the ID of the creatives or Stims being viewed in this session. Multiple Stims are separated by a comma (,) as seen above (Stim 1, Stim 2)

Calibration Points Before / Between / After

These numbers dictate the number of calibration points shown before, between and after each stim. This number is multiplied b a factor of 5. As such the number ‘3’ represents 15 calibration points.

The number of points between stims will only impact the session if there are multiple stims being shown in a session.

Enabling emotion

Emotion tracking can be disabled by altering the ‘true’ to ‘false’. This can be done in the UI in StimEngine or by changing the code. This will disable emotion facial coding but does not alter any other portion of the user experience.

Language

You can set the instructions and display language for the viewing process. Only specify supported languages.

ParticipantID

This is the ID of the user participating in the session and will aid in identifying participants in the StimEngine UI. This is optional, but will help you cross-reference results between the survey platform an Stim Admin, or to resume a participant’s session after they have completed the Stim Admin task.