Player API Player Plugins Call to Action

Our CtA (Call-to-Action) interface is an amazing tool to create interactive videos for marketing, quizzing, shopping and everything else you can imagine.

Table of Contents

The CtA interface creates a bridge between the player and your frontend. You only have to define the Call-to-Action element by using JavaScript’s native object and HTML.

<div id="player1"></div>
<script type="text/javascript">
  new js3q({
    dataid: '5c3b0910-8850-11e7-9273-002590c750be',
    container: 'player1',
    cta: {
      0: {
        time: 3,
        html: `<h1>Call-to-Action</h1>
               <p>Create a whatever you want Call-to-Action by using the CtA interface. This CtA is skippable. The next one will start after 15 seconds.</p>`,
        skippable: true,
      },
      1: {
        time: 15,
        html: `<h1>Do you like the video?</h1>
               <p>Subscribe our newsletter.</p>
               <form id="form1">
                 <input id="email" placeholder="e-mail address" type="email"/>
                 <br/>
                 <button ctacallback resume style="font-size:15px;color:white;background:#d534c8;">Subscribe</button>
               </form>`,
        btnCallback: function (data) {
          console.dir(data)
        },
        skippable: false,
      },
    },
  })
</script>

The CtA Element

The Call-to-Action element is configured with the following parameters (JavaScript native object):

key type Description
time Integer The position (in seconds) of the audio/video playback when the CtA should start
html String The html you want to place. Please read the description below carefully.
btnCallback Function This parameter is optional. If you use forms or inputs in the CtA element, you will receive them in the function you define or reference.
skippable Boolean If true, the CtA can be skipped.
autoplay Boolean If false, the CtA element is only displayed when triggered manually.

In this example we create a CtA with a form for subscribing to a newsletter. To receive the e-mail address from the user, you have to create an input field for the address: <input required id="email" placeholder="e-mail address" type="email"/> and a buttonElement: <button ctacallback resume>Subscribe</button>.

The attribute ctacallback means that when the button is pressed, the btnCallback function is triggered. resume says that the video is now continuing. For example, if you want to intercept a failure scenario or use a multi-level Call-to-Action element for quizzing, you can use another attribute of next = '1' (1 being the ID of the CtA) to call that element.

If the CtA element is not skippable (skippable:false), the playback is blocked while the CtA element is being displayed as long the CtA element is not submitted.

1: {
  time:15,
  html: `<h1>Do you like the video?</h1>
         <p>Subscribe our newsletter.</p>

         <form id="form1">
           <input id="email" placeholder="e-mail address" type="email"/>
           <br/>
           <button ctacallback resume style="font-size:15px;color:white;background:#d534c8;">
             Subscribe
           </button>
         </form>`,
   btnCallback: function (data) {
    // Here you can code whatever you like. For example submitting the form with Ajax.
  },
  skippable:false
}

The Callback

The example above provides the following data during the btnCallback:

{
  ctaId: "1",
  formInputs: {
    0: {
      id: "email",
      type: "email",
      value: "example@email.com"
    }
  }
}

The ctaId key is the identifier which CtA element is used.

Multi-Level CtA

As described above, you can also create multi-level CtA. Below you find a simple quizzing:

cta: {
  0: {
    time:50,
    html: `<h1>Do you like the video?</h1>
           <form id="form1">
             <button ctacallback resume style="font-size:15px;color:white;">Yes</button>
             <button ctacallback next="1" style="font-size:15px;color:red;">No</button>
           </form>`,
    btnCallback: function (data) {
      // Here you can code whatever you like. For example submitting the form with Ajax.
    },
    autoplay:true,
    skippable:false
  },
  1: {
    time:15,
    html: '<h1>:-(</h1><p>Okay, we will try it again.</p>',
    autoplay:false,
    skippable:true
  }
}

Now enjoy this amazing feature and create a amazing video experience.

Methods

Method Type Description
callcta Integer
callctaObject CtA Object
closecta

Events

Event Description
cta.displaying
cta.closed

Live Demo

See the Pen Call-To-Action by 3Q GmbH (@3qgmbh) on CodePen.

Previous Next