> ## Content Index
> Fetch the complete content index at: https://blog.addpipe.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# How To Capture Videos On Your Wix Website Using Pipe Video Recorder
- URL: https://blog.addpipe.com/how-to-capture-videos-on-your-wix-website-using-pipe-video-recorder/
- Published: 2020-02-14T16:55:02.000Z
- Updated: 2026-05-21T08:16:21.000Z
- Description: In this step-by-step guide we cover how to easily capture videos on your Wix Website.
- Author: Alessio
- Tags: Wix, Tutorials, No Code, #Import 2026-05-22 13:18

If you have a Wix website and you are struggling with capturing and managing video recordings on your own this guide will save you a lot of time and energy. After integrating the [Pipe Video Recorder](https://addpipe.com/video-recorder) on your Wix website your visitors will be able to record videos directly on your website and you will be able to access and manage all recordings from your Pipe account area. Let’s go step-by-step!

##   
Table of Contents

1. [Requirements](#requirements)
2. [Creating a Wix Website](#creating-a-wix-website)
3. [Adding the Pipe Video Recorder to A Page ](#adding-the-pipe-video-recorder-to-a-page)
4. [Testing the Video Recorder on your Wix Website](#testing-the-video-recorder-on-your-wix-website)

---

## Requirements

In order to follow this guide you will need to: 

- [Create a Wix account](https://www.wix.com/)
- Connect your domain to your Wix website
- [Sign up for a Pipe account](https://dashboard.addpipe.com/signup)

Although you can create a Wix account for free, to add the [Pipe video recorder](https://addpipe.com/video-recorder) to your Wix website you will need to be able to add some code to your Wix website, which is a paid feature. It is thus necessary to upgrade your Wix website to one (any) of their Premium Plans. You can however *try* any Wix Premium Plan by signing up for a paid plan and cancelling within 14 days to receive a full refund. 

Make sure also to have your own domain and to connect it to your Wix website. This is required to be able to access the Tracking & Analytics section, which we will use to add the [Pipe video recorder](https://addpipe.com/video-recorder) to your Wix website.  

With Pipe, if you haven’t signed up already, you can [get access to the 14 days free trial](https://dashboard.addpipe.com/signup). The process is pretty straight-forward, it takes just 1 minute - no credit card required.

## Creating a Wix Website

If you already have a Wix website you can skip this step. If you don't, follow along. 

Once you have created your account with Wix go to **My Sites** and click on the **Create a new site button**. You will be asked to choose what type of website you want to create. For this example, I used the **Business** option, but you should choose the one that makes more sense to your use case.

  
Now you can choose if you want to build your website by yourself or if you want to use a Template. I decided to pick a blank template for this example, so I will select the **Choose a Template** option on the right and in the next screen I selected the **Empty** option on the left. In the final screen, I chose Start from Scratch to start building my Wix website.

![Creating A Wix Website](https://lh3.googleusercontent.com/PDO5E7YYduIiQdeodGYwgi7oxneoPJ4pK3pNXPYnNu3jDquOR2bW3Z4q2Md4FFqDy6PajFMBFwKQexZnat9qYX3XtLattkZ_B8a_HKI3y-QRgHRCRmJhbl6mE9D-n1wUFfDskBtc)

## Adding the Pipe Video Recorder to A Page

With your website created we'll use the Wix editor and the embed code from your Pipe account area to add the [Pipe video recorder](https://addpipe.com/video-recorder) to one of your Wix website pages.   

### Add a Placeholder Element

First, let’s add a *Paragraph* element to the page on your Wix website where you want the recorder to show up. This element will be just a placeholder for the recorder. We'll make it the right size so we'll be able to position it correctly.

To add the placeholder element press the **\+** button on the left side of the Wix editor and choose a plain Paragraph element from Text > Paragraphs .

![Adding a paragraph from the Wix editor](https://blog.addpipe.com/content/images/2020/02/Adding-a-paragraph-o-text-to-your-Wix-website.png)

With the paragraph on your page we'll now resize it from the right menu. Our recorder client will be 640 x 390 px in size on desktop devices so I'll resize the text area to that exact size to have a really good idea of where and how the recorder will be positioned on desktop against other elements on the page. For my use case I'll also center align it.

![Changing the paragraph size in the Wix editor.](https://blog.addpipe.com/content/images/2020/02/The-text-element-will-be-replaced-by-the-Pipe-video-recorder-client.png)

With the shape correctly sized and positioned you need to **Save** and **Publish** the website. These 2 steps will make our changes public. 

Next we will turn the placeholder element (a paragraph) into a video recorder with JavaScript. If you are not too technical, don’t worry, it’s going to be easy to follow. 

On the published site page, right click on the paragraph -> Inspect and in the right window look for the id of the parent DIV element. Make a copy the **id.** In our case, the DIV element had the id **comp-k6qsb2z2\.** We will need the id later to tell JS what element to replace on the page.

![Identifying the id of a Wix paragraph with Chrome Developer Tools.](https://blog.addpipe.com/content/images/2020/02/Identifying-the-id-of-a-Wix-paragraph-with-developer-tools.png)

### Add The Pipe JS and CSS Libraries to Your Website

For this step you will have to upgrade your Wix website to a paid Premium Plan and connect your own domain to your Wix website.

The Pipe JS and CSS libraries are required to add the Pipe recorder to a page. To add them to your website go to the Wix site editor and click **Settings** \-> **Tracking & Analytics**.

![Tracking and analytics option in the Wix website. We'll use it to add the Pipe scripts.](https://blog.addpipe.com/content/images/2020/02/Tracking-and-analytics-option-in-the-Wix-website.png)

  
In the **Tracking & Analytics** section click on the **New Tool** button and select **Custom Code.** In the popup we’ll need to add the `pipe.css` and `pipe.js` scripts from our Pipe account area to be loaded on all pages in the `Head` section.

The `pipe.css` and `pipe.js` code can be found in your Pipe account area under the Embed Recorder tab. Scroll down and you will find the code you need under the 2.0 JS tab on the right.

We'll be using the 2.0 JS embed code with Wix. The Wix editor is rather strict so we could not use our simpler 2.0 HTML embed code.

![Embed Recorder tab on your Pipe account where you find the 2.0 JS embed code](https://lh5.googleusercontent.com/DQ-2eZB0UF7FUodf4SyitCoxFP7pMWQKZdUSqrPC91EE5ka4QUjbx5cFQKfRyHEb_CpFS_ZTqu_TanTVayS6Pd_sOOdcwjr-P-C__-s1OcQJQcLblRvhi-Z3ZmCreOouPjcDMUvi)

Copy the upper section of the 2.0 JS embed code and paste it into the snippet text field inside your Wix Custom Code tool. Give it a name and make sure the **Place Code In** value is set to **Head**. This is how the code and your Custom Code modal should look:

![Adding the Pipe CSS and JS Libraries to a Wix Website](https://blog.addpipe.com/content/images/2020/02/Adding-the-Pipe-CSS-and-JS-Libraries-.png)

Now click the **New Tool** button again and select **Custom Code.**  We'll use this 2nd tool to add the rest of the 2.0 JS embed code to be loaded at **Body - end**.

So:

1. copy the 2nd part of the 2.0 JS embed code from the Pipe account area
2. paste it into the snippet input field
3. remove the 1st line `<div id="custom-id"></div>`
4. change the default **custom-id** value with the actual id of the Text element we're replacing. In our case the id was **comp-k6qsb2z2.**

This is how your code should look:

```JavaScript
<script type="text/javascript">
  var pipeParams = {
    size: {
      width: 640,
      height: 390
    },
    qualityurl: "avq/360p.xml",
    accountHash: "YOUR_ACCOUNT_HASH",
    eid: "YOUR_ENVIRONMENT_ID",
    mrt: 120
  };
  PipeSDK.insert("comp-k53xsxpc", pipeParams, function(recorderObject) {});

</script>
```

If your Wix website is supposed to work also on mobile devices, you need to make a little change to the code above. Just change the value of the width from absolute (640) to relative ("100%") and the video recorder will be responsive as the rest of your Wix website. 

This is the final code

```JavaScript
<script type="text/javascript">
  var pipeParams = {
    size: {
      width: "100%",
      height: 390
    },
    qualityurl: "avq/360p.xml",
    accountHash: "YOUR_ACCOUNT_HASH",
    eid: "YOUR_ENVIRONMENT_ID",
    mrt: 120
  };
  PipeSDK.insert("comp-k53xsxpc", pipeParams, function(recorderObject) {});

</script>
```

This is how the code AND your Custom Code modal should look:

![Adding the final JS code needed to insert the Pipe recorder in a Wix page](https://blog.addpipe.com/content/images/2020/02/Adding-the-JS-code-needed-to-insert-the-recorder-in-the-page-1.png)

We are done! Here's how the Wix **Tracking Tools & Analytics** section should look after adding the Pipe embed codes.

![Wix tracking and analytics section after adding the Pipe embed codes](https://blog.addpipe.com/content/images/2020/02/Wix-tracking-and-analytics-section-after-adding-the-Pipe-embed-codes-1.png)

Now click on **Apply** and then make sure to **Save** and **Publish** your Wix website.

## Testing the Video Recorder on your Wix Website

You should see the Pipe Video Recorder loading where you placed the Text element!  

![The Pipe video recorder loaded on the Wix website ](https://blog.addpipe.com/content/images/2020/02/video-recorder-working.JPG)

Now all the video recordings you will capture through this video recorder will be saved in your Pipe Account. To access them you can go in the Recordings Tab within your Account Area.

![Recordings tab where you will find the video recordings](https://blog.addpipe.com/content/images/2020/02/recordings.PNG)

Please let us know what you think about the [Pipe Video Recorder](https://addpipe.com/video-recorder) and if you have any questions, don’t hesitate to [contact us](https://addpipe.com/contact/). We’ll be happy to help you!