Popup appearance

The popup editor’s Appearance tab sets a popup’s colors, size and spacing, for a hotspot’s popup and a theme menu item’s popup alike. The Live preview shows the result; click Save popup to keep it. Everything here is available on all plans.

• Colors: Popup background (white to start with) and Overlay, the color laid over the tour around the popup (half-transparent black to start with).
• Size:
  • Width, in pixels: 600 to start with.
  • Height: Auto (the default) makes the popup as tall as its content, up to Max height. Fixed sets a height in pixels, and longer content scrolls inside the popup.
  • Max width and Max height, in percent of the tour’s window: 90 to start with. The popup never grows past them, so on a small screen a wide popup shrinks to fit.
• Spacing and corners: Padding, the space between the popup’s edge and its content (24 px to start with), and Corner radius (16 px).

Visitors close a popup with the close button on its top-right corner, or by clicking or tapping the tour around it.

Make a popup cover the screen:

For a video that should fill the whole screen, Play full screen (see the video notes below) is simpler and doesn’t depend on these settings.

1. In the popup editor, click the Appearance tab.
2. Under Size, set Width to 4000, and Max width and Max height to 95.
3. Under Height, click Fixed and set it to 4000. The popup then grows until the maximums stop it, so it covers 95% of the tour’s window on every screen. For a video, Auto often looks better: the popup is then only as tall as the video, in the middle of the screen.
4. Under Spacing and corners, set Padding and Corner radius to 0, so the content reaches the popup’s edges.
5. Click Save popup.

• Why 95 and not 100: at 100 the popup covers the window edge to edge, but its close button, which sits on the popup’s corner, is then mostly off the screen, and no part of the tour is left to click to close the popup. At 95 a thin edge of the tour shows, and the close button stays in view.
• Dark backgrounds: the close button takes the popup’s background color and has a dark ×, so on black or another dark color it is hard to see.
• The tour’s window, not the whole screen: the browser’s own bars stay, and on a website that embeds the tour, the popup covers only the tour’s frame. Once a visitor has put the tour in full screen with the tour’s full-screen button, the popup covers the whole screen; iPhones don’t allow that.
• Videos keep their shape, so a video seldom fills the popup exactly:
  • An uploaded video spans the popup’s full width. On a computer, a landscape (16:9) video is then usually a little taller than the popup, so its bottom, with the player’s controls, shows only when visitors scroll the popup.
  • A YouTube, Vimeo or TikTok video stops growing at 640 px tall, or at 70% of the window’s height, so on a computer it doesn’t reach the popup’s edges.
  • To watch on the whole screen, visitors press the full-screen button in the video’s player.
  • Play full screen: to have a video fill the screen as soon as the popup opens, whatever the popup’s size, tick Autoplay and then Play full screen in the Embed Video dialog (YouTube and Vimeo; TikTok has no such option). For an uploaded video, select it in the editor and tick Autoplay and then Full screen in its toolbar. Computers, Android phones and iPads then show the video on the whole screen. iPhones, and a popup opened from a shared link (see Deep Link Pro add-on), show it over the tour’s whole window, with the browser’s bars. From a shared link, browsers usually don’t start a video with sound by itself: visitors press play, unless Muted is ticked. An uploaded video with Controls off has no play button, so tick Muted for it too. The button in the top-right corner or Esc puts the video back in the popup, and so does the player’s own full-screen button when the video fills the whole screen; an uploaded video also goes back by itself when it ends.