Call to Action with JW Player

Adding calls to action (CTAs) to your videos is one of the most effective ways to convert leads. Viewers are much more likely to take the next step when you direct them toward an action at the perfect moment within your video than if your video simply plays with no button urging “click here”. Common CTAs are signing up for a free trial, contacting a sales rep, or linking to more resources. Let us know if you have other great ideas!

Although creating clickable calls to action isn’t an out-of-the box feature of JW Player, it is possible to achieve this with some JavaScript and our JavaScript API.

How to do it

All you need to do here is set up a normal JW Player embed like we always do, and use our API, and onComplete(), to tell the player to display the call to action at the end.

This demo shows a movie preview with a CTA to watch the entire film when the preview is over:

Into the Code

Below is the breakdown of the JavaScript code that is used. First, a basic player set up, like we always have. We include a WebM video so Firefox can play in HTML5 mode:

jwplayer("player").setup({
  playlist: [{
    image: "http://content.bitsontherun.com/thumbs/w5co0c24-480.jpg",
    sources: [{
      file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4"
    },{
      file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.webm"
    }]
  }],
  width: 600,
  height: 300,
  stretching: "fill"
});

Next, we use some JavaScript (to create the elements used for the demo), and ourJavaScript API (specifically the onComplete() event), to show the call to action at the end of he video.

Note, due to the length of the code used for this example, the source code for this API example is on a separate page. If you are interested in the complete source code to this example please click here.

Wrapping Up

As you see, it is quite easy to add the call to action feature to JW Player 6. Feel free to use the demo in this blog post and adjust it as you see fit. A direct link to this demo is available here. There are many uses for this powerful feature. You can use this to display an email form at the end of a video, fill out a survey, or simply market a product. The possibilities are endless. Please let us know if you have any questions or if you have built a cool integration that you wish to show off, comments are welcome, happy embedding!