VBlankSupport

Add a VBlank viewing to your Webflow site

Updated 3 min read

On this page

Quick answer

Add a Code Embed element in Webflow, paste the VBlank iframe snippet and save it. Size its container at each breakpoint and publish your changes.

You’ll need
Your iframe snippet and Webflow editor access

Add an interactive viewing to your Webflow page so visitors can explore your space alongside the rest of your content.

Before you begin

Have your post-scan email open. Check the direct link first, then copy the iframe HTML snippet for the visualisation you want to show. Keep your asset ID as a reference.

Website requirements

Code Embed is available with an active Site plan, or a Core, Growth, Agency or Freelancer Workspace plan. You need access to edit the site’s design.

Add a Code Embed element

  1. Open your Webflow site and choose the page and container for the viewing.
  2. From the Add panel, drag a Code Embed element into that container.
  3. Paste the complete iframe snippet into the code editor, then save and close it.
  4. Check the parent container’s width and the iframe’s height. Review your tablet and mobile breakpoints.
  5. Publish to the domain you want visitors to use, then open that page and try the viewer.

Check the viewing and layout

On the live page, try moving around the scene. Check the page on a phone and make sure the viewer’s controls are visible. If you change the width or height, check both layouts again.

Provider tip

A narrow parent container or a fixed-height section can crop your viewing. Adjust that container in the Style panel and the height in the snippet as needed. Some embedded content only renders on a published page.

For more detail, see sizing your embed or troubleshooting a viewing.

To offer a separate way to open the viewing, add a text link or button labelled something like Explore our space in 3D (or whatever you fancy) and paste the direct link from your post-scan email into its web address field. This also works when your website cannot accept iframe HTML.

Provider reference: Webflow: custom code embeds. Editor labels and plan availability may change.

Add a VBlank viewing to your websiteHow to customise your embedTroubleshooting your VBlank embed

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.