us flag
4th july

Let's celebrate with a

Get 20% discount
Eid Mubarak

How To Set Hotspot Content Easily Inside Virtual Tour – Using WYSIWYG HTML Editor

Good news! Setting up hotspot content inside your virtual tour is now much easier.

Previously, you had to use custom codes if you wanted to show Images, Videos, Hyperlinks, Headings, etc.

Now, the WPVR has WYSIWYG HTML editor support – to make your work easier.

You can now add different Font Styles, Colors, and Font Families to your hotspot text content.

Not only that, but you can also add bulleted or numbered lists and table views.

And like before, you can show a Heading, an Image, a Paragraph, and a Hyperlink – everything into the same hotspot.

And all these are applicable for both:

  • On-Click Content.
  • On-Hover Content.

So, let’s learn how you can do that.

Set Hotspot Content Easily Inside Virtual Tour – Using WYSIWYG HTML Editor  #

Here is how you can set different content on your hotspots.

i. Style:  #

If you’re going to use Text in the hotspots, you can choose the style for it.

Simply type the text in the field and choose its style.

Text Style for Hotspot Content

You can turn the text into Headers, Quotes, or simply keep it as a Paragraph.

Header, Quote, & Paragraph in Hotspot Content

You can set a text as a Header like this:

Header in Hotspot Content

Then add another text as a Paragraph below that.

Paragraph in Hotspot Content

Now, if you click on Preview, the hotspot will appear like this:

Header and Paragraph Preview

This way, you can set multiple texts with different styles to show on hotspots.

ii. Bold Text and Underlined Text: #

After adding a text, you can simply choose to show it in Bold:

Bold Text in Hotspot Content

Here you can see it in the Preview.

Bold Text Hotspot Preview

You can also choose to Underline a text.

Underlined Text in Hotspot Content

Here is the underlined text in Preview mode:

Underline Test Hotspot Preview

iii. Font Family: #

You can add different font types with our new editor as well.

You’ll find a collection of fonts that you can use for each text.

Font Family for Hotspot Content

By default, the font is always sans-serif.

But you can select your preferred one from this list.

Let’s add a Comic Sans MS and see how it appears on the Frontend.

Text Font Hotspot Preview

iv. Font Background Color & Text Color #

You can select the text background from a variety of color palettes included in the WYSIWYG Editor.

Text Color for Hotspot Content

v. Ordered List, Unordered List & Alignment #

With the first two of these options, the user can simultaneously add a Bullet List and an Ordered List to the hotspot.

List and Alignment Options - Hotspot Content

And with the third option, you can fix the alignment of the hotspot content.

Here’s an example with an ordered list and centered alignment text:

List & Alignment in Preview

vi. Images #

The process of adding images to hotspots is now much easier.

Click on this option to add an image:

Set Image as Hotspot Content

A popup will appear where you can upload the image or add the URL of an image that you want to set here.

Upload Image for Hotspot Content

After successfully adding the image, here’s what you’ll see:

Image Added to Hotspot

And on the virtual tour, here is how it’ll appear:

Image as Hotspot Content

vii: Videos #

To add a video to your hotspot, click on this video icon.

Set Video to Hotspot

A popup will appear where you can insert the URL of your desired video.

Use Video URL for Hotspot

After you’ve set the video URL, it’ll appear like this:

Video Added to Hotspot

On the virtual tour, it’ll look like this:

Video Content in Hotspot

You can play the videos directly from the hotspot.

viii. Hyperlink #

To set a Hyperlink, click on the link icon shown here:

Hyperlink as Hotspot content

This pop-up will appear.

Here you can set the both text and the URL that you want to use.

Set Hyperlink for Hotspot Content

Bonus: Code View of the Hotspot Content #

Once you’ve set any content on your hotspot, you can choose to see the HTML version of it.

For this, just click on this HTML icon:

Code View of Hotspot Content

As you can see, the process of adding content to your hotspots has become much easier.

To customize your hotspots even more, follow this to set custom hotspot icons and colors.