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

<figure><img src="https://1542008262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx1gDSg0Q63FUKhwlXgY7%2Fuploads%2F5DKdX5TtwpYSsyVWae5F%2Fimage.png?alt=media&#x26;token=cb7e755a-fe36-4a02-930f-c080aea23d72" alt="" width="563"><figcaption></figcaption></figure>

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.

```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 <a href="#page_the_cta_element" id="page_the_cta_element"></a>

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.

```javascript
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 <a href="#page_the_callback" id="page_the_callback"></a>

The example above provides the following `data` during the `btnCallback`:

```javascript
{
  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 <a href="#page_multi_level_cta" id="page_multi_level_cta"></a>

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

```javascript
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 <a href="#page_methods" id="page_methods"></a>

| Method        | Type       | Description |
| ------------- | ---------- | ----------- |
| callcta       | Integer    |             |
| callctaObject | CtA Object |             |
| closecta      |            |             |

### Events <a href="#page_events" id="page_events"></a>

| Event          | Description |
| -------------- | ----------- |
| cta.displaying |             |
| cta.closed     |             |

### Live Demo <a href="#page_live_demo" id="page_live_demo"></a>

{% embed url="<https://codepen.io/3qgmbh/pen/rNYVbMJ>" %}