Configurator – Styling (URL Parameters)

Styling with URL Parameters

URL parameters allow you to customize the appearance and behavior of the Configurator without modifying the code. Parameters can be configured directly in the app (e.g. in the “Share” tab or inside the Configurator) and allow you to change background, 3D environment, or interface visibility.

List of available URL parameters

ParameterTypeDescriptionDefault value
nav0 / 1Hides (0) or shows (1) navigation. Available only in Business / Business PRO.1
add_to_cart0 / 1Hides (0) or shows (1) the “Add to Cart” button.0
bcgstringScene background, e.g. grad_ff7575_4d1212, i16, uploaded, theme or env , configured in the “Scene” tab.
envintHDRI environment (lighting) ID, configured in the “Scene” tab.1
light_intensity0 – 2Light intensity of the 3D scene.0.6

Live Example

Url: https://alterproduct.com/app/configurator/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0

Open in new tab
Docs Viewer - Styling URL — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2 <html>
3  <head>
4    <title>Configurator - Styling URL</title>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8    <style>
9      * {
10        box-sizing: border-box;
11      }
12
13      html,
14      body,
15      #root {
16        width: 100%;
17        height: 100%;
18        margin: 0;
19        padding: 0;
20      }
21
22      iframe {
23        display: block;
24      }
25    </style>
26  </head>
27  <body>
28    <iframe
29      loading="lazy"
30      title="Product Configurator"
31      src="https://alterproduct.com/app/configurator/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Open the project on GitHub Github Logo