1. Home
  2. Docs
  3. WP VR
  4. How to Embed Virtual Tour And Customize It

How to Embed Virtual Tour And Customize It

You can embed a virtual tour on your website in 3 ways:

You can control the width and height and radius of your virtual tours by following the instructions here.

Embed and Customize Virtual Tour Using WPVR Gutenberg Block 

If you’re using Gutenberg, you will find the WPVR block, under the common blocks, to embed a virtual tour. 

WPVR Gutenberg Block

You can also just search for WPVR and this block will appear.

Once you choose the WPVR block, you will see the following:

Embed Virtual Tour

For this block, look at the options on the right side.  You’ll see the following options:

WPVR Block Options
  • Id
  • Width
  • Height
  • Radius

Choose the Id of your desired WPVR tour that you wish to embed

Set the Width of the tour as you desire.

  • Assign a positive numeric value which will be used as px. For example, 600
  • Or, you can use a percentage. Example: 90%
  • If you wish the tour to be full-width of the page, the use the text ‘fullwidth’

Set the Height of the tour as you desire.

  • Only assign a positive numeric value which will be used as px. For example, 400
  • Do not use percentage or any text

Set the Radius of the tour as you desire (to create round edges of the tour).

  • Only assign a positive numeric value which will be used as px. For example, 10
  • Do not use percentage or any text

That’s it. Now you can preview the tour to see how it looks.

Embed and Customize Virtual Tour Using WPVR Elementor Widget 

If you’re using Elementor, you will find the WPVR widget, under the common widgets, to embed a virtual tour to your website.

WPVR Elementor Widget

Find it by searching for WPVR on the Elements section.

Or you can simply find it by scrolling down on the General section of Elements.

Drag and drop the widget in the container you want to embed the virtual tour on. On the left side, you will find the following options:

WPVR Elementor Widget Options
  • Id
  • Width
  • Height
  • Radius

Choose the Id of your desired WPVR tour that you wish to embed.

Set the Width of the tour as you desire.

  • Assign a positive numeric pixel value. For example: 600px
  • Or, you can use a percentage. Example: 90%

Set the Height of the tour as you desire.

  • Only assign a positive numeric pixel value. For example: 400px
  • Do not use percentage or any text

Set the Radius of the tour as you desire (to create round edges of the tour).

  • Only assign a positive numeric pixel value. For example: 10px
  • Or, you can use a percentage. Example: 5%

That’s it.

Embed and Customize Virtual Tour Using Shortcode 

If you’re using the Classic Editor, you have to use shortcodes to embed a virtual tour on a page.

On the edit mode of your tour, you can see a box like this named Using this tour:

WPVR Virtual Tour Shortcode

Copy and paste the shortcode on your page and edit it like this:

 [wpvr id = "15389" width = "1200px" height = "400px" radius = "0px" ]
 [wpvr id = "15389" width = "90%" height = "400px" radius = "0px" ]
 [wpvr id = "15389" width = "fullwidth" height = "400px" radius = "0px" ]

Or you can copy the format from here and edit it to match your needs.

Set the Width of the tour as you desire.

  • Assign the width in pixels. For example: width= “600px”
  • Or, you can use a percentage. Example: 90%
  • If you wish the tour to be full-width of the page, then use the text ‘fullwidth’.

Set the Height of the tour as you desire.

  • Only assign a positive numeric value which will be used as px. For example, 400
  • Do not use percentage or any text

Set the Radius of the tour as you desire (to create round edges of the tour).

  • Only assign a positive numeric value which will be used as px. For example, 10
  • Do not use percentage or any text

That’s it. Now you can preview the tour to see how it looks.