Launching a Channel Popover from a Call to Action

Learn how to launch a Channel popover directly from a Call to Action in your video.

You can add a channel popover as a Call to Action in your video. When your Call to Action pops up, this can be the popover embed for your channel! Pretty sweet, right?

In order to set this up, take a look at the following steps.

  1. Grab your video’s standard embed code by heading to Embed & Share. Here, select the Inline, Standard Embed Code.
  2. You can either add a custom embed option to the HTML, or you can add the channel popover containers to your video in the Customize menu as a Custom HTML Call to Action.
  3. You’ll want to be sure to add your channel’s JavaScript and stylesheet to your webpage before your video’s embed code.

Here’s an example of what that code looks like, with the Hashed IDs substituted for placeholders (hashed_id), rather than the usual 10-digit string ID:

<!-- Script and stylesheet from popover channel embed, this should live on the page with your other video-->
        <script src="https://fast.wistia.com/assets/external/channel.js" async></script>
        <link rel="stylesheet" href="https://fast.wistia.com/embed/channel/project/channel_hashed_id/font.css" />   

        <!-- Regular Wistia embed -->
        <script src="https://fast.wistia.com/embed/medias/video_hashed_id.jsonp" async></script>
        <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
        <div class="wistia_embed wistia_async_video_hashed_id seo=false" style="height:360px;position:relative;width:640px">
          <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
            <img src="https://fast.wistia.com/embed/medias/video_hashed_id/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" />
          </div>
        </div>
        <!-- Custom embed options for your embed -->
        <script>
        window._wq = window._wq || [];
        _wq.push({
          id: "video_hashed_id",
          options: {
            plugin: {
              "postRoll-v1": {
                // We want to put the container HTML from our channel embed in here. Important to use single quote marks for this string since the HTML content uses double quotes.
                raw: '<div class="wistia_responsive_padding" style="padding:100.0% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_channel wistia_async_channel_hashed_id mode=popover" style="height:100%;position:absolute;width:100%;"></div></div></div>',
              }
            }
          }
        });
        </script>
GlitchGlitch
Check out this Glitch page for an example of that in action!

You can also add the channel popover containers to your video in the Customize menu. For this, you’ll want to add a Call to Action to your video and then select the HTML option.

Paste your channel’s popover containers in the HTML box, save, and you’ll be good to go! Those containers will look like the following, with the hashed_id specific to your channel.

<div class="wistia_responsive_padding" style="padding:100.0% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_channel wistia_async_channel_hashed_id mode=popover" style="height:100%;position:absolute;width:100%;"></div></div></div>
Note
Using this method, remember that you’ll still need to add your channel’s JavaScript and stylesheet to your webpage before your video’s embed code.

Have questions? Running into some bumps in the road? Get in touch with our Support Team and we’ll be happy to help out!