---
title: How To Embed WPVR Virtual Tours Using Visual Composer Element
description: "If you're using [Visual Composer Website Builder](https://visualcomposer.com/), you can easily embed [WPVR](https://wordpress.org/plugins/wpvr/) virtual tours on your WordPress website. [**WPVR**](https://wordpress.org/plugins/wpvr/) has a dedicated Visual Composer element named **WP VR Visual Composer Element** that you can use to: - Find any specific…"
url: "https://rextheme.com/docs/embed-wpvr-tours-using-visual-composer-element/"
updated: "2026-01-09"
category: WP VR / WP VR Plugin Integrations
---

# How To Embed WPVR Virtual Tours Using Visual Composer Element

If you're using [Visual Composer Website Builder](https://visualcomposer.com/), you can easily embed [WPVR](https://wordpress.org/plugins/wpvr/) virtual tours on your WordPress website.

[**WPVR**](https://wordpress.org/plugins/wpvr/) has a dedicated Visual Composer element named **WP VR Visual Composer Element** that you can use to:

- Find any specific virtual tour from your saved tour list easily.
- Customize the width of your virtual tour.
- Assign a fixed height to your virtual tour.
- Set a radius to your virtual tour.

In this guide, you'll learn how to use the **WP VR Visual Composer Element** to publish a virtual tour on your website.

Let's get started.

## **Embed Virtual Tours Using Visual Composer Element**

Once you have created at least one virtual tour using [**WPVR**](https://wordpress.org/plugins/wpvr/), follow the steps below:

### **Step 1:**

Choose to edit an existing page or a new page on your website using **Visual Composer**.

[![Edit with Visual Composer](https://rextheme.com/wp-content/uploads/2021/03/Edit-with-Visual-Composer.png)](https://rextheme.com/wp-content/uploads/2021/03/Edit-with-Visual-Composer.png)

### **Step 2:**

On the search bar for **Visual Composer Elements**, type **"WP VR"**.

[![WP VR Visual Composer Element](https://rextheme.com/wp-content/uploads/2021/03/WP-VR-Visual-Composer-Element.png)](https://rextheme.com/wp-content/uploads/2021/03/WP-VR-Visual-Composer-Element.png)

The thumbnail for the **WPVR Visual Composer Element** will appear on the result.

Now if you hover on the thumbnail, you will see the preview image of this add-on.

[![WPVR Visual Composer Element](https://rextheme.com/wp-content/uploads/2021/03/WPVR-Visual-Composer-Element.png)](https://rextheme.com/wp-content/uploads/2021/03/WPVR-Visual-Composer-Element.png)

### **Step 3:**

Drag the **WP VR thumbnail**, and drop it on your page where you want to publish the tour.

[![Visual Composer Element for Virtual Tours](https://rextheme.com/wp-content/uploads/2021/03/Visual-Composer-Element-for-Virtual-Tours.png)](https://rextheme.com/wp-content/uploads/2021/03/Visual-Composer-Element-for-Virtual-Tours.png)

It will add the element on your page and give you the options to set your **Tour ID**, **Tour Width**, **Tour Height**, and **Radius** of the tour.

These fields will be available here:

- **WP VR ID**
- **WP VR Width**
- **WP VR Height**
- **WP VR Radius**

#### **WP VR ID or Virtual  Tour ID:**

This is a drop down field and if you click on it:

[![Virtual Tour Titles list](https://rextheme.com/wp-content/uploads/2021/03/Virtual-Tour-Titles-list-.png)](https://rextheme.com/wp-content/uploads/2021/03/Virtual-Tour-Titles-list-.png)

- **It will show the titles of the saved tours on your site.**
- **The titles will appear from the latest to the oldest.**

Choose your desired tour from this list.

#### **WP VR Width:**

Here, you can set a width for your virtual tour on the front-end.

[![WordPress Virtual Tour Width](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Width-.png)](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Width-.png)

- **Assign only positive numerical pixel values here. For example, 500px.**
- **You can use the 'fullwidth' tag here, your tour will take the full width of the container.**
- **Do not set any percentage or text here.**

If you've chosen a **Tour ID**, it will appear in the element along with your width value.

#### **WP VR Height:**

In this field, you can set a custom height value to your virtual tour for the front-end.

[![WordPress Virtual Tour Height](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Height.png)](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Height.png)

- **Assign positive numerical pixel values here. For example, 350px.**
- **Do not set any percentage here.**

#### **WP VR Radius:**

This field allows you to set a radius for your virtual tour.

[![WordPress Virtual Tour Radius](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Radius.png)](https://rextheme.com/wp-content/uploads/2021/03/WordPress-Virtual-Tour-Radius.png)

- **Assign only positive numerical pixel values here. For example, 5px.**
- **Do not set any percentage or text here.**

***You can also keep this field empty, then no radius will be assigned to your tour.*

### **Step 4:**

Once you've set these for your **tour**, **publish** or **update** the page. Here is how the virtual tour will look like once you've published on your page:

[![Visual Composer Published Virtual Tour](https://rextheme.com/wp-content/uploads/2021/03/Visual-Composer-Published-Virtual-Tour.png)](https://rextheme.com/wp-content/uploads/2021/03/Visual-Composer-Published-Virtual-Tour.png)

That's it.

As you can see, it's really easy to publish [**WPVR**](https://wordpress.org/plugins/wpvr/) virtual tours on your WordPress website using **Visual Composer Website Builder**.