Voxpopme

This article will show you how to integrate Voxpopme into your survey 

Background

Voxpopme is a third party integration that will allow you to have respondents submit video open ends for a multitude of reasons. 

See the link below for more details:
https://site.voxpopme.com/

Step 1: Voxpopme Account

1. You will need a Voxpopme Account. This will allow you to configure your project. If you already have one, skip this step.
   1. Click here to go to the Voxpopme website
2. Log into your Voxpopme Account and configure your project
   1. Click here to review documentation on the Voxpopme website
3. The following steps below will help your configure some of the missing items that are specific to our survey platform. 

Step 2: Programming a Radio Question

1. Add a 'Radio Question' where you would like the Voxpopme Integration to occur in your survey
   1. See article: Standard Question: Radio items (Single Select)
2. Add your question text as needed
3. Add the following code to the 'Source Code Editor' of the 'Footnote' field
   1. See article: Source Code Editor
   2. Here is the code: 

   <div class="vpm-capture-widget"> </div>
   		

4. Add the following code to the '+ Javascript' field
   1. See article: Adding JavaScript and/or CSS to a Question
   2. Here is the code:
      

      var $ = jQuery, q = $("[data-qnum='Q405vid']"); // UPDATE THE QUESTION NUMBER TO MATCH YOUR RADIO QUESTION
      
      window.vpm_widget_config = {
        "project_id" : "abc1234567890", // UPDATE ON EVERY SURVEY
        "settings" : {
          "locale" : "en_US"
      	},
        "additional_data" : {
          "ID" : "[[ID]]",
          "Token" : "[[RESP_TOKEN]]",
          "Question" : "Q405",
          "Age" : "[[SC2_1]]"
        },
        "disable_next_button" : function() {
          //cmSurvey.disableNextButton(true);
        },
        "enable_next_button" : function() {
          q.find(".cm-radio-response-set li:first-child input[type='radio']").prop("checked", true);
          q.find(".cm-radio-response-set").slideUp("slow");
          cmSurvey.disableNextButton(false);
        }
      };
      
      q.find(".cm-radio-response-set input[type='radio']").change(function(){
        cmSurvey.disableNextButton(false);
      });
      
      // Used to speed up the NEXT page button actions
      cmSurvey.disableNextButton(true);
      		

5. Add the following code to the '+ CSS' field
   1. See article: Adding JavaScript and/or CSS to a Question
   2. Here is the code:
      

      .vpm-responsive-container {
        margin: 0 auto;
      }
      
      .cm-radio-response-set li:first-child {
        display: none;
      }
      		

6. Add your response list. You will have two items:
   1. Punch #1 = "Video Submitted". This will be hidden from all respondents and will be coded if a Video was submitted
   2. Punch #2 = An opt out. Something such as, "I'm having technical difficulty or I no longer would like to record a video response". This will be shown to all respondents so they can skip the Video portion and continue with the survey. 
      

Step 3:  Static Element

1. On the same page as your 'Radio Question' from step one, add a 'Static Element' underneath it
   1. See article: Standard Question: Static Elements
2. Add the following code to the 'Source Code Editor' of the 'Question Text' field
   1. See article: Source Code Editor
   2. Here is the code: 

   <script src="https://capture.voxpopme.net/main.js" async=""></script>