Create a Website Popup

Learn how to create a popup up window using the URL type Point Hotspot and a Text Element in the skin.

Open a Webpage in a Pop-up Window

With a little work in the Skin Editor, you can
open a webpage in a popup window so visitors aren’t taken out of the
VR
tour. In this
exercise, we’ll open a webpage in a
Text Box that pops up.
However, a pop-up can be added to the skin using the
built-in point hotspot components.

1. Add a URL-type point hotspot.

   

2. Open the Skin Editor to create a new skin using the Skin Editor button in the
   Toolbar. Or open an existing skin. Or edit the skin added in the Web Output.

3. Add a
   Point Hotspot Template
   to the skin.

4. Change its ID to ht_url.

5. Add an icon for Point Hotspot. For this exercise, we’re using an icon from
   the Venis icon set in the
   Components Toolbox.

6. Make the icon a child of the hotspot template.

7. In the position settings, set the Anchor to center.

8. Double-click on the word, Position to center the icon directly over the
   template.

   

9. Add a variable. Click in the
   Canvas to open the skin’s settings. Add a variable to the variable table:

   • Name: vis_popup
   • Type: True/False
   • Init Value: false

10. Draw a large
    Text Box in
    the Canvas.

11. Change its ID to url_popup.

12. Position the text box in the center of the canvas: Choose, center, for the
    Anchor. Then double-click on Position to center the text box.

13. Change the value of Size from Pixels to Percent. Set the Width
    to 80 and the Height to 75.

14. In the Appearance Settings, deselect Visible and add a
    Logic Block
    to show the popup only when the variable is true:

    • Trigger = Variable > vis_popup
    • Comparison = =
    • Value = true
    • Visible = true
      

      

15. In the Rectangle settings, change the Background color, border width,
    radius, and color.

16. In the Text settings, remove the word, “text”.

17. Select the Point Hotspot Template and add action to load the website in an
    iframe and add it to the text box:

    • Source = Mouse Click
    • Action = Set Value
    • Value =
      <iframe src="$(hu)" style="border:0px #ffffff none;" name="kitchen" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>
    • Target = url_popup

18. Add another action that changes the variable to true:

    • Source = Mouse Click
    • Action = Set Variable Value
    • Variable Name: vis_popup
    • Operation = Set(=)
    • Value = true
      

      

19. Save the skin and make sure it’s selected as the skin in the Web Output.

All other hotspot type popups are created similarly. Use the built-in the
hotspot components as examples.

See also…

• Working with Hotspots

• Point Hotspots

• Polygon Hotspots