Wistia

to the tippy ↑

CTA Lesson 3

Custom HTML CTAs 🖌

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, choose Customize from the ▸ Video Actions. This will open the Customize panel.
  2. Open Timeline Actions from within the Customize panel.
  3. Click + Add Call to Action.
  4. From the dropdown menu change the Type to HTML.
  5. 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 Compose Email Link

We've been talking about creating a path for your viewers and using a Call to Action to help move them along that path. Often, the next step you want your viewers to take is to get in touch with you. You can make this easy for your viewers by using a mailto link in your Call to Action—a link that, when clicked, opens a new email in the viewer's default email program, with the address of your choice as the recipient.

As a reminder, here's how to add a custom HTML CTA.

Note

Bonus! Mailto links also work as regular links within Wistia. Instead of entering website to link to for your text or image CTA, you can enter mailto:your.email@example.com and you're good to go!

Here's the example for your to borrow:

wistia_html.html
1
2
3
<div style="text-align:center;">
<a href=mailto:your.email@example.com style="color:#ffffff;text-decoration:none;">Send me an email!</a>
</div>

To use this example you'll want to replace the your.email@example.com with your email address. Feel free to stylize the text copy as well!

And here's an example for you to test out yourself:

 

Tip

Want to add a filler subject line too? You can add it as a query string to your email address—but you'll need to remember to percent encode the URL so it doesn't break. Our friends at HubSpot have put together this helpful guide too!

CTA with Phone Call Trigger

Maybe your business or department runs more on phone calls than emails, but you still want to help your viewers reach out to you once they've watched your video. That's something a Call to Action can help with!

Both this type of CTA and the email link CTA make it that much more likely that your visitors will take the next step that you want them to take. That's because that next step would normally require them to leave your site (to open an email program and write a message, or to look up your phone number and call you), but you're allowing them to do this right from the video they've just finished watching.

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:.

Note

Bonus! Tel links (like mailto links) also work as regular links within Wistia. Instead of entering website to link to for your text or image CTA, you can enter tel:555-555-5555 and you're good to go!

Here's your sample code for a custom HTML CTA:

wistia_html.html
1
2
3
<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!):

 

CTA With Multiple Choices

Sometimes the path you want your visitors to take has a fork in it. 🍴 You can give your visitors options in a CTA!

Let's say you're using videos in your website's help center. Viewers have just finished watching a video showing them how to use a particular part of your product. When they finish watching that video, the next step isn't as defined as it might be in a marketing setting.

The viewer might want to learn more about similar parts of your product, they might want to take their usage to a more advanced level, or they might just want to get down to business and start using the knowledge they've just gained. You can use a custom HTML CTA to present those choices to your viewers.

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:

wistia_html.html
1
2
3
<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:

 

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

The next step you want your viewers to take might be to watch another video! You can accomplish this in a couple of different ways.

You might already be familiar with the Playlist feature, which automatically starts playing that next video, and that has a lot of great applications (we love it for multi-part courses, for instance, or for an ongoing video series). But some situations call for a slightly different approach.

You might want to give viewers the option of watching a next video, but you don't consider the next video the second part of the first—it's just further content you think your viewers might find helpful. This is particularly handy in an educational setting, like a help center for your customers or internal training videos for your staff.

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

Let's put together a couple of these options—using a CTA to let viewers watch another video, and offering multiple-choice CTAs. That's right: you can offer multiple choice options to watch different videos, using one CTA!

By this point, you're probably already thinking of some use cases where this would be appropriate—related content that allows people to take the branch that best suits their needs at the moment.

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:

wistia_html.html
1
2
3
<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

Maybe you feel like one of these options (or even a regular CTA) would suit your needs, but you would prefer if the CTA was more aligned with your company's branding. You might have a preferred font or color that you use across your site. Never fear! You can use a custom HTML CTA to get your CTA looking just right.

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:

wistia_html.html
1
<a href="https://link.com" style="color:#B98BE8;text-decoration:none;font-size:100px;font-family:'Copperplate'">Whale hello 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:

wistia_html.html
1
2
3
4
5
<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

Personalized communication is always best—so it's great to ask for more information from your viewers when they finish a video. Our Turnstile feature can help with that, but if you need to ask your viewers for more than just their name and email, you can actually accomplish that using an HTML 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 you can check it out over on the FormKeep help page.

Today's Homework

Homework

Think one or more of these options might be a good fit for one of your videos? Give it a try! You can copy the code example we've provided and make any necessary changes. Need a hand? Just ask! We're happy to point you in the right direction.