Add a VBlank viewing to your website with HTML

Before you begin

Open the direct link from your post-scan email and check the visualisation. Use the matching iframe snippet when editing the website. An iframe loads the VBlank viewer inside your page; the viewer and visualisation remain hosted by VBlank.

For a managed website editor, check our provider guides first.

Insert your iframe

1. Open the HTML or template for the page where you want the viewing.
2. Paste your supplied snippet inside the <body>, at the position where the viewer should be visible. In a content editor, use an HTML or embed-code block.
3. Give the surrounding section enough room for the iframe’s full height and width.
4. Save your changes and deploy or publish the page through your usual website workflow.

The following is an example of the format. Your supplied snippet is ready to use and takes precedence over this example.

<iframe
  src="https://viewer.vblank.co.uk/embed?asset=YOUR_ASSET_ID"
  title="Explore our space in 3D"
  style="display: block; width: 100%; height: 600px; border: 0;"
  allow="fullscreen; gamepad; pointer-lock"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Before using the example, replace YOUR_ASSET_ID with the exact asset ID from your post-scan email and give title a description of the space. Keep the asset ID’s capitalisation. If you construct the URL in code, URL-encode the asset ID as a query parameter.

Set the viewer’s dimensions

width: 100% fills the available container width. The example uses height: 600px as a starting point; adjust it to suit your page and check it on a phone. border: 0 removes the browser’s default iframe border.

A percentage height needs a parent with a defined height. If you are unsure, use a pixel height or follow our sizing guide. Keep display: block to avoid a small baseline gap below the iframe.

Keep the supplied attributes

Preserve the supplied snippet’s allow and allowfullscreen attributes when placing it in a template. Full screen and input behaviour also depend on the browser and any frame added by your provider.

loading="lazy" lets the browser defer an off-screen viewer. Keep the descriptive title and the supplied referrerpolicy.

If your site uses a Content Security Policy, your developer should ensure its frame-src rules permit https://viewer.vblank.co.uk. If a sandbox is required by your site, ask your developer to check the permissions the viewer needs.

Verify the published page

Open the page outside your editor, check that the correct scene loads and try the movement and full-screen controls. Test on desktop and a phone. Add a regular link to the direct viewing address beside the iframe if you want visitors to have a separate way to open it.

For a blank frame or missing controls, use the troubleshooting guide.