The VSL player

Paste this where the video should appear:

<sw-vsl-player data-vsl-id="ID"></sw-vsl-player>

The id identifies the VSL; the dashboard hands you the snippet with it in place. The element is drawn by the site tag, so the tag has to be installed on the page (Settings → Site tag) — without it, nothing appears. The page the player is on has to be on a domain your organization allowed (Settings → Site tag → Allowed Domains) — the id alone opens nothing. Nor does anything appear while your organization is not served — suspended, locked, or with no plan: the API answers the player, the A/B test and the site tag’s page view 403 ORGANIZATION_UNAVAILABLE. Nor while the VSL is unpublished, or the A/B test standing in its place inactive: the API answers 404 VSL_NOT_FOUND and 410 AB_TEST_UNPUBLISHED. The video takes the width of where you put it, at its own shape. What plays, the offers shown with it, where the page goes when the video ends and the events it sends are what you set on the dashboard, and changes there show on your page without touching the snippet.

How it plays is said on the element, and only there — the dashboard writes your VSL’s choices into the snippet it hands you:

Attribute	Values	Without it
data-disable-progress-bar	true	the bar is shown
data-block-progress-bar	true — only with the bar shown: it cannot be dragged	it can be dragged
data-smart-progress-bar	true — only with the bar blocked: it runs ahead at the start and slows down, with no total	the real position
data-progress-bar-placement	controls, top, bottom — top and bottom only with the bar blocked	controls
data-hide-timer	true — the time among the controls is not shown	it is shown
data-start-mode	normal, teaser (playing muted)	normal: it waits for the play button
data-start-from	beginning, last-position (where the viewer stopped)	beginning
data-teaser-press	back, continue — only with data-start-mode="teaser": the press turns the sound on and goes back to where it opened (see data-start-from), or keeps going	back
data-disable-pause	true	pausing is allowed
data-disable-mute	true — no sound button, and the sound turned off from elsewhere is turned back on (the teaser still plays muted)	muting is allowed
data-offer-restart	true — only with data-start-from="last-position": a button to start over under the play button	not offered
data-restart-text	any text — that button’s words	“Start over”, in the viewer’s language
data-disable-video-dim	true — the video behind the big button is not darkened	darkened, black by half (less over the muted teaser)
data-blur-video	true — the video behind the big button is blurred a little	not blurred

The big button has moments, each set on its own: before the viewer’s first press (play — over the video still, or over the muted teaser), before the first press where the video opened where the viewer stopped (resume, only with data-start-from="last-position"), and paused after it (unpause):

Attribute	Values	Without it
data-play-layout, data-resume-layout, data-unpause-layout	pill, card, icon, overlay (covers the whole video)	pill; card over the muted teaser
data-play-title, data-resume-title, data-unpause-title	any text (the card’s and the overlay’s title)	none; “Your video has started” over the muted teaser
data-play-text, data-resume-text, data-unpause-text	any text	“Tap to play” / “Tap to keep watching”; “Tap to turn on the sound” over the muted teaser, in the viewer’s language
data-play-icon, data-resume-icon, data-unpause-icon	play, play-circle, speaker, speaker-muted, none	play; speaker-muted over the muted teaser

Its look is the player’s own colour and font, as your VSL sets them, and your page’s CSS may set them too, on the element or anything around it: --sw-vsl-player-accent-color — the one colour of the player: the progress bar, the big button, the button to start over and the offers are all painted in it, and the words on each in whichever of white or near-black reads on it — and --sw-vsl-player-font-family. The big button’s look is one for every moment, --sw-vsl-player-button-*: shadow, font-size, font-weight (bold where it says none), letter-spacing and animation (none, pulse, breathe; none where it says none); its corners are each format’s own — a pill round, a card’s 25px, the icon a circle. It always sits in the middle. The video’s corners are --sw-vsl-player-radius (12px where it says none), the video alone: the offers above and below it come out from behind them, with its corners. The button to start over sits under the play button, as wide as its words, always a pill with the restart icon, in its look, on a darker shade of the colour. An offer in the middle of the video has 25px corners, as the big button’s card, and its button 10px; one across the page’s edge is square.

Events

The player, the registration form and the platform’s own pages (a registration’s watch page, a survey) say what happens on them to the page they are on: each event is pushed onto the page’s dataLayer as { event: name, … }, with its fields beside the name. Read them with your Google Tag Manager container: yours on your site, and the one you set on a webinar or a survey on its pages when they are on a domain of your own (the platform’s own domain loads none).

The platform’s events

Each is said once, when what it tells of has been recorded — never before, never twice — with the id of what was recorded and the ids it belongs to. Every name starts with sw_. A name is the same whatever it is of — the webinar’s player and the VSL’s both say sw_play —, and resource says which: webinar (its form and its player), vsl or survey. The ids keep their owner’s full name.

Event	resource	When	Fields
sw_form_loaded	webinar	the registration form loads on your page — once per page and webinar, however many forms of it the page holds	webinarId, webinarFormLoadId, abTestId where an A/B test dealt it
sw_form_start	webinar	the first field of the form is touched	the load’s, webinarFormStartId
sw_form_submission	webinar	the form is sent and the registration — or, on a paid webinar, the ticket order — is made	the load’s, webinarFormSubmissionId, webinarRegistrationId or webinarTicketOrderId, and what was registered: names, e-mail, phone, time zone, the UTM tags, and the session where it is one alone (an evergreen’s, or a launch of one date)
sw_player_loaded	vsl	the VSL’s player loads on your page — once per page and VSL	vslId, vslTitle (the title written in the VSL’s wizard), vslPlayerLoadId, abTestId where an A/B test dealt it
sw_play	webinar	the registration presses play	webinarId, webinarName, webinarRegistrationId, webinarPlayerPageViewId, kind (session or replay), webinarPlayId
	vsl	the viewer presses play	the load’s, vslPlayId
sw_cta_impression	webinar	an offer comes up during the play, once for each	the play’s, webinarCtaId, webinarCtaImpressionId
	vsl	the same	the play’s, vslCtaId, vslCtaImpressionId
sw_cta_click	webinar	an offer’s link is pressed, at every press	the play’s, webinarCtaId, webinarCtaClickId
	vsl	the same	the play’s, vslCtaId, vslCtaClickId
sw_redirect	webinar	the session’s end sends the page on	the play’s, webinarRedirectId
	vsl	the video’s end sends the page on	the play’s, vslRedirectId
sw_survey_start	survey	the survey is begun	surveyId, webinarRegistrationId, surveyResponsePageViewId, surveyStartId
sw_survey_submission	survey	the answers are sent	surveyId, webinarRegistrationId, surveyResponsePageViewId, surveySubmissionId, surveyResponseId

Each says what happened, not what it means: whether a form sent is a lead or a redirect a conversion is yours to decide in your tag manager. A page view is not among them — your tag manager counts the page as it loads — so the watch page and the survey page say nothing as they open: what is said there starts at the play and at the survey’s start. The form and the VSL’s player, drawn on a page of yours, are not the page, and say their load. Nor is a sale among them, which is recorded from your payment platform’s webhook, not on a page.