Recorder Embed

The Vouch Recorded embeds includes a series of javascript events which can be listened to and used to trigger custom behaviour based upon the respondents actions.

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();
*/