Interaction Embedding Documentation : Helpdesk

To embed a CredSpark interaction in another website, the following code is inserted into the page’s HTML

<script type="text/javascript" src="https://app.credspark.com/embed-v2.js"></script>
<div class="credsparkQuiz" data-quiz-id="test-quiz-id"></div>

The interaction must be Published and the "Start Date and Time" must have already passed in order for the quiz to show up for users to take. The data-quiz-id attribute value (which is “test-quiz-id” in the example above) is the “Embed String” field from the Interaction Overview tab. This is the only data parameter that is strictly required.

UUID Parameter

There is an optional parameter named “UUID”, with an attribute named data-uuid that can be used to pass a value to identify the user taking the Interaction. This is useful if the interaction is embedded on a website that requires users to be logged in. The UUID is associated with the interaction response inside the CS database and is given back in the reports and API results calls. This allows the responses to be linked back to the user account logged in when taking the interaction.

Example:

<script type="text/javascript" src="https://app.credspark.com/embed-v2.js"></script>
<div class="credsparkQuiz" data-quiz-id="test-quiz-id" data-uuid=”user-1234”></div>

Org UUID Parameter

There is another parameter named “org-UUID”, with an attribute named data-org-UUID that holds a unique identifier (assigned by CredSpark and given to developers) for the Organization to associate the responses with. This allows an interaction that belongs to Organization A to be taken by users in Organization B (or C), and have the responses assigned to Organization B for segmented reporting.

Example:

<script type="text/javascript" src="https://app.credspark.com/embed-v2.js"></script>

<div class="credsparkQuiz" data-quiz-id="test-quiz-id" 
     data-org-uuid=”86678b81-727d-4b79-adc6-f6eb4926f4c0”></div>

postMessage Events

During the taking of an embedded interaction, the CredSpark iframe will post several different types of messages which the parent frame/document can act upon. Here are the different types of messages that are sent:

Assessment Page View

This is sent each time a new question is displayed to the user.

Example message (in JSON format):

{
  assessmentPageView: {
    assessment: 'a-nice-survey', page:1
  }
}

Example script:

<script type="text/javascript">
window.addEventListener("message", function(e) {
    if (e.data.assessmentPageView) {
        // Print page number in console
        console.log(e.data.assessmentPageView.page);
    }
});
</script>

Resize Iframe

This is sent each time the height of the content inside the iframe changes.

Example message (in JSON format):

{
  resizeIframe: ‘a-nice-survey-iframe’, 
  height: 600
}

Embedded Registration

This is sent when the user submits a valid registration form. The registration form is displayed after the last question is submitted, but before the results page is displayed (if registration is turned on for the interaction).

Example message (in JSON format):

{embeddedRegistration: {
  formData: {
    assessment_response_id:"127777"
     user[email]:"[email protected]"
     user[first_name]:"Test"
     user[last_name]:"Test"
  },

  quiz: ”quiz-slug-here”
  }
}

Embedded Interaction Finished

This is sent when the user views the results page inside the iframe, signifying they have finished the interaction.

Example message (in JSON format):

{
  embeddedQuizFinished: {
    quiz: ‘a-nice-survey’
  }
}

Assessment Completed

This is sent when the user has submitted a response to the last question. The primary purpose is to allow a partner to handle registration on their own (by having external registration turned on by CredSpark admin).

Example message:

{
  assessmentCompleted: {
    iframeID: 'a-nice-survey-iframe',
    quizID: 'a-nice-survey',
    responseID: 567432,
    resultsUrl: 'https://app.credspark.com/assessments/a-nice-survey/responses/2343242/completed'
  }
}

Here is a complete HTML page that demonstrates how to listen for messages and how to do external registration:

<html>
 <head>
 </head>
 <body>
   <script type="text/javascript" src="https://app.credspark.com/embed-v2.js"></script>
   <script>
     window.addEventListener("message", function(evt) {
       if (evt.data.embeddedQuizFinished) {
         alert(‘embedded quiz finished’);
       }
       else if (evt.data.assessmentCompleted) {
         var iframeID = evt.data.assessmentCompleted.iframeID;
         var resultsUrl = evt.data.assessmentCompleted.resultsUrl;
         alert('custom registration process happens now');
         var iframe = document.getElementById(iframeID);
         iframe.src = resultsUrl;
       }
     });
   </script>

   <h1>External Registration Demo</h1>
   <div class="credsparkQuiz" data-quiz-id="a-nice-survey" 
        style="width: 500px"></div>
 </body>
</html>

Related Articles