Create an Embedded Content element

Add third-party widgets such as video feedback and chat clients to your survey.

You can use the Embedded Content element to add any third-party widget to your survey, as long as you have the HTML or JavaScript embed code.

For example, you can embed components from:

• CrowdEmotion
• YouTube Player API
• Amazon Twitch

Note:

• Embedded Content elements do not work in survey preview. To test them, go to Distribute and get a test activity link.
• While surveys support mobile, some third-party components may not. You can use survey logic to create branches for desktop and mobile participants if this is the case. For more information, see Create distinct branches for mobile participants in Survey logic.

Embedded Content from the participant's perspective

Modern survey (mobile):

Classic survey (desktop):

Classic survey (mobile):

1. From the Survey Builder Toolbox, under Multimedia Content, do one of the following:
   • Drag the Embedded Content element to the Table of Contents.
   • Click the Embedded Content element.
   
2. In the Table of Contents, click the Embedded Content element.
   The Edit Pane appears.
3. Optional: Edit the Question name.

   Question names:

   • Should be unique.
   • Can contain symbols and all alphanumeric characters.
   • Are not displayed to participants.
4. In the Question text field, enter the question text.
   Note: The recommended character limit is 2500.
5. In the Embed content field, paste the HTML or JavaScript embed code.
   The maximum number of characters in the embed code is 10,000. Depending on the third-party component you want to embed, you may need to edit certain parameters in the code. Refer to your respective third-party documentation.
6. Optional: Pipe answers, profile variables, or respondent variables into the embed code.
   1. In the Embed Content field, place your cursor where you want to insert a pipe.
   2. Click Add a pipe.
      
   3. Select a pipe source.

      Source	Description
      This Survey	Inserts an answer from another question in the survey. If you choose this option, you must then select the question and answer value you want to pipe.
      Respondent Variables	Inserts a respondent variable value. If you choose this option you must then choose which respondent variable to use.
      Profile Variables	Inserts a profile variable value. If you choose this option, you must then select the profile variable.

   4. Click OK.

   The pipe is inserted into the embed code using the format [%PipeName|GUID%], where PipeName is the name of the answer value, respondent variable, or profile variable, and GUID is the variable's unique ID in the application.

   Note: Survey authors are responsible for ensuring the embed code's syntax is valid after they insert pipes.

   For example, consider the following embed code snippet:

   <script>
   var displayType = [%Display Type|30dd879c-ee2f-11db-8314-0800200c9a66%];
   console.log(displayType);
   </script>

   The pipe will resolve correctly. However, the code will have invalid syntax because there are no quotation marks around the Display Type value:

   <script>
   var displayType = Desktop;
   console.log(displayType);
   </script>

   The survey author must type quotation marks before and after the pipe string to make the code valid:

   <script>
   var displayType = "[%Display Type|30dd879c-ee2f-11db-8314-0800200c9a66%]";
   console.log(displayType);
   </script>

   When the pipe value resolves itself, the valid code will look like this:

   <script>
   var displayType = "Desktop";
   console.log(displayType);
   </script>

7. Optional: Add complete/incomplete JavaScript to the embed code.

   By default, the Next button on the Embedded Content element is always enabled. The two lines of JavaScript shown below allow the Next button to be enabled only after participants complete the action required of them in the embedded component.

   <script>
   survey.embedContent.setComplete();
   survey.embedContent.setIncomplete();
   </script>

   This code must be inside script tags (<script></script>) to be valid.

   Note: If you use this code, you cannot have more than one Embedded Content element on the survey page.
8. Optional: You can also:
   • Add an image to a question
   • Hide a question

Tip: Want some ideas for what you can do with an Embedded Content element?

• Add an image slideshow using the Embedded Content element
• Add a Figma file using the Embedded Content element

Parent topic: Multimedia content