Embed your Capsule

A simple way to embed Capsule content into your website

Basic Usage
The simplest form of the embed code will display a grid with your Capsule content, and inherits colors/styles from your Capsule:
<div>
  <script>(function(c,a,p,s,u,l,e){c["_capsuleDotVideoIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    if(!e){u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;
    l=a.currentScript?.parentElement||a.body;l.appendChild(u);}}})
    (window,document,"capsuleDotVideo","https://embed.capsule.video/grid.js");
    capsuleDotVideo({
      slug: "your-capsule-slug",
      el: document.currentScript.parentElement
    })
  </script>
</div>
The slug is your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the domain replacing "." with "-" (e.g. www-yourdomain-com). Feel free to use demo-pro for integration testing.
​
Additional Parameters
Various parameters can be added to control what content is displayed and how it's presented:
<div>
  <script>(function(c,a,p,s,u,l,e){c["_capsuleDotVideoIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    if(!e){u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;
    l=a.currentScript?.parentElement||a.body;l.appendChild(u);}}})
    (window,document,"capsuleDotVideo","https://embed.capsule.video/grid.js");
    capsuleDotVideo({
      slug: "your-capsule-slug",
      el: "#your-div-id",
      category: "some-category-name",
      contentSlugs: ["yIxKz6N2nlrn", "R_ONI1r1nloy"],
      cols: 4,
      mobileCols: 2,
      maxItems: 10,
      cta: false,
      metaDisplay: true,
      favoritesOnly: true,
      animated: false,
    })
  </script>
</div>
Parameter
Description
Default
slug
Your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the full domain replacing "." with "-" (e.g. www-yourdomain-com)
​
el
Optionally specify an #id or .class to append Capsule content within an existing div rather than inline below this script tag
​
category
Specify a category from your capsule to only display content from that category
​
contentSlugs
Specify one or more content item slugs, in the order you want them to appear. These slugs are the unique ID at the end of the URL when viewing a video in a public-facing Capsule. This overrides the category and favoritesOnly parameters.
​
cols
Number of columns
5
mobileCols
Number of columns on mobile (portrait-oriented display)
3
maxItems
Maximum number of videos to display. Currently, this can be set to anything lower than 25, but not higher.
25
cta
Whether to display the Call To Action (record button at the bottom), unless set to false or if the Capsule is no longer accepting submissions.
true
metaDisplay
Whether to metadata over the thumbnails (e.g. name, category)
false
favoritesOnly
Only display content favorited in Capsule Admin
false
animated
Whether to animate the thumbnails
true
​
Alternate Method (iframe)
While the embed code is preferred, in some cases it may be necessary to embed the entire capsule experience on another site via an iFrame.
Here's an example  iframe tag that requests the necessary permissions:
<iframe src="https://your-capsule-url" allow="camera; microphone; clipboard-read; clipboard-write" width="100%" height="100%" frameBorder="0" allowusermedia></iframe>
If you do not have a Capsule yet, you can use "https://demo-pro.capsule.video" as the URL for testing.
The parent page must be loaded via https (SSL/TLS) to enable camera/mic usage.
​

Last updated 1 month ago

Parameter	Description	Default
slug	Your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the full domain replacing "." with "-" (e.g. www-yourdomain-com)
el	Optionally specify an #id or .class to append Capsule content within an existing div rather than inline below this script tag
category	Specify a category from your capsule to only display content from that category
contentSlugs	Specify one or more content item slugs, in the order you want them to appear. These slugs are the unique ID at the end of the URL when viewing a video in a public-facing Capsule. This overrides the category and favoritesOnly parameters.
cols	Number of columns	5
mobileCols	Number of columns on mobile (portrait-oriented display)	3
maxItems	Maximum number of videos to display. Currently, this can be set to anything lower than 25, but not higher.	25
cta	Whether to display the Call To Action (record button at the bottom), unless set to false or if the Capsule is no longer accepting submissions.	true
metaDisplay	Whether to metadata over the thumbnails (e.g. name, category)	false
favoritesOnly	Only display content favorited in Capsule Admin	false
animated	Whether to animate the thumbnails	true