Note
Calls to Action cannot be added to audio files.
The Call to Action (CTA) feature is great, but it may not fully meet your needs. Check out our guide (and copy our code) to make your CTA all your own.
Note
These HTML CTA examples are just that : examples for you to borrow and change as needed. If they stop working or you want to customize them further, we recommend calling a developer friend for help.
Wistia CTAs are wonderfully versatile, and custom HTML CTAs offer even more flexibility. Before we jump into the examples, it’s important to note that while custom HTML CTAs allow for HTML and some minor CSS, JavaScript will be stripped out.
Tip
Want to get around this limitation? Check out the plugin example shown in our developer documentation.
Create a custom HTML CTA
To add a custom HTML CTA, open a media page in your Wistia account.
Click "Customize."
Select "Call to Action."
From the Type dropdown menu, select "HTML."
Paste your HTML code (check out our examples below!), and click "Save."
Note
It’s important to note that custom HTML CTAs are not tracked in your action analytics. Since you’re directing viewers away from Wistia, we can’t track where they land.
Multiple choice CTA
Consider offering viewers more than one option with a multiple-choice CTA.
In this example, we'll format the URLs as https://link1.com with the button label 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>
...which looks like this:
Here, we'll add styling divs to the same example code:
<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:
Lastly, here's another example with https://link1.com and Link 1 replaced:
<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 the results:
Tip
To open links in a new tab, add target="_blank" after the href value.
Play another video CTA
To configure videos to autoplay one after another, at the end of the first video, refer to our embed links guide. We have a simple walkthrough on that page to show you how to choose to play another video directly after one finishes.
Multiple choice play another video CTA
In this example, we'll let viewers choose between multiple videos. Use the code below with your videos' hashed IDs. Review the embed links tutorial to learn more.
<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/>
Customize CTA text style
Looking for more text style options? With a custom HTML CTA, you can add your own custom code to make the link all your own.
Here’s a quick example...
<a href="https://wistia.com" style="color:#ff8e3f;text-decoration:none;font-size:70px;font-family:cursive">Whale hello there!</a>
...and the result:
Custom-sized image CTA
If you want to use an Image CTA, but 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 to Wistia) and obtaining a direct link to it. You can usually do this by right-clicking the image and copying its URL/link. (Depending on the browser and operating system, this option will be labeled differently.)
Once you have a link to the image, you can plug it directly into an image HTML tag, set a width and height, 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>
Tip
Since the image you’re using is most likely fixed in size, we recommend using a fixed-size embed for 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 that the data requires a FormKeep account, and the instructions are listed in this FormKeep article.