Pinning Web Elements

Learn how to pin a web element, in this example, a wikipedia page, to a tour node.

The web element is great for adding webpages to a tour node and having them properly distorted within the image. On output, the webpage is fully interactive.

  1. Select the node that should have the web element. Our example is a CG rendered model, and includes a laptop. Here, we’ll add wikipedia webpage.

  2. Select Web Elements from the Elements Drawer.

  3. Double-click in the Viewer. This adds a transparent checkerboard with red corner handles (dots). Drag those corner handles to match the area of what the web element should cover. In our example, it should fit within the laptop’s screen. Tip: Make the Viewer bigger by hiding all the other panels with CMD-Option (macOS) or CTRL-Alt (win).

  4. In the Properties, add an iframe. An iframe an HTML element that is used to embed a web element inside the current document.

    Below is the code we used:

<iframe src="https://en.wikipedia.org/wiki/Kitchen" style="border:0px #ffffff none;" name="kitchen" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> 

Notice that the attribute, scrolling, is used and set to yes. This is needed if you’d like to have the webpage scroll.

Save the project and export it.


See also

Last modified: 2022-12-12