Chamada para ação (CTA)

Atualizado: 12.08.2026

Este recurso tem status @experimental. Ele é estável o suficiente para uso, mas os detalhes da API podem mudar. Acompanhe o histórico de alterações do player .

Uma CTA é uma chamada para ação exibida sobre o vídeo. Use-a para assinaturas, links, botões na linha do tempo ou formulários de captação de leads. Configure as CTAs em playlist[].cta ao criar um player . Você também pode usar setPlaylistItemOptions .

Você pode configurar uma CTA simples no final do vídeo sem escrever código. Use um modelo de player .

Tipos de exibição

O valor padrão do campo type é overlay:

`type`	Comportamento
`overlay`	Cobre o player e pausa a reprodução
`popup`	Exibe um painel pop-up sem pausar a reprodução
`panel`	Exibe um painel transparente sem pausar a reprodução
`banner`	Exibe um banner com uma imagem ou um link
`buttons`	Exibe botões sobre o quadro. Um clique pode navegar pela playlist ou pela linha do tempo
`leadgen`	Coleta dados do usuário e os envia para sua URL

Início rápido: overlay

function onKinescopeIframeAPIReady(playerFactory) {
  playerFactory
    .create('player', {
      url: 'https://kinescope.io/VIDEO_ID',
      playlist: [
        {
          cta: [
            {
              id: 'subscribe-cta',
              type: 'overlay', // Opcional: este é o valor padrão
              title: 'Você gostou do vídeo?',
              description: 'Assine o canal para não perder os próximos lançamentos.',
              skippable: true,
              button: { text: 'Assinar' },
              trigger: { percentages: [50] },
            },
          ],
        },
      ],
    })
    .then((player) => {
      player.on(player.Events.CallAction, (event) => {
        // event.data.id === 'subscribe-cta'
        window.open('https://example.com/subscribe', '_blank')
        player.closeCTA()
      })
    })
}

Quando o usuário clica no botão da CTA, o evento CallAction é disparado. Execute sua ação e feche a tela com closeCTA() . A reprodução continua depois que a sobreposição é fechada.

Se você definir button.url, o player poderá abrir o link. O evento CallAction ainda será enviado, o que é útil para análises.

Campos comuns e acionamento

Campo	Tipo	Descrição
`id`	`string`	Identificador incluído em `CallAction`
`type`	Consulte os tipos de exibição	Modo de exibição. O padrão é `overlay`
`trigger.percentages`	`number[]`	Percentuais de reprodução, como `[50, 100]`
`trigger.timePoints`	`number[]`	Pontos no tempo em segundos, como `[60, 600]`
`trigger.pause`	`boolean`	Exibe a CTA quando a reprodução é pausada

Defina pelo menos um acionador: percentages, timePoints ou pause. Você pode combiná-los.

Campos comuns:

Campo	Tipo	Descrição
`title`	`string`	Título
`description`	`string`	Descrição
`skippable`	`boolean`	Permite que o usuário feche ou pule a CTA
`button.text`	`string`	Texto do botão
`button.style`	`CSSProperties`	Estilos do botão
`button.url`	`string`	URL aberta ao clicar

Campos adicionais:

Campo	Tipos	Descrição
`link`	`overlay`	Segundo link: `{ text, url, style? }`
`poster`	`overlay`	Pôster ou imagem na tela da CTA
`position`	`popup`, `panel`	`'top'` \| `'bottom'`

Exemplo de popup exibido ao pausar:

{
  id: 'pause-offer',
  type: 'popup',
  position: 'bottom',
  title: 'Continuar depois?',
  button: { text: 'Salvar progresso', url: 'https://example.com/save' },
  skippable: true,
  trigger: { pause: true },
}

Campo	Tipo	Descrição
`title`, `description`, `skippable`, `button`	Igual a `overlay`	Campos principais
`url`	`string`	Link do banner
`image`	`string` \| objeto de pôster	Imagem
`position`	`string`	`'top-left'` \| `'top-center'` \| `'top-right'` \| `'bottom-left'` \| `'bottom-center'` \| `'bottom-right'`
`variant`	`'vertical' \| 'horizontal'`	Layout
`style`	`CSSProperties`	Estilos do contêiner

buttons

Este tipo exibe botões sobre o quadro. Por padrão, a reprodução continua. Defina pause no item para pausá-la.

{
  id: 'hotspots',
  type: 'buttons',
  trigger: { timePoints: [30] },
  list: [
    {
      id: 'go-chapter-2',
      title: 'Capítulo 2',
      position: { x: 0.2, y: 0.5 }, // Em relação ao quadro, de 0 a 1
      goTo: { playlistItem: 0, time: 120 },
    },
  ],
}

Campo	Descrição
`list[].id`	ID do botão
`list[].title`	Texto
`list[].position`	`{ x, y }` em relação ao tamanho do quadro
`list[].goTo`	`number` para o tempo em segundos ou `{ playlistItem, time? }`
`list[].style`	Estilos do botão
`pause`	Pausa a reprodução quando a CTA aparece

leadgen

Este tipo coleta dados do usuário. O player envia os campos para sua url por meio de uma solicitação POST.

Campo	Tipo	Descrição
`url`	`string`	Endpoint de envio do formulário
`fields`	`Array<'name' \| 'email' \| 'company'>`	Campos que serão exibidos
`privacyPolicyUrl`	`string`	Link para a política de privacidade
`lifetime`	`number`	Período durante o qual este `id` é considerado enviado. O padrão é 30 dias
`skippable`	`boolean`	Permite que o usuário feche o formulário sem enviá-lo
`trigger`	—	Igual aos outros tipos de CTA

{
  id: 'lead-end',
  type: 'leadgen',
  url: 'https://example.com/api/leads',
  fields: ['name', 'email'],
  privacyPolicyUrl: 'https://example.com/privacy',
  skippable: true,
  trigger: { percentages: [100] },
}

Próximos passos

Controlar o player — use closeCTA e CallAction
Publicidade — configure VAST e IMA pela API
Playlists
CTA em modelos de player

Chamada para ação (CTA)

Tipos de exibição

Início rápido: overlay

Campos comuns e acionamento

overlay, popup e panel

banner

buttons

leadgen

Próximos passos

Artigos relacionados