Configurator – Basic embedding on your website

Full Screen Embedding

Embed the product Configurator anywhere on your website using the HTML element: iframe. Simply set the src attribute pointing to the Configurator URL <iframe src="https://alterproduct.com/app/configurator/1" width="100%" height="100%"> To get the ready-to-use HTML embed code, go to your product design and click the “Share” tab. There you will find the generated iframe code and the option to configure URL parameters. Make sure your E-commerce tools are set to public so the iframe displays correctly.

Open in new tab
Docs Configurator - Full Screen Embedding — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - Full Screen</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"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Open the project on GitHub Github Logo

Basic Styling

You can customize the Viewer in two ways:

  • Using URL parameters – configurable in the app (e.g. background color, 3D environment, button visibility) – more information available on the page Styling (URL Parameters).
  • Using CSS styling of the container, e.g. div , in which the iframe is embedded (e.g. dimensions, borders, border-radius)
Open in new tab
Docs Viewer - Basic Styling — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - Basic Styling</title>
5
6    <style>
7      * {
8        box-sizing: border-box;
9      }
10
11      html,
12      body,
13      #root {
14        width: 100%;
15        height: 100%;
16        margin: 0;
17        padding: 0;
18      }
19
20      body{
21        display: grid;
22        justify-content: center;
23        align-items: center;
24      }
25
26      iframe {
27        display: block;
28        border-radius: 14px;
29      }
30
31      #wrapper {
32        height: 320px;
33        width: 400px;
34        background: linear-gradient(0deg, rgba(0,43,133,1) 0%, rgba(0,182,215,1) 100%);
35        border-radius: 14px;
36      }
37    </style>
38  </head>
39  <body>
40    <div id="wrapper">
41      <iframe
42        loading="lazy"
43        title="Product Configurator"
44        src="https://alterproduct.com/app/configurator/1"
45        width="100%"
46        height="100%"
47        frameBorder="0"
48        allowFullScreen
49      ></iframe>
50    </div>
51  </body>
52</html>
Open the project on GitHub Github Logo