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.
Heads up
Custom HTML CTAs are available on Business Plans and above.
Calls to Action cannot be added to audio files.
Each video can have only one active Call to Action at a time.
Need more than one link at different points in your video? Try Annotation Links, which let you add multiple time-based links to the same video alongside your CTA.
Wistia CTAs are wonderfully versatile, and custom HTML CTAs offer even more flexibility. Before we jump into the examples, note that while custom HTML CTAs allow HTML and some minor CSS, JavaScript will be stripped out.
These HTML CTA examples are just that : examples for you to borrow and alter as needed. If they stop working or you want to customize them further, we recommend calling a developer friend for help.
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," then select "Call to action" and toggle it on.
Enter the timestamp where you'd like the CTA to appear. From the Type dropdown menu, select "HTML."
Paste your HTML code (see our examples below!), then click "Save."
Note
Wistia records when your custom HTML CTA is shown, but clicks on links inside it are not tracked in your action analytics. If click tracking matters, use a Text or Image CTA.
Supported HTML elements
Custom HTML CTAs support common HTML elements, including links, images, headings, lists, tables, div and span, forms and inputs, and embedded iframes.
Inline styling works best (style="..."). A <style> block inside the CTA may be ignored, so add larger CSS rules to your own webpage instead.
For security, Wistia removes JavaScript, including onclick and other event attributes, and javascript: links.
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, refer to our embed links guide. That page includes a simple walkthrough showing how 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 the image link, you can plug it directly into an image HTML tag, set a width and height, and use the custom HTML CTA with your new code. 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.