Link to a Website

Point Hotspots can be used to direct a user to an external URL (any file or webpage that exists outside of the project). The most basic of these is to link to a webpage/website.

There are a few ways to create a URL point hotspot.

Drag in the URL

The easiest is to simply drag in the URL to the Viewer.

1. Change the Viewer mode to Point Hotspot. ★Tip: Use the keyboard shortcut, P.
2. Drag in the URL to the Viewer.

Pano2VR will recognize the URL and set the hotspot type as URL. It will also import the webpage’s title to the Title field.

The URL will be added to the Link Target URL field.

Manually add a URL Type Point Hotspot

1. Change the Viewer mode to Point Hotspot.

2. Double-click in the Viewer to add a point hotspot.

3. In the hotspot properties, choose URL for the Type.

4. (Optional) Give the link a Title. This will appear as a tooltip when the mouse hovers over the hotspot.

5. Add the URL to the Link Target URL field. ✭ The web link must be absolute; meaning http:// or https:// must be included in the address. http://www.example.com

6. (Optional) In the Link Target URL field, use the menu to choose how the page will open. _blank will open the page in a new browser window or tab.

7. Output and test the project.

A URL hotspot will be given the Skin-ID of ht_url. If you use one of the built-in skins an icon specifically used for URL hotspots will be applied.

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]../../../create-skin/elements/hotspot-template/_index.md 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 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.

See also…

• About Hotspots

• Learn about Targets

• Point Hotspots

• Polygon Hotspots

• Viewer