How to customise your embed
On this page
Quick answer
Use your website editor to position the viewing and set its available width. Adjust the iframe’s height if needed, then check the published page on desktop and mobile. Keep the viewer address from your post-scan email unchanged.
- You’ll need
- An embedded viewing and access to your page layout
You can control the space your visualisation occupies on the page. Start with the supplied snippet, then adjust the surrounding layout to work with your site.
Explain the viewer controls
To help your website visitors navigate your viewing, we might suggest adding a short text block above or below the iframe to explain how to move around your space. Here are some suggested instructions:
Move around with the arrow keys or the WASD keys on your keyboard. Look around by moving your mouse.
Move around by dragging the white joystick in the bottom left, and look around (with your other thumb) by dragging on the right side.
If your website editor offers device-specific visibility, show the desktop instructions on desktop and the touch instructions on mobile and tablet layouts. Otherwise, display both with clear labels.
Keep these text elements outside the iframe and close to the viewing, so visitors can find the instructions without covering any controls.
Adjust the width and position
Place your embed in the section where visitors will expect to see the space, such as beside property information or below a photo gallery. Use a wide content area for comfortable viewing.
Keep width: 100% in the iframe’s style so it follows its container. Change the container’s maximum width or alignment in your website editor. Avoid a fixed minimum width that makes the page scroll sideways on a phone.
Give the viewer enough height
Begin with the height in your supplied snippet. If you are creating your own layout, 600 pixels is a useful starting point, then adjust it for your page. Leave room for the controls at the edges of the viewing.
Change the height value in the iframe’s style attribute. In builders such as Wix, Google Sites and Unbounce, resize the outer embed element too. Making only the inner iframe taller can leave it cropped.
height: 100% only works as expected when the parent has a defined height. Use an explicit height if the viewing collapses or becomes a narrow strip.
Adapt the layout for smaller screens
Review the mobile layout in your editor and on a real phone. A wide desktop viewing can become too short when reduced to the same proportions on a small screen.
If you edit HTML directly, you can give the height a lower and upper limit. This example stays between 420 and 720 pixels tall, with a preferred height of 65% of the browser viewport. These are layout suggestions, not VBlank requirements.
<iframe
src="https://viewer.vblank.co.uk/embed?asset=YOUR_ASSET_ID"
title="Explore our space in 3D"
style="display: block; width: 100%; height: clamp(420px, 65vh, 720px); border: 0;"
allow="fullscreen; gamepad; pointer-lock"
allowfullscreen
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
></iframe>Replace YOUR_ASSET_ID before using this example. When you already have your supplied snippet, change its sizing style and keep the rest of your code.
Style the surrounding page
Your editor can change the section’s background, spacing, headings and border around the viewing. The embedded viewer is a separate page, so your website’s fonts and CSS do not restyle the controls inside it.
For changes to the visualisation itself, email contact@vblank.co.uk or call +44 (0)7831 086 427 (WhatsApp) with your asset ID.
Check your changes
- Make sure every control remains visible in both desktop and mobile layouts.
- Leave room outside the viewer for visitors to scroll your website.
- Check that neighbouring elements do not overlap the viewing.
- Publish the updated page and test it at its public address.
Still need help?
For help, email contact@vblank.co.uk or call +44 (0)7831 086 427 (WhatsApp).
Have your asset ID and website address ready. Tell us which provider you use and where you’re getting stuck.