How to add BRIKL 3D Configurator to your Squarespace website?

Squarespace Custom Element allows you to add your BRIKL custom HTML, CSS and JS tags.

Christophe Leroy
November 4, 2020

Squarespace Custom Element allows you to add your BRIKL custom HTML, CSS and JS tags.

Custom CSS Editor, Embed Block, Code Block are features available on all plans.

In this guide you will learn:

1- How to add a Code Block

2 -How to preview your BRIKL studio code

Have a look at our sample demo site made with Squarespace: https://brikl-demo.squarespace.com/

How to add an Embed component?

Let’s get started with a new blank page that we will edit in just a minute.

Squarespace blank page

First thing you’ll have to do is to add a page content and add a Blank.

Squarespace add content

Add Blank

It will automatically place a Text Content on the page. Move you mouse cursor above the Text Content, a grey line will appear. Click the circle at the left extremity of the grey line. It will prompt a menu.

Add new content Squarespace

In the menu, scroll until you find the section More. And, select Code content.

Code content Squarespace

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 Custom product setup dashboard

The code content interface will appear. Make sure the dropdown menu on the right has HTML selected. Now in the editor, paste the custom BRIKL code you have obtained in the BRIKL Dashboard. Once done, apply the changes.

Add code in Squarespace Code Content

How to preview your BRIKL studio code?

To visualize the custom code, you will need to first exit the edit mode to see a live preview.


Copyright © 2020 BRIKL BV, Belgium/Europe