Web Embeds

Introduction

Vouch Embeds provides the quickest and easiest way to showcase your best responses across your Digital Properties in just a few clicks.

Vouch offers eight Embed types for all users, Button, Card, Dialogue, Email, GIF, Inline Player, Jumbo and Popover. Further information around each embed type and how it can be configured within the Admin User Interface can be found on the Help Centre.

Embed Code

Vouch Embeds offer ways of adding an Embed to a website or application. The first, is via our Javascript Embed, which will render natively on the respective page / app it has been added. The second is oEmbed / iFrame (not supported on Popover) which will render as an iFrame, even using a traditional iFrame code, or using oEmbed.

The structure for each of these Embed types is listed below:

Javascript Embed

<script
  type="module"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
  src="https://cdn.jsdelivr.net/npm/@vouchfor/uikit/embed/vouch-embed-all.bundle.js"
></script>

<vouch-embed-{{embedtype}}-player
  apikey="{{apikey}}"
  vouchid="{{vouchid}}"
/>

oEmbed / iFrame

https://app.vouchfor.com/embed/{{vouchid}}/{{embedtype}}?apikey={{apikey}}

Both Embed types can support additional configuration parameters, which are listed below.

Parameters

Vouch Embeds have been built in a manner so brands can manipulate the design of their respective Embeds without needing to log into the Vouch Platform.

Required

Parameter	Description	Expected Value
embedtype	The Embed type layout you wish to render.	One of: button, card, dialogue, inline-player, jumbo, thumbnail, popover
vouchid	Hash ID of Vouch, Upload, Recording or Playlist.	10 digit hash for respective video (eg. 4aLbmxveLp)
apikey	API Key specific to the Vouch space.	61 character API Key

Optional

Parameters	Description	Expected Value
showname	Show Customer Name	True / False
showlogo	Show Organisation Name + Logo	True / False
showcaption	Show Captions in Embed	True / False
showcontrol	Show controls in Embed	True / False
answeronly	Show only answers (Only applies to Inline)	True / False
autoplay	Autoplay Embed	True / False
autoplaynext	Autoplay going to next video	True / False
questions	Decide what question(s) to show in Embed	String (eg. 1,4,5)
orientation	Layout of the Embed	One of: portrait, square, landscape
responsive	Layout of Embed (overwrites Orientation).	True / False
displayname	Overwrite the Customer Name value	True / False
fitcover	Crop & Centre the content.	True / False

CSP

If you have a CSP (Content-Security-Policy) defined for your website, make sure you add the relevant Vouch URLs to the allowed origins:

https://d157jlwnudd93d.cloudfront.net — the CDN we're serving the videos from
https://vouch-media.vouchfor.com — separate server we're serving the videos from for iOS devices
https://embed.vouchfor.com — our embed API endpoint
https://cdn.jsdelivr.net — the CDN hosting out scripts

Disable caching

If you use a CRM like Worpress, and you're using a plugin to cache any Javascript assets on your site, you should disable this caching for resources from https://cdn.jsdelivr.net. The CDN already caches the scripts for you, and it allows us to clear the cache when we release new versions. If you cache the scripts on your side, it means you won't get any bugfixes or improvements when we ship them.

Common issues

I added the embed script, but I can't see the embed. Or you can see the embed, and the video thumbnail shows correctly, but if you try to play the video the player goes blank.

If your website uses a Content-Security-Policy, you likely forgot to add the Vouch URLs to your allowed origins. See CSP section above.