Headline JS

A text headline can carry custom JavaScript, configured in the dashboard. The player runs it once per chosen headline, right after the headline HTML is rendered, on your page.

What your code receives

Your code runs inside a function that is handed two variables:

Both names are reserved. Declaring const root or let playerId in your code stops the whole script from running — assign to other names instead.

What running inside a function changes

A top-level var or function is local to that function, not a global. If you are pasting a third-party tag that other scripts on the page need to reach, assign it explicitly:

window._myTag = ...;

A pasted tag that inserts itself next to its own <script> — the s.parentNode.insertBefore(node, s) pattern — lands in <head>, not in the headline, because the player runs your code from there. Insert into root instead.

The code does not run in the dashboard preview, only on your published page. An error thrown by your code is reported to the browser console and does not affect the player, the headline or its tracking.

Reaching the player API

Resolve the element from the id:

// match by the end of the id: the prefix depends on the embed
var player = document.querySelector('vturb-smartplayer[id$="' + playerId + '"]');

root.querySelector(".cta").addEventListener("click", function () {
  player.play();
});

Switching headlines

Switching headlines runs the new code, but nothing from the previous one is undone. Clear your own timers and listeners if the player can switch headlines within one page view.

Two headlines that share the same HTML and differ only in their code run over the same, un-reset content. Make your script safe to run twice: check before appending a node or binding a listener.

If your site uses a Content Security Policy

Most sites do not. You have one if your page sends a Content-Security-Policy header or carries a <meta http-equiv="Content-Security-Policy"> tag. If you are unsure, ask whoever maintains the site, or open the browser console — a policy that is blocking something prints a message containing "Content Security Policy".

A CSP is a rule your site sends to the browser saying which scripts may run, so that code an attacker slips into the page is refused. The browser tells trusted scripts apart by a nonce: a random password your server picks on each page load, puts in the rule, and stamps on every script tag it trusts. It changes every load, so it cannot be copied.

For your headline code to run, that password has to reach it. Three things make that happen.

1. Allow our address, so the player itself can load:

Content-Security-Policy: script-src 'nonce-YOUR_NONCE' https://scripts.converteai.net

2. Put the nonce on the player tag. Same password as in the policy, done once. If your site already puts a nonce on its own scripts, include the player tag with them.

<script
  nonce="YOUR_NONCE"
  src="https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/player.js"
  async
></script>

3. Use the JS embed. On the iframe embed the player deliberately does not pass the nonce along, so headline code never runs there under a CSP.