Articles on: INTEGRATIONS
This article is also available in:

Using VTurb with React


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:


  1. 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


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


import { Helmet } from "react-helmet"


  1. 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:


  1. 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>


  1. 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:



Updated on: 02/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!