Using VTurb with React

In this guide, we'll walk through the process of integrating VTurb with React, providing you with detailed steps.


Let's get started:

Firstly, you need to install react-helmet. Run the following command in your application to install it:

With yarn:

yarn add react-helmet

or with npm:

npm install --save react-helmet

Now, import "Helmet" on the page where your video will be located:

import { Helmet } from "react-helmet"

Place the video on your page:

Paste the code below where you want the video and replace the information in the code with the details from your video's JS embed.

<div dangerouslySetInnerHTML={{ __html: 'YOURVIDEOHTML' }} />
<Helmet>
  YOURVIDEOSCRIPT
</Helmet>

In...

YOURVIDEOHTML

... insert this part of your video's code:



In...

YOURVIDEOSCRIPT

... insert this part of your video's code:



That's it! Your video is now up and running on your application.

AB testing with React

If your video involves AB testing, follow these steps:

First, remove the id from the AB test script code, and insert it where it says YOUR_AB_TEST_SCRIPT_ID. Then, insert the AB test script without the id where it says YOUR_AB_TEST_SCRIPT.

<div dangerouslySetInnerHTML={{ __html: '<script type="text/javascript" id="YOUR_AB_TEST_SCRIPT_ID"></script>' }} />
<Helmet>
  YOUR_AB_TEST_SCRIPT
</Helmet>

Your script should look like this, and everything is set for your test:

<div dangerouslySetInnerHTML={{ __html: '<script type="text/javascript" id="scr_657afe5a6ab1740009719845"></script>' }} />
      <Helmet>
        <script type="text/javascript">var s=document.createElement("script");s.src="https://scripts.converteai.net/12ad2d53-6275-484d-a818-c6c5c23f6c5f/ab-test/scr_657afe5a6ab1740009719845/player.js",s.async=!0,document.head.appendChild(s);</script>
      </Helmet>

Syncing your page with the video

Import useEffect and useState:

import { useState, useEffect } from 'react';

Create a state to determine if the elements are visible or not:

const [isVisible, setIsVisible] = useState(false);

Add the delay code below and change the time in seconds you want the isVisible state to be true:

This way, you can display the elements you want only when this state is

true

and hide them when it is

false

.

useEffect(() => { /* CHANGE THE VALUE 10 TO THE SECONDS WHEN THE SECTIONS WILL APPEAR */ const SECONDS_TO_DISPLAY = 10; /* FROM HERE DOWN, NO NEED TO CHANGE */ let attempts = 0; let elsDisplayed = false; const alreadyDisplayedKey = `alreadyElsDisplayed${SECONDS_TO_DISPLAY}`; const alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey); const showHiddenElements = function () { elsDisplayed = true; setIsVisible(true); localStorage.setItem(alreadyDisplayedKey, true); } const startWatchVideoProgress = function () { if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) { if (attempts >= 10) return; attempts += 1; return setTimeout(function () { startWatchVideoProgress(); }, 1000); } smartplayer.instances[0].on('timeupdate', () => { if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return; if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return; showHiddenElements(); }) } if (alreadyElsDisplayed === 'true') { setTimeout(function () { showHiddenElements(); }, 100); } else { startWatchVideoProgress(); } }, [])

Done! The elements will stay in sync with the time you've set in seconds on the video.

Example of a condition to appear only when it reaches the defined time:

{isVisible && <h1>DELAY TEST</h1>}

And remember to add your domain(s) in the Security tab for extra protection for your VSLs.

Want to dive deeper? Check out:

The nitty-gritty of Iframe vs. JS code
Learn how to use VTurb in your page builder!

Updated on: 01/31/2024