Voxpopme: Capture Video Feedback Using Pendo Guides

Overview

Voxpopme’s capture technology makes it possible to collect user-recorded video feedback using Pendo Guides, on any device, in any language, at a previously unattainable speed and scale. When paired with Voxpopme’s video analytics and editing tools, enterprises can easily interpret large volumes of video feedback to better understand the user experience with your product and highlight friction points or areas of delight.

Ingredients (What You Need)

  • Voxpopme Subscription (Free 60 Day Trial Available)
  • Pendo with Guidance

Benefits

  • Easily integrate your users into your product development and improvement process
  • Take advantage of in-the-moment feedback, providing real, genuine emotion, creating empathy with your users
  • Identify and improve product features by targeted video capture at the right time in the user journey
  • Bring your users into the heart of product development and make data-driven decisions to truly create the best outcomes for your customers
  • Go beyond quant understanding of your product's usage/experience rating with richer feedback
  • Access a library of human feedback at your fingertips to easily identify patterns in your users’ experience to prioritize development opportunities

How To Make It

By the end of the recipe, you should be able to collect video feedback using Pendo’s “Rate Your Experience” Guide.

Part 1: Retrieve Your Voxpopme Project Identifier

To be able to safely collect video feedback using Voxpopme’s Capture Widget, you will first need to find the Identifier of the Voxpopme project you would like to store the recorded responses in.

Before we begin, make sure that the project you have set up is of “Embed” type, meaning you will be given an option to collect responses by embedding our Capture Widget into a Pendo Guide.

Navigate to your project and click on the “Project Details” tab. Inside, you will see “Project link”, copy the random sequence of characters at the end of the URL as indicated below. This is your “Project Identifier.”

mceclip0.png

 

Part 2: Embedding the Widget

Step 1: Create a New Guide

Embedding Voxpopme’s Capture Widget is extremely quick and straightforward. We’ll begin by creating a new Pendo Guide. In this example, we’ll use the “Rate Your Experience” template with the Scale Poll. So go ahead and create one, give it a name, and launch the In-App Designer.

mceclip1.png

 

Step 2: Make the Guide Wider

Voxpopme’s Capture Widget requires a certain amount of space on the screen to be fully visible, therefore the Guide we’re creating might not be suitable for mobile devices. In this step, we’re going to increase the width of our Guide, and adjust its positioning.

Click on the border of the Guide to open the Guide’s Container settings. Next, change the width of the Guide to be a minimum of 565px. We also recommend adjusting the top and bottom paddings of the Guide, to make the Guide slightly smaller horizontally – when we’re done embedding the Capture Widget.

mceclip2.png

 

Step 3: Insert a New Code Block

Right below the Scale Poll, insert a new Code Block, this is where we’ll put the Capture Widget.

mceclip3.png

 

Step 4: Edit the Code Block

In the HTML tab, copy and paste the following snippet of code:

<div class="recording-widget-container">

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

</div>

In the CSS tab, insert the following snippet, this will ensure the widget is nicely positioned:

.vpm-responsive-container {
    margin: 10px auto !important;
}

.recording-widget-container {
    height: 465px;
}

And lastly, in the Javascript tab, insert the following code to load the widget, ensuring that the Project Identifier you fetched in Part 1 is inserted under the project_id field:

window.vpm_widget_config = {

    project_id : "your_project_identifier",

    settings: {

        locale: “en_US”

    },

    additional_data: {

    

    },

}

!function(a,b,c,d){function e() {var a=b.createElement(c);a.type="text/javascript";a.src=d;var e = b.getElementsByTagName(c)[0];e.parentNode.insertBefore(a,e);}a.attachEvent ? a.attachEvent("loadVoxpopmeWidget",e) : a.addEventListener("loadVoxpopmeWidget",e,!1);window.dispatchEvent(new Event("loadVoxpopmeWidget"));}

(window,document,"script","https://capture.voxpopme.net/main.js");

 

Step 5: Lights Camera Action!

That’s it, you should have a working Capture Widget, ready to collect invaluable feedback from your customers!

Although the Capture Widget is now fully operational and is ready to be used, in Part 3 we’re going to go over some of the next steps you can take to make your new Guide even better.

mceclip5.png

 

Part 3: Next Steps

Sending Pendo Data to Voxpopme

When a response is recorded through the Capture Widget, you can attach additional data to be sent to the Voxpopme platform together with the video recording. This can help you link the particular Pendo Visitor to their recording, filter video responses by the score selected in the Scale Poll, and so on.

To do that you will have to modify the additional_data object inside of the Capture Widget’s Javascript configuration snippet. Following the example of exposing the Visitor ID in this article, you can attach it to the recording like so:

window.vpm_widget_config = {

    project_id : "your_project_identifier",

    settings: {

        locale: "en_US"

    },

    additional_data: {

        "Visitor ID": document.getElementsByClassName("_pendo-hidden-item_")[0].innerHTML

    },

}

 

Changing the Locale of the Capture Widget

Capture Widget supports a wide array of locales. For the full list of languages, and how to update the locale, please see this help article.

Disabling “Submit Feedback” Button Until a Response is Recorded

If you would like to hide or disable the Submit Feedback button until the respondent has recorded a video response, first we need to find the ID of the button element, by inspecting the HTML:

mceclip6.png

 

Next, at the bottom of the Capture Widget’s Javascript snippet in the Code Block, add the following to hide the button when the Guide is first shown to the user. Make sure to replace the ID below with the one we got when inspecting the button element:

document.getElementById('submit-feedback-button-id').style.display = "none";

And lastly, we need to show the button when a response is recorded. This can be done by modifying the Capture Widget’s Javascript configuration:

window.vpm_widget_config = {

    project_id : "your_project_identifier",

    settings: {

        locale: "en_US"

    },

    additional_data: {

    },

    enable_next_button: function() {        document.getElementById('submit-feedback-button-id').style.display = "block";

    }

}

That’s it! Now, when the Guide first loads, we immediately hide the “Submit Feedback” button and when the response is successfully recorded – we bring it back. 

Having Problems?

If you’re experiencing problems with the setup, please see the following help article which contains the full Capture Widget embed guide.