3Sixty Studio Docs

Docs Building a tour

Custom HTML pages

Custom HTML pages let you show anything a web page can show: a contact form, a product sheet, an embedded map, a quiz. You write them in the built-in code editor and show them with a Show Iframe action.

Create a page

  1. Open the Custom HTML section and create a new page.
  2. Enter a name, for example Opening hours. The file becomes Opening hours.html in the project's customhtml/ folder.
  3. The page opens in the code editor with a starter template: a heading, a paragraph, a <style> block and an empty <script> block.

Characters that are not allowed in file names (such as / : * ? " < > |) are replaced with a dash. If the name is already taken, a number is added: Opening hours (1).html.

The code editor

  • Syntax highlighting for HTML, CSS inside <style> and JavaScript inside <script>, with line numbers and foldable blocks.
  • Save with the button or Ctrl+S (Cmd+S on Mac).
  • If you leave with unsaved changes, you are asked to Save, Discard or Cancel.

Live preview

Turn on the preview to see the page as visitors will. On screens 900 px or wider the preview sits next to the code; on narrower screens you switch between code and preview. The preview reloads every time you save, and has its own Reload preview button.

The preview is served from the project folder, just like the tour, so relative links to your media work:

<img src="../images/logo.png" alt="Logo">
<video src="../videos/intro.mp4" controls></video>

Show a page in the tour

Add a Show Iframe action to a hotspot or 3D object and choose your page. In the tour it opens in a pop-up window with an Open in new tab ↗ link. The same action also accepts an external web address.

Rename and delete

When you rename a page, every Show Iframe action that points to it is updated automatically: on hotspots, tour map pins and 3D objects. The rename is refused if another page already has that name.

Ideas

  • An info card for a room, styled to match your brand.
  • An embedded Google Map or booking widget (paste the provider's embed code).
  • A button that jumps the tour to another panorama. Code in the iframe runs in its own page, so call the tour through parent: 
    <button onclick="parent.switchPanorama('garden.jpg'); parent.__3sixtyCloseOverlay();">
  Go to the garden
</button>