Custom HTML CTA Examples

Want to take your CTAs to the next level? Check out this guide for advanced HTML CTAs.

Note
Calls to Action cannot be added to audio files.

The Call to Action (CTA) feature is awesome, but sometimes it doesn’t quite do what you need. Check out our guide (and copy our code) to make CTAs all your own.

Alert
These HTML CTA examples are just that — examples for you to borrow and change as needed. If they stop working or you need to customize them further, we recommend diving into the wild world of code, or calling a developer friend for help.

CTAs in Wistia are wonderfully versatile, and custom HTML CTAs allow you to do a ton of fun things with Calls to Action. Before we jump right into the examples, it’s important to note that custom HTML CTAs allow for HTML and some minor CSS. JavaScript will be stripped out, so don’t go too advanced.

Tip
Need to get around this limitation? You’ll want to add an HTML CTA with the plugin example over on the embed options page.

Adding a Custom HTML CTA

To add your custom HTML CTA navigate to the video page in your Wistia account. Something like this: https://support.wistia.com/medias/64jchp8ot0.

  1. Next, click Customize within the video page. This will open the Customize panel.
  2. Select Call to Action.
  3. From the dropdown menu change the Type to HTML.
  4. Paste in your HTML code (check out our examples below!), and don’t forget to Save your settings.
Note
It’s important to note that custom HTML CTAs don’t show up in your action stats. Since you’re taking the viewers away from Wistia, we can’t track where they’d land!

CTA With Multiple Choices

Maybe one link in a CTA isn’t enough for you — maybe you’d like to have more than one option for your viewers when the video finishes. In that case, you need the custom HTML CTA with more than one choice.

Quick recap: here’s how to add a custom HTML CTA to your video.

In the case of this example, you’ll want to change out the https://link1.com links, and the copy Link 1.

Here’s your example code:

<a href="https://link1.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px;">Link 1</a>
<a href="https://link2.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px">Link 2</a>
<a href="https://link3.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px">Link 3</a>

And here’s how that looks:

Want to add some more styling to each button?

Here’s that example code from above, but with styling divs added:

<div style="height: 100%; width: 100%; display: flex;"><div style="margin: auto;"><div style="height: 100%; width: 100%; display: flex;"><div style="margin: auto;">
    <a href="https://link1.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px;">Link 1</a>
    <a href="https://link2.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px">Link 2</a>
    <a href="https://link3.com" style="color:#54bbff;text-decoration:none;border:2px solid #54bbff;border-radius:4px;padding:8px 14px;font-size:30px">Link 3</a>
</div></div></div></div>

Here’s how that looks:

Finally, here is another example with the https://link1.com links, and the Link 1 copy switched out:

<div style="height: 100%; width: 100%; display: flex;"><div style="margin: auto;"><div style="height: 100%; width: 100%; display: flex;"><div style="margin: auto;">
  <a href="https://media.giphy.com/media/cPxRDvlSj9QKA/giphy.gif" style="color: #54bbff; text-decoration: none; border: 2px solid #54bbff; border-radius: 4px; padding: 8px 14px; font-size: 30px;">Door 1</a>
  <a href="https://media.giphy.com/media/ncWIVXM13MFX2/giphy.gif" style="color: #54bbff; text-decoration: none; border: 2px solid #54bbff; border-radius: 4px; padding: 8px 14px; font-size: 30px;">Door 2</a>
  <a href="https://new1.fjcdn.com/gifs/Looking+for+the+start+of+looping+gifs_6461c6_4573742.gif" style="color: #54bbff; text-decoration: none; border: 2px solid #54bbff; border-radius: 4px; padding: 8px 14px; font-size: 30px;">Door 3</a>
</div></div></div></div>

And here it is on a video:

Tip
Need the link to open in a new tab instead of the current one? Add target="_blank" after the href value.

Play Another Video CTA

If you’d like to offer the opportunity to play another video at the end of the first video, you’ll want to check out our embed links tutorial. We’ve got a simple walkthrough over on that page to show you how to choose to play another video directly after one finishes!

Multiple Choice Play Another Video CTA

Like the idea of playing another video, but want to offer viewers multiple choices? We’ve got you covered with this example.

Don’t forget–;here’s how to add a custom HTML CTA. In the case of this example, you’ll want to change the hashed ID of the videos to the ones you’d like to use. Not sure how to find a hashed ID? Check the embed links tutorial for a quick guide.

Here’s the example:

<a href="#wistia_30q7n48g4f"> Next Up: Make French Toast</a><br/>
<p> Or you could watch... </p>  
<a href="#wistia_342jss6yh5">Our Wistia Team Intro!</a><br/>

And here it is on a video (psst–;this one’s at the end of the video!):

Styling the Text of a CTA

Want to have a regular link, but not a big fan of Wistia stylings? With the custom HTML CTA you can add your own custom code to make the link all your own. As a reminder, here’s how to add a custom HTML CTA.

Here’s our quick example:

<a href="https://link.com" style="color:#fff5ee;text-decoration:none;font-size:40px;font-family:Helvetica">Hi there!</a>

And a real life example for you to look at:

Custom-Sized Image CTA

Like the Image CTA idea, but need to make some simple tweaks? If your image is a different size than your video, you’ll want to use the custom HTML CTA.

We recommend uploading your image somewhere (maybe even Wistia), and grabbing a link directly to that image–;you can usually do this by right-clicking and copying the image URL/link. (Depending on the browser and operating system that option will be labeled differently.)

Once you’ve got a link to the image, you can pop it right into a little image HTML tag, set a width and height on it, and use the custom HTML CTA with your new HTML code. Make sure to follow the guide above if you need help adding one.

Here’s the example for you to grab and customize:

<div style="width:100%;height:100%;">
<a href="https://wistia.com/wistiafest">
<img src="https://embed-ssl.wistia.com/deliveries/c41961b974b01f4003167f735d6ef683d56ef3d7.bin" width="600" height="400" />
</a>
</div>

And here’s the example for you to see embedded:

Tip
As the image you’re using is most likely a fixed size, we recommend using a fixed size embed with this example.

Survey Viewers with a CTA

Our friends at FormKeep have put together an awesome custom HTML CTA that allows you to ask your viewers as many questions as you’d like. Keep in mind, the data does require a FormKeep account, but check it out over on the FormKeep help page.