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_INACTIVE. 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, and — on your own site, where the player and the form are embedded — dispatched on its window as a CustomEvent of the same name, the fields in its detail. On the platform’s pages the dataLayer is the one of the Google Tag Manager container you set on the webinar or the survey.

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 session, the UTM tags
sw_player_loaded	vsl	the VSL’s player loads on your page — once per page and VSL	vslId, vslName, 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, webinarRecordingCtaId, 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, webinarRecordingCtaId, 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.

Your own events

On the dashboard, a webinar’s and a VSL’s Events step takes events of your own, each a name and what sets it off. They are said at that moment, under your name — which may not start with sw_ — with what is known of the player then: resource (webinar or vsl), as the platform’s events carry it, webinarId and webinarName (or vslId and vslName), the registration and its page view (webinarPlayerPageViewId) or the VSL player’s load (vslPlayerLoadId), and the play once pressed, and trigger, which says what set it off as component.action, the component named for its owner — so trigger alone tells a webinar’s event from a VSL’s:

Trigger (webinar)	Trigger (VSL)	When	Also carries
webinarPlayer.play	vslPlayer.play	play is pressed
webinarPlayer.position	vslPlayer.position	the video reaches a second, played up to	seconds
webinarPlayer.watched	vslPlayer.watched	a number of seconds has been watched in all	seconds
webinarPlayer.progress	vslPlayer.progress	the video reaches a share of its length (not on a live session)	percent
webinarPlayer.end	vslPlayer.end	the session or the video ends while watched
webinarCta.impression	vslCta.impression	an offer comes up, once for each	webinarRecordingCtaId / vslCtaId
webinarCta.click	vslCta.click	an offer’s link is pressed	webinarRecordingCtaId / vslCtaId
webinarRedirect.leave	vslRedirect.leave	the redirect sends the page on

The platform no longer says the video’s progress or end on its own: the former sw_video_start, sw_video_progress and sw_video_complete are gone, and so are sw_cta_show, sw_form_submit and sw_survey_submit — sw_cta_impression, sw_form_submission and sw_survey_submission take their place. sw_form_impression is now sw_form_loaded, and sw_player_impression is now sw_player_loaded, said by the VSL’s player alone; the watch page’s opening and sw_survey_impression say nothing. sw_cta_click, sw_redirect, sw_form_start and sw_survey_start keep their names, said now once recorded, with the fields above and resource. Where you followed how far the video was watched, make your own events with the …Player.progress trigger (one per share you want: 25, 50, 75…) and the …Player.end one.