How to Integrate Voiceform Widgets in Decipher

Enhance your Forsta Decipher surveys by embedding Voiceform widgets, enabling powerful voice recording and AI-driven follow-up features. Follow these steps to seamlessly integrate Voiceform questions into your Decipher survey.

Step 1: Log In to Your Accounts

Log in to both your Decipher and Voiceform accounts. If you don’t have a Voiceform account yet, you can create one by visiting the Voiceform website.

Step 2: Create Your Survey in Voiceform

In the Voiceform platform, create a new survey and add your desired questions. For example, you can include a voice response question such as, “Why do you like our product?” and enable AI Probing with a goal like “Find 2 main reasons why the respondent like our product.” Once your survey setup is complete, publish it.

Step 3: Add the Voiceform JavaScript Library to Decipher

In your Decipher survey project, access the Survey Editor and navigate to the Source Code view. To include the Voiceform functionality, insert the following JavaScript snippet into the <head> section of your survey template:

<script
  type="text/javascript"
  src="https://cdn.voiceform.com/widgets/next/widgets.umd.js"
></script>

This step ensures that the Voiceform widgets will function properly within your Decipher survey.

Step 4: Embed the Voiceform Question in Decipher

Retrieve the Voiceform Widget Code

In Voiceform, navigate to the Share tab.
Select the "Single Question" widget option.
Choose the question you created from the dropdown menu.
Optionally, you can decide whether to hide the question or the "Next" button, but we'll leave them visible for now.
Click the "Get Code" button and copy only the snippet under .

Insert the Widget Code in Decipher

In Decipher, go to the Survey Editor and locate the question where you want to embed the Voiceform widget.
Switch to Source Code view.
Paste the Voiceform snippet into the appropriate location within the <body> of your survey page.

Example using the <html> tag:

<html label="voice1" where="survey">
    <vf-widget
        data-mode="single-question"
        data-question-id="YOUR_VOICEFORM_QUESTION_ID"
        data-hash="YOUR_VOICEFORM_SURVEY_HASH"
        data-response-id="${respid}"
        data-psid="${psid}"
    ></vf-widget>
</html>

This code integrates the Voiceform widget directly into your survey, enabling voice recording and response capture.

Track Panel & Respondent IDs (Optional)

To capture respondent data such as Panel or Respondent IDs within Decipher, you can pass these as parameters within the Voiceform widget code. These IDs can be dynamically populated using Decipher’s variables.

Example using the <html> tag:

<html label="voice1" where="survey">
    <vf-widget
        data-mode="single-question"
        data-question-id="YOUR_VOICEFORM_QUESTION_ID"
        data-hash="YOUR_VOICEFORM_SURVEY_HASH"
        data-response-id="${respid}"
        data-psid="${psid}"
    ></vf-widget>
</html>

Step 5: Save and Test Your Survey

Once you’ve embedded and customized the Voiceform widget, save your survey. It’s essential to thoroughly test the survey to ensure that the Voiceform question integrates and functions as expected within your Decipher project.