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.

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="player"></div>
<script>
  new js3q({
    dataid: '5c3b0910-8850-11e7-9273-002590c750be',
    container: 'player',
    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: (data) => {
          console.log(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>
             Subscribe
           </button>
         </form>`,
   btnCallback: (data) => {
    // Here you can code whatever you like. For example submitting the form.
  },
  skippable:false
}

The Callback

The example above provides the following data during the btnCallback:

{
  ctaId: "1",
  formInputs: {
    0: {
      id: "email",
      type: "email",
      value: "[e-mail]"
    }
  }
}

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
  }
}

Methods

Method	Type	Description
callcta	Integer
callctaObject	CtA Object
closecta

Events

Event	Description
cta.displaying
cta.closed

Live Demo