Recorder Embeds
Overview
The Vouch Recorder Embed replicates the Vouch recording experience in your own webpage. This enables businesses to collect video responses within their own workflows, maintaining the look and feel of their brand and removing the need to redirect respondents to the Vouch recorder.
<iframe
id="a9SF1w5ip4"
title="Vouch Developer Portal Demo"
src="https://app.vouchfor.com/c/a9SF1w5ip4?permissions=prompt&nosupport=true&embed=inline"
sandbox="allow-scripts allow-same-origin allow-forms"
allow="camera https://app.vouchfor.com; microphone https://app.vouchfor.com; display-capture https://app.vouchfor.com; fullscreen"
width="100%"
height="600"
style="border: 0 none"
></iframe>
Iframe height
The iframe gets a fixed height through the attribute in the example above. Make sure to adjust that height to your needs to make the embed look good in your specific website / UI.
Configuration Options
The Vouch Record Embed supports the ability for key respondent details to be pre-populated, such as name, email address and company..
Through this feature, not only does it remove the need for end users to manually add these details, but it also allows for brands to get greater visibility around who has started or completed a campaign.
Available Parameters
You can optionally add any of the below parameters to your iFrame URL to identify your respondents by adding each parameter as a query parameter within the URL.
{embedUrl}&name={name}&email={email}&company={company}&id={id}
| Parameter | Description |
|---|---|
| Email address of the respondent. | |
| name | Name of the respondent. |
| company | Company the respondent works for. |
| id | Primary Key or Unique Identifier. |
Recorder Events
Developers are also able to listen to key events which will allow them to trigger custom behaviour when respondents initiate an action within the recording experience.
| Event Name | Description |
|---|---|
| start | Triggered after respondent clicks "Get Started" and initiates recording experience. |
| submit | Triggered after respondent clicks "Submit" to submit their video responses. |
| complete | Triggered after respondent has completed the recording experience. |
{
"event": "vouch:recorder:start" | "vouch:recorder:submit" | "vouch:recorder:complete",
"detail": {
"vouch": { "id": "vvvvvvvvvv" },
"campaign": { "id": "cccccccccc" }
}
}
<!-- Script to be included to bind Vouch Recorder events in JS -->
<script
crossorigin="anonymous"
referrerpolicy="no-referrer"
src="https://cdn.jsdelivr.net/npm/@vouchfor/[email protected]/embed/events.bundle.js"
></script>
<iframe
id="a9SF1w5ip4"
title="Vouch Developer Portal Demo"
src="https://app.vouchfor.com/c/a9SF1w5ip4?permissions=prompt&nosupport=true&embed=inline"
sandbox="allow-scripts allow-same-origin allow-forms"
allow="camera https://app.vouchfor.com; microphone https://app.vouchfor.com; display-capture https://app.vouchfor.com; fullscreen"
width="100%"
height="600"
style="border: 0 none"
></iframe>
const unbindRecorderStart = vouchkit.bindRecorderMessage(window, 'start', (e) => {
alert(`Vouch Event [${e.data.event}] ${JSON.stringify(e.data.detail)}`);
});
const unbindRecorderComplete = vouchkit.bindRecorderMessage(window, 'complete', (e) => {
alert(`Vouch Event [${e.data.event}] ${JSON.stringify(e.data.detail)}`);
});
const unbindRecorderSubmit = vouchkit.bindRecorderMessage(window, 'submit', (e) => {
alert(`Vouch Event [${e.data.event}] ${JSON.stringify(e.data.detail)}`);
});
/**
Unbind event listers to avoid memory leak
unbindRecorderStart();
unbindRecorderComplete();
unbindRecorderSubmit();
*/
Updated over 1 year ago