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.
To add your custom HTML CTA navigate to the video page in your Wistia account. Something like this: https://support.wistia.com/medias/64jchp8ot0.
- Next, choose Customize from the . This will open the Customize panel.
- Open from within the Customize panel.
- Click + Add Call to Action.
- From the dropdown menu change the Type to HTML.
- Paste in your HTML code (check out our examples below!), and don't forget to your settings.
Similar to an email, you might want to allow viewers to immediately call you when your video ends. That's where the phone call trigger comes on.
On a mobile device (or a computer associated with a phone number), this CTA will automatically dial the phone number you provide here after
tel:. Don't forget—you'll want to add this code to the custom HTML CTA.
Here's your sample code:
<div style="text-align:center;"> <a href=tel:555-555-5555 style="color:#ffffff;text-decoration:none;">Call us!</a> </div>
And here's the live test (heads up, this calls 555-555-5555!):
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. We've also added some light styling to make the buttons more interesting, but feel free to remove this.
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 it is on a video:
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!
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!):
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:
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:
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.