April 8, 2021
Embed 3D Spaces in Webflow
Over the years, building websites has become a juggernaut of an industry. Nowadays, as we all know, creating amazing websites is not just limited to software developers or even professional UX/UI designers. New tools and CMS platforms let literally anyone build amazing web experiences without having to write one line of code.
Under the umbrella of CMS tools, the needs of creatives keep getting more and more nuanced and specific. The companies building these tools are constantly looking for ways to give their users the ability to create as many custom experiences as possible—for example, various ways to integrate and interact with 3D visualizations—while also keeping the creative process simple, accessible, and user-friendly.
Webflow is a great example of such a platform. In their own words: “Webflow empowers designers to build professional, custom websites in a completely visual canvas.” As designers use the tool, it generates code automatically. Webflow makes interaction design and storytelling easier than ever, allowing you to tell imaginative and compelling stories with scrolling and 3D navigation, which can be difficult to build from scratch.
This is good news for professionals interested in creating delightful experiences around interior space. With Webflow, you can integrate your interactive web experiences with captivating 3D space visualizations—such as custom animations and guided walkthroughs—along with all your other branded content.
For Archilogic, this is huge! So, we gave it a shot.
Built With Archilogic - An Interactive Interior Space Walkthrough Using Webflow
As you may know, 3D navigation on websites can be technically challenging. Our Webflow Embed solution lets you trigger Archilogic bookmarks within a Webflow section. This allows you to create a guided walkthrough via scrolling. This prototype shows you an example of what’s possible.
Using an iframe, you can now seamlessly embed Archilogic building models into Webflow and tell the full story of your space that you want to tell. Bring in other animations, overlay bold text, and showcase branded content to your clients in a dynamic and interactive way.
You don’t need to be a software developer to take advantage of these tools. Just copy the Embed code from the “Share” menu in your Archilogic model and paste it into your Webflow site. It’s as simple as that! For more detailed information check out the 3D embed API guide
By utilizing Archilogic’s built-in iframe embed code, it’s never been easier to create engaging digital space experiences like this interactive walkthrough website, which gives designers the ability to present 3D space as responsive web content.
Check out the Webflow Embed Demo.
Join other creatorsTry us for Free
Other Projects Like this
Archilogic is an integral part of how we share our floor plans and designs with customers. It has become a critical part of our customer journey, so much so that we've embedded Archilogic's 3D models directly into our website. In the first 30 days we had the 3D embeds live on our website, we saw over 3,000 click-throughs to our Archilogic pages (100 per day). Our customers love how much visibility Archilogic gives them into the product they are buying.
“Archilogic is the fastest, most user-friendly space planning platform on the market and has helped us to deliver quality design projects customer after customer. We love working with the team behind the product too!”
“Archilogic's developer tools allow us to rapidly integrate detailed floorplans with Akenza's Business Intelligence modules, so we can directly create value for our customers and support them on their digitalization missions.”
“The 3D model solution helps JLL to showcase real estate offerings to clients in an innovative way. It brings the digital experience alive to enhance the client experience.”