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

# How To Use The Modal Plugin For Your Virtual Tour Projects
- URL: https://gothru.co/docs/how-to-use-the-modal-plugin-for-your-virtual-tour-projects/
- Published: 2022-07-16T07:00:09.000Z
- Updated: 2022-07-16T09:58:35.000Z
- Description: Modal plugin from GoThru for the Virtual Tour Editor will allow you to place a popup window over the currently active pano
- Author: Syafriko Yuliusman
- Tags: Overlay Editor

Modal plugin from GoThru for the Virtual Tour Editor will allow you to place a popup window over the currently active pano which is particularly useful for displaying additional information to tour visitors that they can access from any pano, such as a help window or contact info. You can also link the button to the control bar or have it function independently, as demonstrated in the preceding example.

### Here are the simple steps on how to add the modal button.

1\. Click on the **“+”** icon (*A* key) to open the **Plugin Manager** then select **Modal**.

![](https://lh4.googleusercontent.com/mipd5UolwH9HpAfrR3gX6A7i5rjQ6BTPnvPS1EjS-mqa7h0xiGUdMxUjzTO3gWkQKLXggi_JffTsyoWk79_oAjg3cdlsJJXkDRyDi93aKrelo1hOTb03qGK856zgnTviMPMi9ytac7Qi7Uhnmv0fhsg)

2\. On the right panel, you see the active plugin settings and the default modal button appear at the top-right corner.

![](https://lh6.googleusercontent.com/u7tN1tZKkBjlXivnmWmq6LsKP3fofOBX14WoErOee9XJl3dl_Xy-kSre-QpelmRjjdQO4jKcWM5GEASWZKYC4B7gN_jIhCPhbMxk__6SM2DnG2YLje5oq_6TJ8OrkQpjb8AjQlNFH5HHv3aKyDdKP_s)

3\. Under the plugin settings, you can modify the modal button and its setups such as content, button position, margin, colors and CSS styles.

![](https://lh3.googleusercontent.com/lnfJONtZtODiGFBsSQbtlJtDzPPyLRAOtc2HzJcgZZVHlNiX59Am-miNlhbQByFxItGJafTa0ubZ0S33Ziz4DZKz4nz4b5g-UIlw4mrX7FCC9Bc8fylPRLoZGSLSzvXQi7BrmjGTAluMF8NFsQ)

4\. The content section is where you can add contents to the popup -- *simple, with\_media, media, html and iframe.*

![](https://lh5.googleusercontent.com/-G8m-cb8XoYKU7_O8p8kzphIq4L-IO_U-l9DHpG925sKN3BizcyHkxgQ9kS8jctPHK2M6YEymCm98FIo6Pfl_HXG0V-yowBNJB4Skdj7UELhBiwg-e0fFOzc2GYRcW3Drro--s9lGadpbJmS4qkXnw)

5\. Let's try **Media**. Select the media type. **Media type > Image**. Then add an image to the popup.

![](https://lh6.googleusercontent.com/OY82ypBkHa5eYO6FOKXOtsJSeIOWdrRe8AWTRWBuCytVzimb8ZK8Io-FOaNuj-gGRihDK3VvoX2-uLaZu7bWrNOUOvijUTHC3zvgyJ_CPWZ6A-nhB2LVyQ42-ZAcKsuO1j8rT7Vu0HPOqvVfnpZ8fQ)

6\. The most important feature is that you can move the modal button to the active control bar. Toggle on to move the button to control bar.

![](https://lh4.googleusercontent.com/8ao4zbZSFgMh9NJOfuAz6qOR_z2MhQMzQ89Ib8s1YHyTULI1PkGPURWA0hqtrFzA0sksanl4UF15PP20wDYjSJ33vWyhB1tr4BlyqPgiyH5-3KhVhndaoXQWZdoCm5pZng1BzZVQvmXfWMNrDg)

7\. If you prefer to separate the button from the control bar, you can choose the position of the modal button - side or corner positions. Defaults to the top-right corner.

![](https://lh3.googleusercontent.com/Br4B7-x1zSTqGQvi3rzaGNWu9OWCWCjerqotzngCGaW4b3_x5OBWbCYUzYanu93c__2ldY1IFJMqjcTBkCZ0ZIkCWu5Pe4DHyggm1AKYF36GZ1k5mrAKN3RQNGBh2hOrI7SiDtv3goMXFbs1ZNPkdg)

8\. Finally, use the **Color Settings** to change the colors of the modal button.

![](https://gothru.co/docs/content/images/2022/07/image-3.png)

9\. Now the new modal button is ready to be used.

![](https://lh6.googleusercontent.com/5ssuufvFpNg6haVa2sga8bnTEBJ6uqdgjp3Rr3Bk-OSd6Jcd3DvNEsS5bPyNSyi00QWISKIpIA3tw8fDV72-Pcu1p0J9P63OnnVlMXI8cXyPSM5Ql_BNQFSvH8QUC9rhLOfmr7iXl4Oaki5Htg)