> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.vturb.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
```

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

```html
import { Helmet } from "react-helmet"
```

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

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

In...

`YOURVIDEOHTML`

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

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/codigo-1_17t09j0.png =684xauto)

In...

`YOURVIDEOSCRIPT`

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

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/codigo-2_1gu1oaw.png =684xauto)

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

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

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

```html
<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:

```html
import { useState, useEffect } from 'react';
```

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

```html
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

```html
true
```

and hide them when it is

```html
false
```

.

```html
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:

```html
{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](https://help.vturb.com/en-us/article/js-code-vs-iframe-whats-the-difference-1uvp9zl/?bust=1697563548472)
* [Learn how to use VTurb in your page builder!](https://help.vturb.com/en-us/category/page-builders-pti8nq/)