# 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="/files/NfkSYbVyZZhIiSwfdRPn" 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://player.docs.3q.video/plugins/call-to-action.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.