< BACK

How to add BRIKL 3D Configurator to Webflow site?

The Webflow embed component gives you the power to add custom piece of code to your website and implement the

Christophe Leroy
November 4, 2020

The Webflow embed component gives you the power to add custom piece of code to your website, it only supports HTML, CSS in <style> tags, and JS in <script> tags. The Embed components allow you to add BRIKL 3D configurator to any of your Webflow project.


In this guide you will learn:


1- How to add an Embed component

2- How to add the BRIKL custom code

3 -How to preview your BRIKL studio code


Need to know

Custom code in the Webflow embed component cannot be longer than 10,000 characters and you need to own an Webflow active site plan.


How to add an Embed component?

Open the Add elements and scroll until you find the Components Section. From there, you can easily locate the Embed Component.  Simply drag and drop the Embed Component to where you want it to appear.

Webflow add Embed


How to add the BRIKL custom code?

In the BRIKL dashboard, under the sales channel option. You first need to add a product to your sales channel to enable the option to setup a studio embed. After adding a product, navigate to the "Setup" tab and select the product you have added previously. BRIKL will generate the custom embed code that you will need to add to your site. To learn more: How to generate a custom embed code for BRIKL 3D Configurator.

BRIKL get setup code

In the HTML Embed Code Editor, all you need to do is to copy the snippet code from the BRIKL Dashboard to the editor.

Then save and close.

Add code to Webflow embed component


How to preview your BRIKL studio code?

In Webflow, in order to display the custom code, you will need to first publish your changes.


Publish and preview

Once published, open your project in your browser to see the custom code working.

Preview 3D configurator in Webflow site
Copyright © 2020 BRIKL BV, Belgium/Europe