--- title: How To Set Hotspot Content Easily Inside Virtual Tour – Using WYSIWYG HTML Editor description: "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**](https://wordpress.org/plugins/wpvr/) has **WYSIWYG HTML** editor support -…" url: "https://rextheme.com/docs/wysiwyg-html-editor-hotspot-content-virtual-tour/" updated: "2026-01-08" category: "WP VR / Use Hotspots for Navigation & Information" --- # 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**](https://wordpress.org/plugins/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](https://rextheme.com/wp-content/uploads/2022/06/2.-Font-Style.png)](https://rextheme.com/wp-content/uploads/2022/06/2.-Font-Style.png) You can turn the text into **Headers**, **Quotes**, or simply keep it as a **Paragraph**. [![Header, Quote, & Paragraph in Hotspot Content](https://rextheme.com/wp-content/uploads/2022/06/3.-Header-Quote-Paragraph-in-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/3.-Header-Quote-Paragraph-in-Hotspot-Content.png) You can set a text as a **Header**like this: [![Header in Hotspot Content](https://rextheme.com/wp-content/uploads/2022/06/4.-Header-in-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/4.-Header-in-Hotspot-Content.png) Then add another text as a **Paragraph** below that. [![Paragraph in Hotspot Content](https://rextheme.com/wp-content/uploads/2022/06/5.-Paragraph-in-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/5.-Paragraph-in-Hotspot-Content.png) Now, if you click on **Preview**, the hotspot will appear like this: [![Header and Paragraph Preview](https://rextheme.com/wp-content/uploads/2022/06/6.-Header-and-Paragrapgh-Preview.png)](https://rextheme.com/wp-content/uploads/2022/06/6.-Header-and-Paragrapgh-Preview.png) 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](https://rextheme.com/wp-content/uploads/2022/06/7.-Bold-Text-in-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/7.-Bold-Text-in-Hotspot-Content.png) Here you can see it in the **Preview.** [![Bold Text Hotspot Preview](https://rextheme.com/wp-content/uploads/2022/06/9.-Bold-Text-Hotspot-Preview.png)](https://rextheme.com/wp-content/uploads/2022/06/9.-Bold-Text-Hotspot-Preview.png) You can also choose to **Underline** a text. [![Underlined Text in Hotspot Content](https://rextheme.com/wp-content/uploads/2022/06/8.-Underlined-Text-in-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/8.-Underlined-Text-in-Hotspot-Content.png) Here is the underlined text in **Preview** mode: [![Underline Test Hotspot Preview](https://rextheme.com/wp-content/uploads/2022/06/10.-Underline-Test-Hotspot-Preview.png)](https://rextheme.com/wp-content/uploads/2022/06/10.-Underline-Test-Hotspot-Preview.png) ### 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](https://rextheme.com/wp-content/uploads/2022/06/11.-Font-Family-for-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/11.-Font-Family-for-Hotspot-Content.png) 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](https://rextheme.com/wp-content/uploads/2022/06/12.-Text-Font-Hotspot-Preview.png)](https://rextheme.com/wp-content/uploads/2022/06/12.-Text-Font-Hotspot-Preview.png) ### 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](https://rextheme.com/wp-content/uploads/2022/06/13.-Text-Color-for-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/13.-Text-Color-for-Hotspot-Content.png) ### 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](https://rextheme.com/wp-content/uploads/2022/06/14.-List-and-Alignment-Options-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/14.-List-and-Alignment-Options-Hotspot-Content.png) 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](https://rextheme.com/wp-content/uploads/2022/06/15.-List-Alignment-in-Preview.png)](https://rextheme.com/wp-content/uploads/2022/06/15.-List-Alignment-in-Preview.png) ### 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](https://rextheme.com/wp-content/uploads/2022/06/16.-Set-Image-as-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/16.-Set-Image-as-Hotspot-Content.png) 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](https://rextheme.com/wp-content/uploads/2022/06/17.-Upload-Image-for-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/17.-Upload-Image-for-Hotspot-Content.png) After successfully adding the image, here's what you'll see: [![Image Added to Hotspot](https://rextheme.com/wp-content/uploads/2022/06/18.-Image-Added-to-Hotspot.png)](https://rextheme.com/wp-content/uploads/2022/06/18.-Image-Added-to-Hotspot.png) And on the virtual tour, here is how it'll appear: [![Image as Hotspot Content](https://rextheme.com/wp-content/uploads/2022/06/19.-Image-as-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/19.-Image-as-Hotspot-Content.png) ### vii:**Videos** To add a video to your hotspot, click on this video icon. [![Set Video to Hotspot](https://rextheme.com/wp-content/uploads/2022/06/20.-Set-Video-to-Hotspot.png)](https://rextheme.com/wp-content/uploads/2022/06/20.-Set-Video-to-Hotspot.png) A popup will appear where you can insert the URL of your desired video. [![Use Video URL for Hotspot](https://rextheme.com/wp-content/uploads/2022/06/21.-Use-Video-URL-for-Hotspot.png)](https://rextheme.com/wp-content/uploads/2022/06/21.-Use-Video-URL-for-Hotspot.png) After you've set the video URL, it'll appear like this: [![Video Added to Hotspot](https://rextheme.com/wp-content/uploads/2022/06/22.-Video-Added-to-Hotspot.png)](https://rextheme.com/wp-content/uploads/2022/06/22.-Video-Added-to-Hotspot.png) On the [virtual tour](https://wordpress.org/plugins/wpvr/), it'll look like this: [![Video Content in Hotspot](https://rextheme.com/wp-content/uploads/2022/06/Video-Content-in-Hotspot.png)](https://rextheme.com/wp-content/uploads/2022/06/Video-Content-in-Hotspot.png) 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](https://rextheme.com/wp-content/uploads/2022/06/Hyperlink-as-Hotspot-content.png)](https://rextheme.com/wp-content/uploads/2022/06/Hyperlink-as-Hotspot-content.png) 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](https://rextheme.com/wp-content/uploads/2022/06/Set-Hyperlink-for-Hotspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/Set-Hyperlink-for-Hotspot-Content.png) ### **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](https://rextheme.com/wp-content/uploads/2022/06/Code-View-of-Hostspot-Content.png)](https://rextheme.com/wp-content/uploads/2022/06/Code-View-of-Hostspot-Content.png) 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.](https://rextheme.com/docs/wp-vr-customize-hotspot-icons-and-color/)