Customizer – Basic embedding on your website

Full Screen Embedding

Embed the product Customizer anywhere on your website using the HTML element: iframe. Simply set the src attribute pointing to the Customizer URL <iframe src="https://alterproduct.com/app/customizer/11" 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 Customizer - Full Screen Embedding — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Customizer - 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 Customizer"
31      src="https://alterproduct.com/app/customizer/11"
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 Customizer 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 Customizer - Basic Styling — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Customizer - 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        border-radius: 14px;
35      }
36    </style>
37  </head>
38  <body>
39    <div id="wrapper">
40      <iframe
41        loading="lazy"
42        title="Product Customizer"
43        src="https://alterproduct.com/app/customizer/11"
44        width="100%"
45        height="100%"
46        frameBorder="0"
47        allowFullScreen
48      ></iframe>
49    </div>
50  </body>
51</html>
Open the project on GitHub Github Logo