Webflow

Adding an interactive 3D product configurator to your Webflow site is one of the best ways to increase user engagement. The step-by-step documentation will show you how to embed interactive 3D viewers

In this quick guide, we will walk you through how to embed your configurator iframe code into your Webflow project.

Step 1: Open your project

Open your project in the Webflow Designer. Select the existing site or page where you want to integrate the 3D viewer directly.

Step 2: Add an Embed element

Next, you need to add a custom embed block to hold the configurator.

1. Click the Add Elements icon (+) in the top left panel or press A on your keyboard.

2. Scroll down to the Components section.

3. Drag the Embed element onto your page canvas where you want the 3D viewer to appear.

Step 3: Paste the iFrame snippet

Start out by putting this basic iframe code snippet into the code editor of your new Embed element:

<iframe
  src=""
  style="width: 100%; height:100%; border:0"
  allowfullscreen=""
></iframe>

Get your Configurator URL

Next, open your 3D configurator setup in the colormass platform.

1. Navigate to your project.

2. Click Publish 3D.

3. Select Copy Configurator URL.

Add the URL to Webflow

Copy the URL and paste it into the src="" attribute of the iframe code in Webflow. Your final code should look something like this:

<iframe
    src="YOUR CONFIGURATOR URL HERE"
    style="width: 100%; height:100%; border:0"
    allowfullscreen=""
></iframe>

See the parts of this 3rd step recorded in the video below.

Step 4: Save and Publish

Once your code is pasted and you are happy with the placement of the embed element, click Save & Close on the embed editor. Finally, click Publish in the top right corner of Webflow to push your site live with the new 3D configurator.