# INTRODUCTION

Welcome to the Simplio3D Documentation! Here you will find all the information you need to properly build your 3D product configurators.

## Documentation

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Getting Started</strong></td><td></td><td></td><td><a href="/pages/9ttymsTxFc9XfDtEqdl6">/pages/9ttymsTxFc9XfDtEqdl6</a></td></tr><tr><td><strong>Learning the App</strong></td><td></td><td></td><td><a href="/pages/qg2Z0l8XnGnqKn978N4M">/pages/qg2Z0l8XnGnqKn978N4M</a></td></tr><tr><td><strong>Integrations</strong></td><td></td><td></td><td><a href="/pages/aOwIZV1nyU2ryiCfM8eW">/pages/aOwIZV1nyU2ryiCfM8eW</a></td></tr><tr><td><strong>API Reference</strong></td><td></td><td></td><td><a href="/pages/ypkTGbFbxArE1XlcXDN3">/pages/ypkTGbFbxArE1XlcXDN3</a></td></tr></tbody></table>

The documentation covers 4 main sections: [**Getting Started**](/getting-started/create-an-account)**,** [**Learning the App**](/learning-the-app/dashboard)**,** [**Integrations**](/integrations/woocommerce) and [**API Reference**](/integrations/api-documentation). The [**Getting Started**](/getting-started/create-an-account) section covers the registration process and some information on how to prepare your 3D models for the web application. In the [**Learning the App**](/learning-the-app/dashboard) section, we cover all the information you need to create 3D product configurators and product views. Integrations and API references cover technical documentation on integrations with third-party applications.

Simplio3D is built to allow anyone to create and embed a 3D product configurator without special skills. In the documentation, we cover all the features that the web application has to offer such as: [**importing and managing 3D models**](/learning-the-app/3d-assets), [**creating materials**](/learning-the-app/materials), [**creating product configurators**](/learning-the-app/products) [**with options**](https://docs.simplio3d.com/learn-the-app/products/create-options), [**restrictions**](https://docs.simplio3d.com/learn-the-app/restrictions), [**pricing structure**](https://docs.simplio3d.com/learn-the-app/products/pricing), [**submission forms**](https://docs.simplio3d.com/learn-the-app/products/add-form) and finally [**embedded In your website**](https://docs.simplio3d.com/learn-the-app/products/share), you can also find information about integrations and the Augmented Reality part of Simplio3D.

The platform also allows users to create 3D product views without options and prices. The process is much simpler and is detailed in the [**3D Product View**](/learning-the-app/products/product-viewer) subchapter.

<figure><img src="/files/a3XCKhgtdgQ2hqXAwzC6" alt=""><figcaption><p>Adding option sets</p></figcaption></figure>

In the documentation we will cover the whole process and make it as clear as possible for the user. Feel free to make [**suggestions**](https://www.simplio3d.com/submit-a-ticket/) and help us improve the platform.

**Take a quick tour**

How easy is it to build a 3D product configurator with Simplio3D? Watch the below short video to discover how easy it is to bring your products to life! We will introduce you to the key features of Simplio3D, covering 3 main sections within the web application: [3D Assets](/learning-the-app/3d-assets), [Materials](/learning-the-app/materials), and [Products](/learning-the-app/products).

{% embed url="<https://www.youtube.com/watch?v=IIfbZZd5GWM>" %}
Take a quick tour
{% endembed %}

[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook\&logo=gitbook\&logoColor=ffffff\&label=%20\&labelColor=5c5c5c\&color=3F89A1)](https://www.gitbook.com/preview?utm_source=gitbook_readme_badge\&utm_medium=organic\&utm_campaign=preview_documentation\&utm_content=link)


# Create an account

Please note that you can cancel, upgrade or downgrade your account at any time without any obligation.

Simplio3D comes with 3 account types: **Starter**, **Pro** and **Enterprise** (the custom version). For a new user, this might get a little difficult in terms of deciding which type of account is the best fit. It really depends on the requirements, how many configurators you plan to build, how many 3D assets you estimate to manage, what kind of options and prices your products have? **These might be difficult questions to answer, so if you don't know which option is best, you can always select the Starter plan** or [**contact us**](https://www.simplio3d.com/contact-us/) directly for a tal&#x6B;**.** <br>

The **Starter** plan includes almost all the standard features that the platform can offer, the best option to test the power of Simplio3D. The **Pro** plan allows you to work with more 3d assets, configurators and have dedicated support. **Please note that you can cancel, upgrade or downgrade your account at any time without any obligation.**<br>

But Simplio3D doesn't end with the **Starter & Pro** plans, the platform can be much more than that by expanding its capability through a custom version in the **Enterprise** plan. This option is a great fit for users that want to scale their 3d configurators and want more flexibility from the platform. Using the platform, we can easily customize the front-end, add inventory and bill of materials and integrate with internal systems at an advantageous cost and fast delivery time.<br>

Do not hesitate to [contact us](https://www.simplio3d.com/contact-us/) for any question you have and let us help you make the best decision in choosing the right subscription plan.


# Prepare 3D models

The platform relies on 3D models to build product configurators and visualizations in real time. Users before starting to build configurators need to procure their 3D models before anything else.

Currently, Simplio3D allows users to import 3D models in: **.GLB, .GLTF and .OBJ formats**. These are the most used 3D formats in the web environment and we recommend the first two formats because they are the best optimized for the web.

Once imported, Simplio3D can read the 3D model and its structure and see what parts it is made of, this will greatly influence how the configurator will work. We also recommend that all 3D models have UV mapping for a correct placement of materials, especially those with textures. This will be discussed in more detail in the [**3D**](/learning-the-app/3d-assets) [**Assets**](/learning-the-app/3d-assets) chapter.

### 3D Model Structure

The structure of a 3D model will greatly affect the overall logic of the configurator inside the platform. Therefore, it is very important that the 3D model of the customizable product is structured into the correct key parts that form the product as a whole. For example: If your customized product is a kitchen knife, depending on the degree of customization we can make it from 2 parts: *blade* and *handle* or from more than two parts and subparts. We can have a product made from as many parts as needed. This will be discussed in more detail in the following chapters.

{% hint style="warning" %}
To avoid issues, **don’t use multiple materials on a single part** or **group materials or parts together**. Keep your 3D models **simple and clean** for best results.
{% endhint %}

### UV Mapping

UV mapping is an essential step if you plan to use **textures**, **vector patterns**, or **canvas materials** before uploading your 3D model to the platform for use in a **product configurator** or **3D viewer**. Applying proper **UV coordinates** to your model ensures that materials and textures are displayed correctly during configuration or viewing. For more details, please refer to this [link](https://en.wikipedia.org/wiki/UV_mapping) for more information.

### 3D Model Optimization

As these files will be rendered in real-time directly from an internet browser, it is very important that prior to import, the LOD (Level-Of-Detail) is checked and possibly optimized if necessary. 3D models are made of polygons and this shows how detailed it is, therefore how complex the structure is, as the more detailed it is the more it affects rendering performance. Therefore, there are all kinds of techniques where the number of polygons can be reduced without affecting the rendering quality, prior importing. All 3D models must be centered (0 - x,0 - y,0 - z) before being loaded onto the platform.

{% hint style="warning" %}
**Simplio3D does not support groups, therefore, it's important to avoid using them, especially if you plan to use quantity-based parameters like width, length, or height in your configurator. Learn more** [**here**](/getting-started/prepare-3d-models/numeral-keep-the-proportions)**.**
{% endhint %}

**3D files are too large?**

Currently, the platform allows uploading up to 50 MB per file. We strongly recommend, especially for detailed meshes with many polygons, that they be optimized for maximum performance. You can do this either manually, with a qualified 3D artist, or using a 3D optimization application. There are many online 3D model optimization tools, one of the best we recommend for GLB files is <https://optimizeglb.com/>, but there are also other tools for optimizing 3D objects in other formats, such as .OBJ. Another way is to first optimize the 3D model in its original format (e.g. .FBX, .STL, .3DS, etc.) and then convert it to .GLB, .GLTF, or .OBJ formats before uploading.

To compress a GLB file in Blender:

1. **Open Blender**: Import your model via `File > Import`.
2. **Optimize**: Reduce polygons by using the Decimate Modifier.
3. **Export**: Save as GLB with compression options.

This process helps in efficiently reducing file size.

<figure><img src="/files/HkTZn6UuCUWb30urCUvQ" alt=""><figcaption><p>Compress GLB files using Blender</p></figcaption></figure>

Before uploading your 3D file, we recommend removing any native textures applied to it for optimal performance, as textures will be added within the app. Additionally, if your 3D model includes a normal map, ensure that its size does not exceed the recommended limit of 1024×1024 pixels.

### Placement of the center axis

Standardizing the scaling of 3D models while keeping mesh proportions consistent can be challenging. The **Numeral** option block simplifies this by allowing precise scaling along the X, Y, and Z axes. This is ideal for furniture (such as tables, cabinets, closets, or shelves) as well as construction elements like windows, doors, sheds, and roofs, where users can set width, length, or depth. To achieve accurate scaling, the 3D model should be properly prepared and adjusted before uploading it to the platform for use in the configurator.

Correctly setting the center axis of a 3D model part ensures accurate scaling based on the configurator type. For example, it helps maintain the leg shape and top edge proportions on tables, preserve shelf thickness when changing cabinet or closet height, and keep the correct frame proportions on double-frame windows. For special cases, you can refer to demo examples—for instance, a cabinet on legs can have its center axis (pivot) adjusted using the techniques shown in both the table and cabinet demos.

{% hint style="warning" %}
**To learn how to edit 3D models for accurate resizing with the 'Numeral' block (ideal for tables, cabinets, closets, shelves, windows, doors, roofs, and sheds), see this section:** [Modeling and editing 3D meshes to support numeral blocks.](/learning-the-app/products/create-options/numeral/modeling-and-editing-3d-meshes-to-support-numeral-blocks)
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=ML2H2lZWfhs>" %}

### How to get 3D model(s)

If your company has the CAD version of the products they sell, then half the way is already done. Typically, these CAD files are most often found in SolidWorks .step, .stl format. These CAD files will need to be converted to the appropriate format using specialized CAD software such as: Blender, Sketchup, Rhino, etc. If you have someone in your company who is skilled at working with CAD files and converting them to different formats, it may be better to assign them this task.

For those unfamiliar with CAD files and 3D models in general, the best way to get the necessary files is to outsource the work of a 3D artist who can help you reproduce and prepare the items for the platform. You can also contact us and we can do this for you.

Another good source where you can get the necessary files are online 3D libraries and they can be found both free and paid, such as TurboSquid and 3D Warehouse.

{% embed url="<https://youtu.be/4I88cOfv5-w?si=ioh_sNe4Y5s4QjUk>" %}
Where do you get your 3D models from?
{% endembed %}

Also refer to: [**Texture and Normal Map Resolution Recommendations**](/learning-the-app/materials/texture-and-normal-map-limits).


# Sizing: Keep the proportions

Sizing for windows, doors, tables, cabinets, etc.

**Instruction for Positioning Mesh Centers and Models for Correct Scaling and Position Adjustment**

This is a more advanced page that requires additional skills in 3D modeling to properly prepare a 3D object for resizing using the **Numeral** option set block with Position Parts. In case, if you are not familiar and do not want to delve deeper into learning how to properly prepare the 3D model, we always recommend that you turn to a professional, a friend or coworker, or hire a 3D artist/modeler for this job, using well-known freelance platforms where you can post the job and wait for the offers.

{% hint style="warning" %}
**Simplio3D don't work with groups and you need to avoid this.**
{% endhint %}

<figure><img src="/files/RveEXzS33vqdD1kvPcqu" alt=""><figcaption><p>Avoid using groups (nodes) inside the 3D model</p></figcaption></figure>

<figure><img src="/files/W9Y27uDG6Qgtpmk8iPPy" alt=""><figcaption><p>Avoid using groups (nodes) inside the 3D model (2)</p></figcaption></figure>

**Preparing 3D Models**

If your configurator needs to allow sizing, for example setting width, length and height, you will probably need to prepare your 3D model before you upload to the platform. Depending along which axis the 3D model will stretch, the platform needs to know which parts will stretch and which don't. **For example, for a table, we might need to set the table top surface to stretch along the x-axis** (e.g. width), **but the table legs should not, they should keep the same proportions, but at the same time keep their position in relation with the table top as the size of the table top surface changes**. Please find an example below:

<figure><img src="/files/V6uOZNX3wsdbqyINDh54" alt=""><figcaption><p>3D Table with Center Pivots</p></figcaption></figure>

As we can see in the image above, the edges for the table surface are cut because we don't want to distort the shape of the top surface if it has a shape other than rectangular when we resize. Basically, we separate the parts that stretch and the parts that don't stretch, in this case the margins which might not have a rectangular shape (for example, edges could be rounded). For the main top surface the pivot is found right in the middle of the 3D part (see pivot nr. 1 in the above image). This usually is for the stretching, in this case the *width* and *length*.

Then, in the image above, we have 2, 3, 4, 5, 6 more numbers marked for the other table parts, and we see where the pivots for the edges are in relation to the top of the table. If your table top is rectangular, then, you don't need the 2, 3, 4, 6 edges, only for 5 the legs. As you can see, their pivots/centers are added to the corners near the edge of the main table top. **In this case, the only parts that will stretch are the ones going along x-axis (table top and side edges), the only parts which they will never stretch are the corners. The rest of the parts that don't stretch will only translate along the axis but not stretch.** This is a key feature that will assure we will keep the proportions and positions of the table intact when we resize.&#x20;

<figure><img src="/files/kmO0v7swz6OgmAK6Sj3D" alt=""><figcaption><p>Position of pivots (center meshes) on each table part</p></figcaption></figure>

This can also be applied to fixed frame windows.

<figure><img src="/files/ovNQ38V16Sa1eqL8TtOM" alt=""><figcaption><p>Center pivots for a fixed frame window</p></figcaption></figure>

<figure><img src="/files/xuCKUSP5dYb5sivssBhb" alt=""><figcaption><p>How a window is resized (stretched) along the x-axis (example without corners)</p></figcaption></figure>

A few pivots found on a double-frame window with hinges.

<figure><img src="/files/kGM5HnYsVmvX3sk7ezsn" alt=""><figcaption><p>Center pivots for a double frame window with hinges</p></figcaption></figure>

But you can apply this to cabinets, wardrobes, sheds, garages, carports and other objects that you can resize. Depending on the complexity of the configurator, this might be a back and forward 3d editing until you have the right 3d model for the configurator.

{% hint style="warning" %}
**It is essential to edit the pivots (center axis) as explained above to correctly resize a multi-part 3D object in the configurator. Before uploading to the platform, you can check the pivots (central meshes) in the three.js editor** [**here**](https://threejs.org/editor/)**.**
{% endhint %}

**Setting up the size input with Numeral option set**

Once you have prepared the 3D model and its pivots, you are ready to upload and have your first test. In the documentation, we continue with the table and set the input options for *width*, *length*, and *height*. We create the configurator, select the layout, assign the 3D model and in the 'Create Options' tab we add the Numerals option set just like we added in the Numeral option block [chapter](/learning-the-app/products/create-options/numeral).

<figure><img src="/files/dVdvrlB8PBW4VCQ9HGSp" alt=""><figcaption><p>Add Numeral option set block</p></figcaption></figure>

After clicking "Add Block", the application will ask us to define the Numeral option set by adding a "Title", select "Input Style" and create the first variant, in our case "Width".

<figure><img src="/files/MuFFNUOGWQ37maD33Rq5" alt=""><figcaption><p>Define Numeral block</p></figcaption></figure>

When we click on "Add Variant" a pop-up window will appear where we need to define the first variant, "Width". In the title I enter 'Width' and the same in the Variant Name field, I will select the 3D model that we will use in this variant, in this case the 3D table.

<figure><img src="/files/GweYzEeVdkIAqd0L68ah" alt=""><figcaption><p>Define the first variant</p></figcaption></figure>

Next, we need to select the parts that will be resized in 'Select 3D Parts'.

{% hint style="info" %}
**Please note that in this case we will select all 3d parts of the table to be included in the scaling proportions logic.**
{% endhint %}

<figure><img src="/files/j9k6DxHSq2mhpYSfp4Gs" alt=""><figcaption><p>Select 3D parts</p></figcaption></figure>

Just like in the Numeral option block [chapter](/learning-the-app/products/create-options/numeral), we click on the "Numerical" section and start selecting "Type of value", here we select Size; Unit of measure, here we select cm; type "Default value" for the width, in this case the table width is approximately 180 cm wide.

<figure><img src="/files/vsHDoOnBJov2mI948AUt" alt=""><figcaption><p>Numerical settings</p></figcaption></figure>

Additionally, we set the increment (type 1 cm or any other number), Minimum value (type 90 cm), Maximum value (210 cm) for this example.

<figure><img src="/files/6iIyUAd7EoFqwoWcUoY8" alt=""><figcaption><p>Numerical settings</p></figcaption></figure>

Next in 'Position parts', **we need to select the parts that will not stretch along the x-axis** (the width). In this case we will select the corners, the legs and the edges that are perpendicular with x-axis in z direction (the length or depth of the table).

<figure><img src="/files/OTNV5D9lr9bjM0t9bown" alt=""><figcaption><p>Select position parts</p></figcaption></figure>

The last setting is where we assign which direction this variant will resize in. In this case we select the x-axis for the width and if you want to create a length or depth variant it would be the z-axis, and for the height the y-axis.&#x20;

<figure><img src="/files/STiLtyRM1M3OPNKlY2l4" alt=""><figcaption><p>Select resizing axis</p></figcaption></figure>

You can create 3 separate variants in the Numeral block that cover all 3 axes: *width*, *length* and *height*. Now, click "Save" to add the first numerical variation.

<figure><img src="/files/jT22GGWLdOc2xMQ7OJpY" alt=""><figcaption><p>First Numeral variant added</p></figcaption></figure>

Now, click the "Save" button located on the bottom right of the screen to create the Numeral block. Click "Preview" to see the result.

<figure><img src="/files/2Gyqrb0eCcsdeggQApJR" alt=""><figcaption><p>Sizing: Keep Proportions</p></figcaption></figure>

You can repeat the same process, but only to select different position parts and axes for *length* and *height*. Once this feature is mastered, you can apply it to virtually any type of object, for example, sheds, carports, garages, roofs, windows, doors, cabinets and many other resizable objects.&#x20;

<figure><img src="/files/xoYZXcWmJXB5eWkmBw0T" alt=""><figcaption><p>Table configurator with Width, Length and Height numeral variants</p></figcaption></figure>


# Dashboard

The dashboard is the first page users will see every time they log in.

This is a passive page and does not offer any key functionalities. From the Dashboard you can access the Quick Tour video, highly recommended for new users, documentation, manage your profile and subscription settings and be able to submit a ticket. Also, under these 4 widgets, you can have a preview of your latest [**Orders**](/learning-the-app/orders), [**Products**](/learning-the-app/products), [**3D Assets**](/learning-the-app/3d-assets) and [**Materials**](/learning-the-app/materials).

<figure><img src="/files/xxOvlqOyXtCStpbzsEG2" alt=""><figcaption><p>Dashboard</p></figcaption></figure>


# My Account

Profile, subscription and billing details

Users can check and update their account details from the top left screen. The account profile is organized into 2 tabs: **Profile** and **Subscription Plan**.

**Profile**

<figure><img src="/files/OsBe6FJYI2PNmyQRI9DQ" alt=""><figcaption><p>Simplio3D Profile Tab</p></figcaption></figure>

Users can update their **Name**, **Email** address and change their **Password**.

For companies, users can enter the **Company Name** and **Tax code** to be reflected on the invoice.

**Subscription Plan**

<figure><img src="/files/HZVxjQp0JTZMrjM37S1K" alt=""><figcaption><p>Simplio3D Subscription Plan Tab</p></figcaption></figure>

Users can check and update the subscription plan details such as changing the **Payment Method** (add new credit card), **Cancel, Downgrade** or **Upgrade**.


# Products

Add and manage products

The **Products** section is the "brain" of the app where the magic happens. From here users can create product configurators and viewers using [3D assets](/learning-the-app/3d-assets) and [materials](/learning-the-app/products/create-options/material).

Currently, the standard **Starter** and **Pro** subscriptions allow users to create 2 types of products: **configurators** or **product viewers**. This chapter will cover the 6 major steps in creating the configurator: [Select ](/learning-the-app/products/select-layout)[Layout](/learning-the-app/products/select-layout), [Add 3D Models](/learning-the-app/products/add-3d-models), [Create Options](/learning-the-app/products/create-options), [Pricing](/learning-the-app/products/pricing), [Add Form](/learning-the-app/products/add-form) and [Share](/learning-the-app/products/share).

<figure><img src="/files/XYO9EZTwCFInKv5BOJyE" alt=""><figcaption><p>Listing products</p></figcaption></figure>

In the **Products** listing page users can add new products, edit existing ones or remove them.

The video below provides a complete set of practical guidelines to help you quickly get started with building your own configurator.

{% embed url="<https://www.youtube.com/watch?v=qVJTpd4SENI>" %}


# Load Product

Load configurator templates for a faster and easier setup

The platform lets users load complete template configurators in seconds by selecting from a library of prebuilt options. A range of industry-specific configurator types is available to help users get started quickly.

**Advantages of using a template configurator:**

* Users can quickly set up a working configurator and then customize it to fit their needs, for example, replacing the 3D model, editing existing option sets and restrictions, or adding/removing options.
* Trial users can explore the configurator’s capabilities more efficiently. By loading a few ready-made configurators, they can quickly understand how they are structured while learning alongside the documentation.

Loading a template configurator is simple: sign in, navigate to *Product*, and click the green **Load Product** button in the upper-right corner of the screen.

<figure><img src="/files/zncaodLpuGvv86uWbWw6" alt=""><figcaption></figcaption></figure>

After clicking the **Load Product** button, a popup window will display the available configurators you can load and use in your account.

<figure><img src="/files/24Bya5TEMmjkAx5VKy8k" alt=""><figcaption></figcaption></figure>

Select one or more configurator templates, then click **Load**.

<figure><img src="/files/Bh6zWDcJzhHKPzmucHio" alt=""><figcaption></figcaption></figure>

Alternatively, users can create a configurator from scratch by selecting **Add Product**. The next chapters explain the process.


# New Product

Add new product

In the **Product** listing page we have the blue "Add Product" button in the top right corner from where users can add new products.

<figure><img src="/files/PcPmXbKTrzeeZZMS86uP" alt=""><figcaption><p>Product listing</p></figcaption></figure>

Once clicking "Add Product", the user will be prompted to enter a name and select the type of product they want to create. By default, the "**Configurator**" mode is selected, but the user can also select the "Viewer" mode, which is covered in detail in the [Product Viewer](/learning-the-app/products/product-viewer) chapter.

<figure><img src="/files/r65HXH6vLb4yhTdRrEzF" alt=""><figcaption><p>Add new product</p></figcaption></figure>

Once clicking 'Save' it will create the new product and return back to the **Products** listing page.


# Select Layout

Choose the configurator layout

The first step that determines the overall look of the configurator is "Select Layout", where users can select from 8 different layouts.

<figure><img src="/files/lFDodsJk5qzbWclB8J5R" alt=""><figcaption><p>Select Layout</p></figcaption></figure>

Depending on your configurator, not all layouts may be suitable for what you need. For example, if you have a lot of options for users to choose from, we recommend layouts with options on either the right or left side of the screen. If you only have a few options you can use "Steps" [sections](/learning-the-app/products/create-options/sections) (discussed later in this chapter) with one option per step, for example, the horizontal layout block (2 or 4 layout) can be a good option.

{% hint style="info" %}
**Use the 'Preview' button in the top-right corner to test different layouts while building your configurator, and choose the one that works best.**
{% endhint %}


# Add 3D Models

Select the 3D models for the configurator

The second step is to allow users to select one or more 3D models they want to use in their configurator. After selecting the 3d models, you can click the "Preview" button on the top right of the screen to see them in your configurator.

<figure><img src="/files/YsbhNa3cAQbq6NRYmgH9" alt=""><figcaption><p>Select 3D models</p></figcaption></figure>

**NOTE:** If you use more than one 3d model in your configurator, once you click "Preview" you will notice that they all "overlap" each other. Don't worry, in the "Create Options" tab you will be able to create options with restrictions (constraints) and hide the ones you want. This will be discussed in more detail in [**Restrictions**](/learning-the-app/products/create-options/restrictions).

<figure><img src="/files/dFeAi7jk3o1f6b4vYN2n" alt=""><figcaption><p>Preview</p></figcaption></figure>

{% hint style="warning" %}
**Simplio3D supports version control for 3D models, allowing you to update a configurator without the need to redo option sets. Learn more** [**here**](/learning-the-app/products/add-3d-models/3d-model-versions)**.**
{% endhint %}


# 3D Model versions

Working with different 3D model version in the same configurator

**Simplio3D supports 3D model versions to easily update a configurator without adding or updating option blocks.**

When you are updating the 3D model inside a configurator there are 3 rules:<br>

1. **Keep the same naming of the 3D model.** Do not add “V2”, “V3", etc. to the file name, because the system considers it to be a different model; it will automatically create a version number within the system.
2. **When selecting a new 3D model version.** When selecting a new 3D model version for the configurator, leave the old model version checked and check the new one, only in this way will all the model properties be transferred to the new model version.

<figure><img src="/files/QvqJ4A8MhPyDfrPkLnMF" alt=""><figcaption><p>Selecting new 3D model version</p></figcaption></figure>

3. **Same 3D parts naming.** If the 3D parts do not have the same name as the old version of the model, the system will not transfer the properties to the parts of the new model.

<figure><img src="/files/nOWDw8uJLfg4C5aRin7m" alt=""><figcaption><p>Same 3D parts naming</p></figcaption></figure>

If these rules are not kept, all options will not be linked to the new model and the configurator will no longer function properly.


# Create Options

Create option sets and restrictions

This is the key step in creating the configurator. Here you will be able to create the product variants and its conditional logic options (constraints). In the standard subscription, Simplio3D offers <mark style="background-color:blue;">**11 block**</mark> elements to choose from to build your configurator and are found in 3 categories:

**Default**

&#x20;   [*Default*](/learning-the-app/products/create-options/default) - the element helps set default materials for your 3D models, materials that cannot be changed in the configurator

**Layout Sections**

&#x20;   [*Section*](/learning-the-app/products/create-options/sections) - the element helps organize option sets within the layout configurator

**Option Sets**

&#x20;    [*Dropdown*](/learning-the-app/products/create-options/dropdown) - select a variant from a drop-down button

&#x20;    [*Material*](/learning-the-app/products/create-options/material) - select a color variant from a material (color) category

&#x20;    [*Checkbox*](/learning-the-app/products/create-options/checkbox) - select one or more variants from multiple checkboxes

&#x20;    [*Toggle*](/learning-the-app/products/create-options/toggle) - switch between 2 variants

&#x20;    [*Thumbnails*](/learning-the-app/products/create-options/thumbnails) - select a variant from a set of thumbnail buttons

&#x20;    [*Upload*](/learning-the-app/products/create-options/upload) - allows users to upload images to the 3D model

&#x20;    [*Text*](/learning-the-app/products/create-options/text) - enter text into the 3D model, for example engraving

&#x20;    [*Numeral*](/learning-the-app/products/create-options/numeral) - supports setting sizes and quantities in the configurator

&#x20;    [*Arrows*](/learning-the-app/products/create-options/arrows) - select a variant from a left and right arrows button

&#x20;    [*Patterns*](/learning-the-app/products/create-options/patterns) - apply vector-based designs tailored for the fashion and sports industries

&#x20;    [*Canvas*](/learning-the-app/products/create-options/canvas) - enable a 2D drawing editor&#x20;

&#x20;    ***Rotation*** - create rotation variants

&#x20;    ***Repeat*** - create repeat variants

<figure><img src="/files/4kepUBCeJ1Asc6FmiSFX" alt=""><figcaption><p>Adding option sets in the configurator</p></figcaption></figure>

Adding the option set is easy, select the required block element from the top right dropdown button and click the blue "**Add block**" button. All the block elements are layered and found in an order which will reflect in the configurator. You can change the order of the block elements by drag and drop.


# Default

Setting default or permanent materials on a 3D model

There are situations, when configuring a product, not all parts can be customized, in other words some parts of a 3D model may have a material that cannot be changed. Let's take a sofa configurator, we might have some materials within the 3D sofa model that are permanent or by default. For example, the sofa "legs" material is only one and will load by default.

Setting default materials its easy, go at the upper right side of the screen and select 'Default' from the drop-down button and click '**Add block**.

<figure><img src="/files/AjsHtiQAc1P2OSvz76XU" alt=""><figcaption><p>Adding 'Default' option set</p></figcaption></figure>

After clicking "Add block", the edit page for "Default" will open.

<figure><img src="/files/Gca0NaGgMEC4TH70hlK0" alt=""><figcaption><p>'Default' edit page</p></figcaption></figure>

You will be able to name the block in the **Title** field and add variants from the "**Add Variant**" button in the lower right screen. Once you click 'Add Variant' a popup window shows up:

<figure><img src="/files/eGk8AMosjnSl50XMuNjy" alt=""><figcaption><p>Creating a variant</p></figcaption></figure>

In the popup window we select the 3D model, the parts (in our case the legs) and material (wood) and click 'Save'. Once you click 'Save', it will create the first 'default' material and you can repeat this process for other parts if necessary.&#x20;

<figure><img src="/files/LxpqmTUlSnvoeVpiLLt3" alt=""><figcaption><p>Default material variant added</p></figcaption></figure>

Click "Save" again and it will create your "default" block, from now on every time the sofa configurator is loaded the legs will have wood material applied by default. Now click on the blue "**Preview**" button at the top right of the screen and see how it looks:

<figure><img src="/files/TJZlFwfzkOZw745HB3U6" alt=""><figcaption><p>Preview mode</p></figcaption></figure>

{% hint style="warning" %}
**Applying default materials to a 3D object/part and then material option sets to the same object/part will not work. Remove the default material first, then apply the material option set.**
{% endhint %}


# Sections

Organize option sets within the layout configurator

Using sections is a great way to organize your configurator layout, especially when you have many sets of options to work with. In other words, you can divide the configurator options into sections. Simplio3D provides 2 styles (types) of sections:

* **Side** - allows the options to be divided into sections in the layout
* **Steps** - allows the options to be divided into section tabs that are visible in the configurator header

{% hint style="info" %}
**You can also combine Side with Steps to better enrich and structure the configurator layout. Especially when creating more complex configurators.**
{% endhint %}

**Side**

<figure><img src="/files/JN3scohLxYyvENdmfhmu" alt=""><figcaption><p>Side sections</p></figcaption></figure>

The side sections allow you to group your options into a configurator. These sections are best suited for left and right vertical menus, but can be used for horizontal menus in a layout configurator.

**Steps**

<figure><img src="/files/vzkYTj6L5iBPZSBjCRoV" alt=""><figcaption><p>Steps section</p></figcaption></figure>

The Steps section is another way to group your options in a configurator by creating header tabs. Like side sections, steps are a great way to keep the configurator looking clean.

**Combining both Side and Steps sections in a configurator layout**

Depending on the type of configurator you want to build, you can use both Side Sections and Steps Sections in the same layout.

<figure><img src="/files/oD4Lmtpq30ZPWIdiUjkC" alt=""><figcaption><p>Side and Steps sections</p></figcaption></figure>

**Adding sections**

Sections can be added in the same way we add "Default" blocks or option sets. The section block is found in the "Create Options" tab at the top right of the screen, in the drop-down button. Select "Section" and click the blue "**Add block**" button.

<figure><img src="/files/8rVYWaVqCQXgc3hIx5Vu" alt=""><figcaption><p>Add section</p></figcaption></figure>

Before adding the section to the configurator layout, the platform will prompt you to provide a title and select the type of section you want to add (*Side or Steps*). The section title and type can be changed at any time by clicking the edit icon found in each section block.

<figure><img src="/files/Iu17mySOwiCTSYKSatWY" alt=""><figcaption><p>Edit section</p></figcaption></figure>

Additionally, you can add a note to the section by setting the *Show Notes* dropdown to **Yes** and entering your information in the rich text field. After clicking '**Save**', it will be visible at the bottom of the block list and you can drag and drop it in the order you want.

<figure><img src="/files/6NQ1J7kcXEJdfZaTsfgM" alt=""><figcaption><p>Drag and drop sections</p></figcaption></figure>

{% hint style="info" %}
**Any option set or section placed below the newly added section will generate a tree view, enhancing the display of the configurator’s option hierarchy.**
{% endhint %}

<br>


# Dropdown

Allowing users to select options from a drop-down button

When you add option sets to a configurator, in standard subscriptions, the platform offers 9 types of option sets. One of them is the "Dropdown" button, everyone knows how a dropdown button works, when you click on the button a scrolling list of options (variants) is displayed and users can select the desired one.

**Add dropdown button**

The way to add an option set is the same for all types, in other words, in the "Create Options" tab you have a drop-down button on the top right of the screen where you can add option sets. Find and select "Dropdown" and click the "**Add block**" blue button to add to your configurator.

<figure><img src="/files/GEnnAq0NuxpWSqFJAznD" alt=""><figcaption><p>Add a dropdown option set</p></figcaption></figure>

Before being added to your block list, the platform will prompt you to first define your new dropdown button. We need to provide a Title and add Variants to create a 'Dropdown'.

<figure><img src="/files/mUosdGlRnsuMXMZficaK" alt=""><figcaption><p>Dropdown edit page</p></figcaption></figure>

When you click the blue "Add Variant" button in the bottom right of the screen, a pop-up window will open where you can create the first variant in the drop-down set of options.

<figure><img src="/files/IWdeql8n9r8y8p47wAcz" alt=""><figcaption><p>Edit Variant Popup Window</p></figcaption></figure>

There are 5 parameters where you can define a variant:&#x20;

* **Title** - name your variant inside the dropdown button
* **Variant Name** - this name will not be visible in the configurator, it will be used only for internal purposes
* **Select 3D Model** - choose one 3d model you want to use in this variant (*for example a 3d bike*)

<figure><img src="/files/v1WZ0cmwug8SHT4eo2rd" alt=""><figcaption><p>Select 3D Model</p></figcaption></figure>

* **Select 3D Parts** - choose the 3d parts you want to be affected by this variant (*for example frame part of a bike*)

<figure><img src="/files/FmkTY28bcWyRLr5j3uxK" alt=""><figcaption><p>Select 3D Part</p></figcaption></figure>

* **Select Material** - choose a material that the configurator will apply once the variant is selected (*for example yellow color for frame*)

<figure><img src="/files/PSD4RCW0LaYjZV4pmGXc" alt=""><figcaption><p>Select Material</p></figcaption></figure>

{% hint style="info" %}
**Please note that not all parameters are mandatory, for example depending on the variant type you can skip the Material or not. In the example above we are creating a color variant, so we need a material (color) for this dropdown.**
{% endhint %}

Once you click '**Save**' the first variant will be visible inside the Dropdown option set:

<figure><img src="/files/wC0FbRApMXhS3CbhFuCO" alt=""><figcaption><p>Dropdown variant</p></figcaption></figure>

Repeat the process and add as many variants as you need (*for example add another variant named ‘Red’*). After clicking the '**Save**' button it will create the dropdown button.&#x20;

<figure><img src="/files/lHYLMcl1nxAcntDvlFJp" alt=""><figcaption><p>Dropdown block</p></figcaption></figure>

Once the new drop-down option set is added, it will be found last in the block list as shown in the above image. You can drag and drop anywhere in the list and reflect in your configurator. The dropdown button can be found anywhere along the option bar including outside a section. Now click the ‘**Preview**’ button and see how it looks on your configurator.

<figure><img src="/files/cqjOmVOh8mgbH1QjHIFb" alt=""><figcaption><p>Dropdown in Preview mode</p></figcaption></figure>


# Material

Configuring color options

Material option set is a fast way to create color/material variants for your configurator. If your product has color options the material type option set would be the correct way, however setting the color options using the material block is not the only way to do it, but it is definitely the fastest way to do it.

**Add material option set**

Adding a material block is done the same way we add other types of option set. Go to the "Create Options" tab and click the drop-down button on the top right of the screen and select **Material**. After selecting the Material, click "**Add block**" to add it to the list of blocks in the configurator.

<figure><img src="/files/ibc2HmD5gjsIJ4osMkzr" alt=""><figcaption><p>Add Material option set</p></figcaption></figure>

Before adding Material to the blocklist, the platform will prompt you to define it by writing a **title** and add the first **variant**. Also you can select the style of the button, hide/show title and thumbnail size.

<figure><img src="/files/F3UK9vjvECZ2iCkiCGdU" alt=""><figcaption><p>Material option set edit page</p></figcaption></figure>

After clicking the blue "Add Variant" button in the bottom right of the screen, a pop-up window will appear with the variant parameters.

<figure><img src="/files/C6S1y4bW0XcLnZJFZA0b" alt=""><figcaption><p>Variant popup window</p></figcaption></figure>

There are 5 parameters where you can define a variant:&#x20;

* **Title** - name your variant inside the material option set
* **Variant Name** - this name will not be visible in the configurator, it will be used only for internal purposes
* **Select 3D Model** - choose one 3d model you want to use in this variant (*for example a 3d shoe*)

<figure><img src="/files/piqEHYZ6zJwC06KMHivZ" alt=""><figcaption><p>Select 3D Model</p></figcaption></figure>

**Select 3D Parts** - choose the 3d parts you want to be affected by this variant (*for example parts from a shoe*)

<figure><img src="/files/vXmAAoZDbebKErVF2zhr" alt=""><figcaption><p>Select 3D parts</p></figcaption></figure>

**Select Material** - choose a **material category** (not individual color) that the configurator will apply, the application will automatically generate color variants found in that category.

<figure><img src="/files/eB0y2aASx98KH4oPvGSF" alt=""><figcaption><p>Select material category</p></figcaption></figure>

Once you've chosen your material category, click "Save" and you'll see the first variant added to the Material block. You can repeat this process to add more variants.

<figure><img src="/files/KKhrv5rtkCpOe0ib9f3z" alt=""><figcaption><p>First variant added</p></figcaption></figure>

Now click "Save" again and click the "Preview" button on the top right screen to see what the configurator looks like.&#x20;

<figure><img src="/files/X4JkuKrh8mxPi3Qy1d4x" alt=""><figcaption><p>Preview mode</p></figcaption></figure>

{% hint style="warning" %}
**When adding variants in the Material block, the process is a bit different. Instead of choosing one color, users select a category, and every color in that category is included as a variant in the Material option set.**
{% endhint %}

In order to properly set a Material option set, you will need to create the material category and its materials in the Materials section. For more details on this please see the [Materials](/learning-the-app/materials) chapter.


# Checkbox

Allows users to select multiple variants from the same option set

Each check box represents a variant, and the distinct feature of this type of option set is the possibility to select more than one variant from the same option set.&#x20;

To add an option set checkbox type, you need to click on the "Create Options" tab and at the top right of the screen, select the option set 'Checkbox' type found in the drop-down button.&#x20;

<figure><img src="/files/nh0TIQQWNrrrzlCkoQ6n" alt=""><figcaption><p>Add 'Checkbox' option set</p></figcaption></figure>

After selecting the checkbox, click the "**Add block**" button next to the drop-down to add it to the block list. Before it is added to the block list, you must define the set of options for the check box.

<figure><img src="/files/3snm0LoQrufE017oeBjc" alt=""><figcaption><p>Define 'Checkbox' option set</p></figcaption></figure>

The app will prompt you to assign a **title** and add the first **variant** to the set of checkbox options, also you can hide or show the title. After clicking "Add variant", a pop-up window will appear.

<figure><img src="/files/GVS5fMn5LklIB6JensqW" alt=""><figcaption><p>Define 'Variant' within the Checkbox option set</p></figcaption></figure>

Each variant in an option set allows selection of a 3D model, 3D part(s) and material. Please note that they are not required to be selected (are not mandatory in order to create a variant). You can create these checkboxes without an effect on the 3D object, so it is not necessary to assign it a 3d model or material, only if needed. In the below example we will skip this by directly clicking the 'Save' button.

<figure><img src="/files/WWBBEdgrNmgWOxoJccSS" alt=""><figcaption><p>First variant added within the Checkbox option set</p></figcaption></figure>

Now click on “Save” again and you will find the newly added option set at the bottom of the block list.

<figure><img src="/files/EQ0WJGSWmd2DZs2JvF2U" alt=""><figcaption><p>Checkbox option set in the block list</p></figcaption></figure>

Your configurator is ready for a preview. You can repeat the process and add as many checkbox variants as needed for your configurator. You can add [restrictions](/learning-the-app/products/create-options/restrictions) and [prices](/learning-the-app/products/pricing) and it will be detailed in the relevant chapter of this document.

<figure><img src="/files/NOcb9t1Tt1j4XpKOF3Hq" alt=""><figcaption><p>Preview mode</p></figcaption></figure>


# Toggle

Switch between 2 variants

Toggle option set allows users to switch between 2 variants. There will be some cases where you will need this type of option set, such as hiding or showing things in your configurable product, but you can use this toggle for different non-visual options, which does not reflect a change in the 3D view.

In the below example, we will create a 'toggle' button to show or hide the available colors for chairs.

Adding a **Toggle** block is done the same way we add other types of option set. Go to the "Create Options" tab and click the drop-down button on the top right of the screen and select **Toggle**. After selection, click "**Add block**" to add it to the list of blocks in the configurator.

<figure><img src="/files/hmBgwKDQQvi3LccBAxwb" alt=""><figcaption><p>Add a Toggle option set</p></figcaption></figure>

Before adding Toggle to the blocklist, the platform will prompt you to define it by writing a **title** and add the first **variant**. You can also *hide* or *show* the title in the front configurator.

<figure><img src="/files/KEdbogDZwKvKgy0fF5G1" alt=""><figcaption><p>Define 'Toggle' option set</p></figcaption></figure>

After clicking "Add variant", a pop-up window will appear where you define your variant.&#x20;

<figure><img src="/files/SNRwivo01gNXA8Dt2zSX" alt=""><figcaption><p>Add a 'Toggle' variant</p></figcaption></figure>

In this variant we will say that the chairs are visible, therefore we call this variant "Show" in both **Title** and **Variant Name,** then we click "**Save**" located at the bottom right of the screen. We repeat this process by adding another variant within the Toggle option set, naming it "Hide".&#x20;

{% hint style="info" %}
**In this case, there’s no need to select a 3D model or material, as it will be restricted by the already added ‘Materials’ option set.**
{% endhint %}

<figure><img src="/files/e9R7Z74ZVaLTwBX5caNr" alt=""><figcaption><p>Add the second 'Toggle' variant</p></figcaption></figure>

Click the "**Save**" button and see both variants inside the Toggle button edit page.&#x20;

**NOTE:** You can add only 2 variants in one Toggle button.

<figure><img src="/files/DAnrkBB0YbPVEoNluNBJ" alt=""><figcaption><p>Edit Toggle Options</p></figcaption></figure>

Now click "Save" in the bottom right screen and you can see the toggle button in the block list.

<figure><img src="/files/UT5YxBPRgb60vQpzjQts" alt=""><figcaption><p>Toggle button in the block list</p></figcaption></figure>

Click "**Preview**" to see how it looks in your configurator.

<figure><img src="/files/lEHf1ugZ7RngLWhy43bm" alt=""><figcaption><p>Toggle button in Preview mode</p></figcaption></figure>

{% hint style="warning" %}
**As you click on the 'Toggle' button in 'Preview' mode, you will find that it does not hide the chair colors as you will need to add a restriction in the chair color options (Material) linked with the new Toggle button, in this case the 'Show' variant. This will be discussed in more detail in the** [**Restrictions**](/learning-the-app/products/create-options/restrictions) **chapter.**
{% endhint %}


# Thumbnails

Create selection buttons with thumbnails

The **"Thumbnails"** option set creates, as the name makes clear, selection buttons using images. In other words, for each variant in a set of "Thumbnails" options you can attach an image. This is another way you can create buttons in the configurator, although in the [**'Materials'**](/learning-the-app/products/create-options/material) option set the thumbnails are generated automatically, here you can upload your own images.

<figure><img src="/files/XWIusMEPWFWvEZuIxgzF" alt=""><figcaption><p>Add 'Thumbnails' option set</p></figcaption></figure>

To add a "Thumbnail" option set, go to the "Create Options" tab and select the "Thumbnail" option type from the drop-down menu found in the upper right side and click "**Add block**" to add it to the block list.

Before adding the set "Thumbnail" option to the block list, the platform will prompt you to define it.

<figure><img src="/files/j2CGycquoIDhXr6gO8rL" alt=""><figcaption><p>Define 'Thumbnail' option set</p></figcaption></figure>

It is mandatory to add a **"Title"** and at least **one variant** in order to be able to click the blue "Save" button in the lower right screen and add the new option set to the block list. Please note that you can always return to this option set and edit the title, change the button style and thumbnail size, and hide or show the title until you have the desired result.

Now, click the 'Add variant' blue button found in the lower right side screen and add your first Thumbnail variant.

<figure><img src="/files/16SqLFfogwNIXXfRUDsd" alt=""><figcaption><p>Title and 3D model for the variant</p></figcaption></figure>

In Simplio3D, the variant is defined the same way for all option set types, with a few differences for: [**Numeral**](/learning-the-app/products/create-options/numeral), [**Upload**](/learning-the-app/products/create-options/upload), and [**Text**](/learning-the-app/products/create-options/text) option sets.&#x20;

We need to give a Title and Variant Name (this must be unique), for the rest: **Select 3D Model**, **3D Parts** and **Material** is not mandatory to create the variant unless you want this variant to be reflected in the 3D view. In our case we will leave this variant with only Title and Variant Name since we will use [**Restrictions**](/learning-the-app/products/create-options/restrictions) to enable other options. Click ‘Save’ to create the first variant.

<figure><img src="/files/i04dqwiL1IzT2iOmC6Jb" alt=""><figcaption><p>First variant added</p></figcaption></figure>

Now, repeat the process and add as many variants as needed.

<figure><img src="/files/pMNQleUZDjumiXnH5Tka" alt=""><figcaption><p>Variants in an Option Set</p></figcaption></figure>

The unique feature of the thumbnail option set is the "image" icon found in each variant. You can click on each image icon and upload your own image to be used on the buttons.

<figure><img src="/files/83DQmRWuqSFWnXnX8BWD" alt=""><figcaption><p>Add thumbnail image to a variant</p></figcaption></figure>

In this case, we will use some ready-made images representing different areas for the boxing gloves.

<figure><img src="/files/OEp91XxdWsEAdscWp7la" alt=""><figcaption><p>Variants with thumbnail images</p></figcaption></figure>

**NOTE:** The current standard subscriptions support 3 thumbnail sizes: 25x25, 35x35 and 60x60. Your pictures must be square, in a 1:1 ratio so that the thumbnail image does not look squeezed.

Now, let's click 'Save'  the blue button found at the bottom to add the new Thumbnail option set to the block list.

<figure><img src="/files/EyNhQAkPHQMPd8DWqebU" alt=""><figcaption><p>Thumbnail option set</p></figcaption></figure>

At this stage we can click on the "**Preview**" button at the top right of the screen to see what the configurator looks like.

<figure><img src="/files/lvDDg7LfsFIV9O1GIj3C" alt=""><figcaption><p>Preview mode</p></figcaption></figure>


# Arrows

Select options with the left and right arrows

We covered in previous chapters how to create option sets using: [**Dropdown**](/learning-the-app/products/create-options/dropdown)**,** [**Material**](/learning-the-app/products/create-options/material)**,** [**Checkbox**](/learning-the-app/products/create-options/checkbox)**,** [**Toggle**](/learning-the-app/products/create-options/toggle) and [**Thumbnails**](/learning-the-app/products/create-options/thumbnails). The way to create option sets and add variants is pretty much the same on all of them, as noted. "Arrows" is another way to add a set of options and the only difference compared to the previously mentioned ones is again, how they work in front. Instead of using a drop down menu, thumbnail buttons, toggles or checkboxes here we have 2 arrows, one to the left and one to the right. By clicking the left or right arrows, you can swap between the options.

Go to the "Create Options" tab and select "Arrows" from the dropdown button on the top right screen. Click the "**Add block**" button to add the new option set to the block list.

<figure><img src="/files/D5URYi3vjmGt1jrK61sU" alt=""><figcaption><p>Add 'Arrows' to block list</p></figcaption></figure>

Before adding the "Arrows" option set to the block list, the platform prompts you to define it.

<figure><img src="/files/horLv1Pk7SZ7rZaHM8hf" alt=""><figcaption><p>Define 'Arrows' option set</p></figcaption></figure>

You must have the Title option set for Arrows and add at least 2 variants. Once you've given a title, click the blue "Add Variant" button on the bottom right of the screen. Add your first variant.

<figure><img src="/files/eacHjLNfXR991x9f7uTJ" alt=""><figcaption><p>Add a variant</p></figcaption></figure>

In this pop-up window you will define the variant in the same way as the other option set types. We must have a **Title** and a **Variant Name** (which must be unique). In this case, this variant will represent a color variant for my 3D bottle. So I need to select the assigned 3D model in "**Select 3D Model**" and then the 3D part I want to color is found in "**Select 3D Parts**".

<figure><img src="/files/Apmx004blwhMrSoIdo1S" alt=""><figcaption><p>Select 3D parts that will affect the bottle in the 3D view</p></figcaption></figure>

The last parameter is the material found in "**Select Material**" where I can directly select a color or filter by category and then select a color. In this case, I chose a pink glass material.

<figure><img src="/files/tLnsl6zMIU9tZbUgJA0E" alt=""><figcaption><p>Select Material for the variant</p></figcaption></figure>

Click 'Save' and add your first variant. You must add at least 2 variants to be able to save the "Arrows" option set to the block list.

<figure><img src="/files/pgzWmMC0udI2DD0GzC5e" alt=""><figcaption><p>First variant</p></figcaption></figure>

You can repeat the above process to add more colors. Please note that colors/materials are made in the [**Materials**](/learning-the-app/materials) section.

<figure><img src="/files/MkrpyIbQcAQjJmAQkRjK" alt=""><figcaption><p>Arrows option set - variants list</p></figcaption></figure>

{% hint style="info" %}
**You can set the default selection for each variant using the check button. This means the first option is automatically chosen when the configuration starts. This feature exists in most option set types.**
{% endhint %}

Now click the "**Save**" button at the bottom right of the screen to add the option set to the block list.

<figure><img src="/files/SRVpW2UfqRGPyiS4Vv38" alt=""><figcaption><p>'Arrows' added in the block list</p></figcaption></figure>

Click the "**Preview**" button on the top right screen to see what it looks like in your configurator.

<figure><img src="/files/BuU7MNKFgCtiLNYKloZZ" alt=""><figcaption><p>Arrows preview mode</p></figcaption></figure>


# Upload

Apply images to 3D models

**UV mapping**

Before adding the "Upload" block to the list of blocks, it is mandatory that you have the correct UV coordinates applied to your 3D model. The UV coordinates or UV map helps determine the location (area) in the 3D model (the 3D part) where you want customers to upload their image.

The UV map is applied to 3D models to correctly apply materials, discussed in more detail in the '[**Prepare 3D models**](/getting-started/prepare-3d-models)' chapter, but it also helps determine the area where you want your customers to upload an image.

If you are not familiar with these concepts and do not have someone on your staff who can help you, you will most likely need to hire an artist or 3D modeler to help you with this work.

For example, you have a 3D jersey shirt and you have some areas on the surface where you allow customers to upload their images. In a 3D editor (i.e. Blender, 3D Studio Max, Rhino, etc.) you can set this by creating an UV map for your 3D model as shown in in the image below. **The UV map must be square (1:1 ratio) so that the loaded images do not appear flattened.**

<figure><img src="/files/o1fqMJDuFwtpzpyiGaOM" alt=""><figcaption><p>Creating UV map in 3D Studio Max</p></figcaption></figure>

For the jersey, you can see an yellow square applied on chest, this means that the UV coordinates for applying the upload image are set in that area. But, you can set a UV map in any location you want, it all depends on your configurator. The UV coordinates also represent the size of the image that will fit best when the client uploads one. You may need to go back and forth with the 3D model until you have the desired UV map and then proceed to complete the product configurator.

**Add 'Upload' block**

Once you have your 3D model ready, go to the "Create Options" tab and select the "Upload" block from the drop-down button on the top right screen and click the "**Add Block**" blue button.

<figure><img src="/files/7mRptkoY8VnE562hJKmH" alt=""><figcaption><p>Add 'Upload' block</p></figcaption></figure>

Before adding to the block list, the platform prompts you to define the "Upload" block by giving a **title** and adding the first **variant**.

<figure><img src="/files/XxWZfXWbyUk1PgyLtV5F" alt=""><figcaption><p>Define 'Upload' block</p></figcaption></figure>

Adding a variant to the "Upload" block is done almost the same as the other types of option sets except for the "Upload Settings" step. Each variant needs a **Title**, **Variant Name**, **Select the 3D Model** and **3D part**.

<figure><img src="/files/2Bi4BR8KZGLfSEuLI1t5" alt=""><figcaption><p>Add a variant in the 'Upload' block</p></figcaption></figure>

After selecting the 3D model, as with the other types of option set, you can select the 3D part where the image will be applied. If the 3D model has more than 1 part, you must select that part where the UV map is created in the 3D editor. In our case, our UV map is located on the "*front*" side, and the UV map is located around the chest.

<figure><img src="/files/otBpk9jnMXIlGq5oWSmA" alt=""><figcaption><p>Select 3D part</p></figcaption></figure>

In the 'Upload Settings' the platform allows you to **enable/disable** 5 features in the front configurator:

* **Move** - add 4 arrow buttons in front to move the image on the surface
* **Scale** - add 2 (+/-) buttons in front for customers to scale the image
* **Rotate** - add 2 buttons in front (rotate left and right) for customers to rotate the image
* **Mirror** - allowing users to flip images
* **Save print** - generates a printout with the UV map and the image that was uploaded

{% hint style="info" %}
**By default, these settings are off. Enable them if needed for your configurator, or keep them disabled.**
{% endhint %}

<figure><img src="/files/Q4ZgJbVtUM4TZrJTruTO" alt=""><figcaption><p>Upload settings</p></figcaption></figure>

Click "**Save**" to add the variant to the "Upload" block.

<figure><img src="/files/YtwKxnr6FPsjXZPrBHHC" alt=""><figcaption><p>Upload block variant</p></figcaption></figure>

Click "**Save**" to add the 'Upload" block to the block list.

<figure><img src="/files/M8VzfR7Ce4fS92a3wTJj" alt=""><figcaption><p>Upload option set added in the block list</p></figcaption></figure>

Now, click the "**Preview**" button at the top right of the screen to see a preview of the configurator.

<figure><img src="/files/YD8A7IDWKLuXiM26vRgH" alt=""><figcaption><p>Preview mode</p></figcaption></figure>


# Text

Allows users to apply text (engraving) to a 3D surface

**UV Mapping**

The same as found for the 'Upload' option set, before adding a 'Text' block into your configurator, requires an UV map(s) applied to the 3D model(s), so that the app knows where to apply the text. The UV map can be applied in any 3D editor. The UV map must be square (1:1 ratio) so that the text is not squeezed. When text is applied, it starts to appear on the 3D model in the center of the UV map (square).

{% hint style="info" %}
**We recommend that the area where the text will appear is a separate part by detaching the mesh from the main 3d model.**
{% endhint %}

<figure><img src="/files/EXx7vudNrmaT5pwxUnMq" alt=""><figcaption><p>Add UV map for a 3D ring engraving</p></figcaption></figure>

You may need to go back and forth until you find the best UV map for your 3D model. You can import different versions, try them on the configurator.

**Add 'Text' block**

In our example we have an engagement ring to which we have already applied 2 sets of options: Stone and Metal (materials). Now, we need an engraving option where customers can put a custom text on the ring.&#x20;

Inside the configurator page we click on the "Create Options" tab and click on the drop-down button on the right where we can select the type of option block. In this case, we select the "Text" option block to add the engraving option for the ring. Now click the '**Add block**' button.

<figure><img src="/files/CnQMrcbPpCVYcs3FKzKD" alt=""><figcaption><p>Add 'Text' option block</p></figcaption></figure>

Before adding to the block list, the app will prompt the user to enter a name for the "Text" block and add a variant.

<figure><img src="/files/2GYomzWVq46XhVbsoK8h" alt=""><figcaption><p>Type a block name and add the Text variant</p></figcaption></figure>

After clicking the "Add Variant" button, a pop-up window will start to define the "Text" variant. To define the "Text" variant, you must type a **Title** and a **Variant Name** (the variant name must always be unique & its not visible in the configurator) after which you must select the 3D model where you want the text to appear in the front configurator. In this case we have only one 3D model assigned for this configurator.

<figure><img src="/files/LPiGvkBDxfOOGEtIrI0I" alt=""><figcaption><p>Define 'Text' variant</p></figcaption></figure>

In "**Select 3D Parts**", as in the other types of option set, the user must select the 3D part where the text will appear. In this case we have a separate mesh, part of the ring (with UV map applied) called 'Engraving'. The 3D part and its name "Engraving" are made in the 3D editor before uploading.

<figure><img src="/files/LPXBBaP0ZJICJnDAh83N" alt=""><figcaption><p>Define text variant</p></figcaption></figure>

The last step in defining the "Text" variant before adding it to the options block is "**Text Settings**".&#x20;

<figure><img src="/files/A4g8yPPTEScKjI3LsHly" alt=""><figcaption><p>Text Settings</p></figcaption></figure>

In "**Text Settings**", users can set how the Text function will work in the configurator:

* Users can enter a default text (loaded by default when the configurator starts), in this case we have "Happily Ever After" for the ring. Customers using the configurator will be able to enter any other text they want.
* Font size, set the right font size for the configurator
* Users can select a default font color (loaded by default when the configurator starts), in [Materials](/learning-the-app/materials) users can create a special category for it. In this case, we have 6 colors pulled from '*Logo (Boxing Gloves*)' category and we selected Orange color as default font color. Customers using the configurator will be able to choose a different color from the 6 available. As a creator you can add as many colors as you want in the Materials section.
* Select the font style. The app has over 200 different fonts to choose from and use by default, but you can also let your customers choose the font style they want in the front configurator.

<figure><img src="/files/ImeVSabVlbpHwlSrQ3fx" alt=""><figcaption><p>Text Settings</p></figcaption></figure>

Scrolling further down in "**Text Settings**" we find the following:

* **Move** - add 4 arrow buttons in front to move the text on the surface
* **Scale** - add 2 (+/-) buttons in front for customers to scale the text
* **Rotate** - add 2 buttons in front (rotate left and right) for customers to rotate the text
* **Custom color** - when enabled, allows customers to select a color from the Color Picker

Now, click ‘Save’ to add the ‘Text’ variant in the option block.

<figure><img src="/files/ggSlnYpCTxES49TkVUDF" alt=""><figcaption><p>'Text' variant created inside the Text option block</p></figcaption></figure>

Click "Save" again to create the new text block and click the blue "Preview" button at the top right.

<figure><img src="/files/c37N61M4QzQhJSiDPRTR" alt=""><figcaption><p>Click 'Preview' button to see the changes</p></figcaption></figure>

You can go back and edit the settings, save and then click "Preview" again until it suits your needs.

<figure><img src="/files/CXf6tMju8kII8cCkH79N" alt=""><figcaption><p>Preview mode</p></figcaption></figure>


# Patterns

Apply vector-based designs tailored for the fashion and sports industries

The **Patterns** option set in Simplio3D allows vector-based designs (SVG files) to be applied to 3D models. This feature enables advanced surface customization and is particularly useful for industries where product appearance is a key factor. This can be applied to jersey designs, apparel patterns, custom packaging and sports gear customization.

{% hint style="info" %}
**Before starting the next steps, ensure that a correct** [**3D model**](/getting-started/prepare-3d-models) **is uploaded to the system and that a configurator is created in the** [**Products**](/learning-the-app/products) **section.**
{% endhint %}

#### SVG (Vector-Based Patterns)

Vector patterns must first be uploaded in the **Materials** section in [**SVG**](/learning-the-app/materials/svg). The process follows the same steps as uploading [textures](/learning-the-app/materials/textures). Once uploaded, SVG files can be previewed, and the system automatically detects the color channels within the file. These channels can be renamed for clarity. SVG files can also be organized into categories, ensuring easier management when working with multiple designs.

#### Adding a Pattern Block and Defining Variants

To add a Pattern block, navigate to the **Create Options** tab and from the dropdown menu, choose **Patterns** and then click 'Add block' button.

<figure><img src="/files/Fd4cmdEMWAz9WFGIyy4z" alt=""><figcaption></figcaption></figure>

Variants represent the different designs within a Patterns block. To add one, click **Add Variant**.

<figure><img src="/files/GxIeh2emQ7e4SvH8tJ7h" alt=""><figcaption></figcaption></figure>

A popup window will appear where you must provide a **Title** (the visible name for customers) and a **Variant Name** (used internally).&#x20;

<figure><img src="/files/kAQxcMLxtrSQZXrZANYi" alt=""><figcaption></figcaption></figure>

You then select the **3D model and parts** where the pattern will be applied, followed by choosing the **vector pattern (SVG)** from your Materials > SVG.

<figure><img src="/files/yKZZUkWiVGkJ33fwNXmL" alt=""><figcaption></figcaption></figure>

Each variant includes pattern **Settings** that define its behavior. Users can select a **color category** to import color palettes, similar to the Text option set. It is also possible to enable or disable transformations such as **Move, Scale, Rotate, and Mirror**. Additionally, a **Color Picker** can be enabled, allowing customers to modify the colors of the SVG design directly in the configurator. In this case, I will just enable the **Custom color**.

<figure><img src="/files/5OS2k0qk5w1IaPIqIynr" alt=""><figcaption></figcaption></figure>

Click 'Save' to add your first Pattern variant. Add a thumbnail image with the pattern variant in the similar way we do with [Thumbnail](/learning-the-app/products/create-options/thumbnails) option blocks.&#x20;

<figure><img src="/files/jUoCvhleu8tSrzqfN0Jm" alt=""><figcaption></figcaption></figure>

You can repeat this process by adding more pattern variants.

<figure><img src="/files/9wHllPc1GPA9NY6wD9Cz" alt=""><figcaption></figcaption></figure>

Click 'Save' to add the Pattern block. After defining the necessary variants, launch the configurator by clicking the **Preview** button to test the Pattern block. This preview allows verification of how patterns are applied to the 3D model and ensures that transformations such as scaling, rotation, and mirroring function correctly. The preview also provides the opportunity to test the color customization options before publishing the configurator to end users.

<figure><img src="/files/5pWbfcQcAY1ccF5ptKOQ" alt=""><figcaption></figcaption></figure>

The **Patterns module** extends Simplio3D’s customization capabilities by allowing vector-based surface designs to be applied directly to 3D products. With precise control over placement, transformation, and color customization, the module provides both flexibility for customers and efficiency for production workflows.


# Canvas

Enable a 2D drawing editor

## Overview

This tutorial will guide you through the **Canvas** option block in Simplio3D, a 2D editor allowing users to work with **text, colors, materials, images, and SVGs** as elements on a canvas. It enables customers to design products interactively by applying customizable elements on a 2D surface mapped onto a 3D model.

The **Canvas option set** is a new type of customization tool in Simplio3D that allows customers/configurator users to edit a **2D canvas** mapped to a 3D model’s UV layout.\
It supports:

* **Materials** (colors)
* **Textures/Images**
* **SVGs (vector graphics)**

## Adding a Canvas option block

* **Go to Products**\
  Open the product configurator you want to edit.
* **Add Option Set Block**
  * In the **Option Set dropdown menu**, select **Canvas**.
  * Click **Add Block** (blue button).
* **Define Variant**

  * Each Canvas block can contain **only one variant.**
  * One Canvas variant represents a **2D editable canvas**.
  * For each variant, fill in:
    * **Title** (name displayed in configurator)
    * **Variant Name** (internal reference)
    * **Select 3D Model**
    * **Select 3D Part** (⚠️ only one 3D part can be selected)

  ➝ Once a part is selected, the system will **read its UV map** and display it in the 2D Canvas editor.

## Canvas Settings

Configuring **Canvas Settings**:

* **Textures category**
  * Select texture category to load in the canvas.
* **SVG category**
  * Select SVG category to load.
* **Colors category**
  * Select material category for color palettes.
* **Toggle Features** (Enable/Disable per variant):
  * Textures: Load textures
  * SVG: Load SVGs
  * Color selection (for text & vectors)
  * Control: Zoom, rotate, pan
  * Customer color: pick color tool
* **Grid**
  * Turn grid **ON/OFF**
  * Upload custom grid PNG (grid always overlays canvas).

{% hint style="info" %}
All settings are reflected in the **front-end configurator** when users open the Canvas editor.
{% endhint %}

## Canvas in the Front-End

From the customer perspective, the flow looks like this:

1. **Select Base Product Options**
   * Example: Choose sock color, size, and quantity.
   * ⚠️ The base **sock color** becomes the **background color of the canvas**.
2. **Open Canvas Editor**\
   When customers click on the Canvas option, a **2D editor popup** appears.
3. **Designing Inside Canvas**\
   Customers can:
   * Add text
   * Add vector shapes
   * Choose from textures/images
   * Upload custom images
   * Edit elements: duplicate, copy/paste, flip, delete, reorder (layer control)
   * Change colors (via picker or palette)
   * Enable/disable grid
   * Zoom, pan, rotate

## Example Workflow (Sock Customization)

1. User chooses **Sock Size** → **Sock Color** → **Quantity**.
2. User clicks **Customize** → Canvas editor opens.
3. User adds text + logo + custom pattern on sock.
4. User saves → Design is applied to 3D preview.
5. On checkout → Order summary includes **selected options** + **.SVG design file**.


# Numeral

Set quantitative values ​​for the configurator

The **Numeral** option set is the most complex type of option and requires a bit more knowledge and work to build one correctly. With **Numeral** you can build 3D configurators that support quantitative values ​​such as: size, temperature, pressure, quantity and more.

The option set is good when you want to resize an item, allow users to select a quantity, enter a temperature or pressure for the item, and these parameters can be linked with other options using [constraints](/learning-the-app/products/create-options/restrictions).

**3D Model Preparation**

For Numeral, depending on the configurator, it requires some specific 3D model preparations. In general, we need to structure the 3D model into the correct parts so that we allow a numerical parameter for the right part or parts. For example a table we allow to resize only the upper part of the surface and not the legs. In general, it is good practice for all 3d parts that will be resized to have the pivot at the center of the model.&#x20;

<figure><img src="/files/Eb0gxzHcmag3btZQQqHy" alt=""><figcaption><p>Setting table components in Blender</p></figcaption></figure>

In other cases, such as quantity, temperature, or pressure, it may not need to do anything to the 3D model.&#x20;

{% hint style="warning" %}
**To learn how to edit 3D models for proper scaling with the 'Numeral' block (great for tables, cabinets, closets, windows, doors, shelves, roofs and sheds), read this section:** [Modeling and editing 3D meshes to support numeral blocks.](/learning-the-app/products/create-options/numeral/modeling-and-editing-3d-meshes-to-support-numeral-blocks)
{% endhint %}

<mark style="color:red;">**IMPORTANT:**</mark> Be sure to add the mesh or part at the group position when using the **Numeral** option block. Avoid placing it inside groups or nodes, as the platform doesn’t support grouped elements.

<figure><img src="/files/RveEXzS33vqdD1kvPcqu" alt=""><figcaption><p>Make sure you remove parts/object inside the groups/nodes</p></figcaption></figure>

**Add 'Numeral' Block**

Once you have the 3D model ready and uploaded into the platform, we can add the first **Numeral** block. The Numeral option set block is added just like the other option blocks.

In this example, we have a table configurator with default materials applied and now we need to add the option for users to set the size of their table top surface. But this could be applied to other cases.&#x20;

After selecting the [Layout](/learning-the-app/products/select-layout) and [3D model](/learning-the-app/products/add-3d-models), click the "Create Options" tab to add the Numeral block. Click in the upper right screen on the drop-down button where we can select the block type. After scrolling down and selecting the "Numeral" option, click the "Add block" button.

<figure><img src="/files/orHoqZ9he86YuTq0NNZQ" alt=""><figcaption><p>Add 'Numeral' block</p></figcaption></figure>

After clicking the "Add block" button, the application will prompt the user to define the option set and add the first variant. Enter a **Title**, select the **Input Style** and add the first variant from the blue button on the bottom right of the screen "**Add variant**".

<figure><img src="/files/dAOPMPmWkfr5fDTxN8RW" alt=""><figcaption><p>Define the 'Numeral' block</p></figcaption></figure>

**Input Style** - there are 3 input styles: Field, Horizontal Bar and Dropdown.

<figure><img src="/files/X3BZgZNjEH6mFjr8MigQ" alt=""><figcaption><p>Input styles</p></figcaption></figure>

When you add a variant, a pop-up window will appear and the application will prompt the user to enter the variant **Title**, the **Variant Name** (which must be unique), select the **3D Model**, select the **3D Parts** (in my case the top table surface) and choose the **Numerical** settings that are specific to this type of options block.

<figure><img src="/files/hOtUzZT8Cmplbutvzj6y" alt=""><figcaption><p>Create Numeral variant</p></figcaption></figure>

In this case, my first variant is "Width" (I put in the Title), this will allow the surface table to be resized. Further, I select the 3D table and the 3D part I want to resize with this variant.

<figure><img src="/files/FZEEJf1LCVvlpPnLGHzP" alt=""><figcaption><p>Select the part(s)</p></figcaption></figure>

In this example, I have a table made from 9 parts but I want to resize only the 'surface' component, therefore I select 'surface'.

Next we go through the last step, the "**Numerical**" settings, where we define exactly what the "Width" variant will do.

<figure><img src="/files/OUPLnzcxUd9GoQV5yMaF" alt=""><figcaption><p>Numerical Settings</p></figcaption></figure>

List of **Numerical** settings available in the platform:

* **Type of value** - there are 2 options in the dropdown: 'Quantity' and 'Size'. In our case we use 'Size'.
* **Show dimensions** - allows users to view the dimensions of a configured 3D model. The setting only involves the axis of the variant.

{% hint style="warning" %}
**After checking "Show dimensions" here, you need to make sure that the "Show dimensions" checkbox on the** [**Share tab**](/learning-the-app/products/share) **is also checked.**
{% endhint %}

* **Unit** - For **quantity** we have pieces (pcs), pounds (lb) and kilograms (kg). For **size** we have: mm, cm, m, inches, feet, degree and PSI. In our case we will select 'cm'.

<figure><img src="/files/PLI6NwPlBKmkYMpka93m" alt=""><figcaption><p>Numerical Settings</p></figcaption></figure>

* **Default value** - in this field we mark the default value, which means that the platform will take the actual size of the 3D model when it was loaded on the platform. In our case, the width of the 3D table is approximately 190cm therefore we type 190. Every time the configurator will be loaded the width value will be at 190cm.
* **Increment** - allows configurator users to change the size in increments. In this case, we will use a 10cm increment but you can use any number that fits your configurator requirements.
* **Minimum value** - we set the minimum value for the 'width'. In this case we added 120cm.
* **Maximum value** - we set the maximum value for the 'width'. In this case we added 300cm.

<figure><img src="/files/cbzh9rFOJ3Ur5S5EsVYh" alt=""><figcaption><p>Numerical Settings</p></figcaption></figure>

* **Position parts** - this section has to do with another subchapter explained here: [Modeling and editing 3D meshes to support numeral blocks](/learning-the-app/products/create-options/numeral/modeling-and-editing-3d-meshes-to-support-numeral-blocks). This is intended for more advanced resizing capabilities. For this example, this section remains unused.
* **Scaling on** - here we select from the dropdown the axis along which the 3d part(s) will 'stretch'. The platform allows you to set along the \[x], \[y], \[z], \[x, z] and all axis (full scaling). In our case the component 'surface' will stretch along the 'x' axis for width variant.

<figure><img src="/files/vUOlRTCqPTxiIKYnDAUy" alt=""><figcaption><p>Axis in Simplio3D</p></figcaption></figure>

After going through the steps, we are ready to click "Save" and add the first Numeral variant.

<figure><img src="/files/uojbo9aW51XcnxBOKhz9" alt=""><figcaption><p>Numeral variant</p></figcaption></figure>

Click "Save" again to create the Numeral option block.

<figure><img src="/files/ihtHlivSZZdLg6Isg6vK" alt=""><figcaption><p>Numeral option block</p></figcaption></figure>

Now, the configurator is ready for a preview. Just click the blue "**Preview**" button on the top right of the screen and test the configurator.

<figure><img src="/files/jdMP23tTJpqMejs90Teo" alt=""><figcaption><p>Changing the width on a surface table</p></figcaption></figure>


# Modeling and editing 3D meshes to support numeral blocks

Keep mesh proportions consistent during scaling on the X, Y, or Z axis

Scaling 3D models and keep mesh proportions consistent has always been tough to standardize. The **Numeral** option block makes it easier by letting you properly scale along the X, Y, and Z axes; for furniture like **tables**, **cabinets**, **closets** or **shelves** or construction for **windows, doors**, **sheds** and **roofs**, where users can set *width*, *length*, or *depth*. To ensure proper scaling, the 3D model must be edited before being uploaded to the platform and used in the configurator.

Each configurator type comes with its own scaling challenges, so we’ll explain them separately using simple examples for tables, cabinets, shelves, closets, windows, doors, sheds and roofs.

{% hint style="warning" %}
**A common requirement is to ensure that each part of the 3D model has its center axis (pivot) correctly positioned, adjusted according to the specific type of configurator. The correct center axis will be illustrated through various configurator examples.**
{% endhint %}

Properly adjusting the center axis on a 3D model part ensures accurate scaling according to the configurator type, for example, keeping the shape of the legs and top surface edges consistent for tables, maintaining shelf thickness when adjusting the height of cabinets or closets, and preserving correct proportions for double-frame windows. For more specific cases, you can refer to examples from different demos, for instance, **for a cabinet standing on legs**, the center axis (pivot) can be adjusted using the methods shown in both the table and cabinet examples.

**Below is a diagram showing three examples of axis positions on a 3D part and how scaling changes based on the axis placement.**

<figure><img src="/files/dkQvviMtXEzzTCnT2VXM" alt=""><figcaption></figcaption></figure>

Once the axis is correctly set, the next important step in configuring the Numerical variant is to accurately define, using the 'Position parts' setting, which parts should scale and which should remain fixed based on the parameter type (e.g., width). For example, when scaling a 3D model in width (along the X axis), not all parts will scale, legs will remain fixed relative to the rest of the model.

**Below are the primary scenarios that require center axis adjustments, based on the specific configurator type:**

<table data-view="cards"><thead><tr><th></th></tr></thead><tbody><tr><td><a href="/pages/eBl9S9mJ2xj1wx8gzYmn">Table</a></td></tr><tr><td><a href="/pages/ym2WvOXmNFGbhLM6cIDi">Cabinet</a></td></tr><tr><td>Closet</td></tr><tr><td>Shelves</td></tr><tr><td>Window</td></tr><tr><td>Door</td></tr><tr><td>Roof</td></tr><tr><td>Shed</td></tr></tbody></table>


# Table configurator

Adjust the center axis for a 3D table model

## Prepare 3D Model

You can download the 3D table model directly from [here](https://sourceforge.net/projects/simplio3d/files/Mesh%20axis%20use%20cases/table-example.glb/download) to examine its center axis adjustments. By opening the model file in your preferred 3D software (e.g., Blender), you can inspect the pivot point placement and study how the center axis are positioned on each part (e.g. top surface, legs). **A detailed review of the axis setup in this table model provides a valuable reference for implementing similar configurations in your own projects.**

[**Download**](https://sourceforge.net/projects/simplio3d/files/Mesh%20axis%20use%20cases/table-example.glb/download) \[*table-example.glb*]

When building a table configurator that allow size adjustments, two most common aspects must be taken into account during 3D model editing:

{% hint style="info" %}

1. **If the table's top surface features edge profiles other than a flat design (e.g., rounded, angled, etc.), maintaining consistent edge geometry during scaling requires that the table edges be segmented (cut) on all sides.**

2. **The table legs should remain unscaled when the top surface is resized to preserve their original shape; however, their position must be dynamically adjusted to maintain correct alignment relative to the scaled top surface.**
   {% endhint %}

3. **Table top surface edge profile**

This means that when the tabletop has shaped edges, like rounded or angled edges rather than simple flat ones, you can’t just scale the entire top surface as a single piece without affecting the edge’s shape.

To keep the edges looking correct and consistent as the table size changes, you need to divide (or “cut”) the edges into separate sections on all sides. This way, when you scale the top surface, the edges can adjust properly without distorting their profile.

In other words, breaking the edges into segments ensures the detailed shape of the edges remains intact during resizing.

<figure><img src="/files/5RuotyQDWlGbcvoZ2nIR" alt=""><figcaption></figcaption></figure>

2. **Table legs**

It means that when you change the size of the table’s top surface, you don’t want to stretch or shrink the legs themselves because that would distort their shape. Instead, the legs should keep their original dimensions.

However, since the top surface is getting bigger or smaller, the legs need to move (change position) so they stay correctly aligned under the corners or edges of the resized top. So, the legs don’t change size, but their placement updates to match the new size of the table top.

This ensures the legs always look correct and are positioned properly relative to the top, no matter how much the top is scaled.

<figure><img src="/files/i4GfqNTK2GJr02FAvc92" alt=""><figcaption></figcaption></figure>

## Build the configurator

**Example of how to correctly set up the numeral variables for width, length, and height for tables**

Create a new product by clicking the blue 'Add Product' button (ensure the 'Configurator' option is checked). Once the product is created, add the table’s 3D model from the 'Add 3D Models' tab, then create the **size variables** from the 'Create Options' tab. For more details, see the [*New Product*](/learning-the-app/products/new-product) chapter.

In the 'Create Options' tab, use the dropdown in the upper-right corner to select the *Numeral* block and create the first size variant, 'Width'. Click 'Add block' to add the Numeral block.

<figure><img src="/files/GJA0AXgOIaOIIY1vg4Il" alt=""><figcaption></figcaption></figure>

Before adding the Numeral block, assign it a title, choose the field type (in this case, 'Horizontal bar'), and then click 'Add Variant' to create the first size variant: **Width**.

### Width

<figure><img src="/files/E3e15vQmRvjilU6S3zGy" alt=""><figcaption></figcaption></figure>

When you click 'Add Variant,' a popup window will appear where you can define the 'Width' variant. Enter a title for the variant (in this case, 'Width') and use the same name for the variant name ('width'). Then, in the 'Select 3D Model' section on the right, choose the 3D model you want to scale.

<figure><img src="/files/bBbNYofaqHgT9R141XrF" alt=""><figcaption></figcaption></figure>

Next, select the 3D parts that will be affected by the block. In this case, we choose all parts.

<figure><img src="/files/WnJB4ziJiKfIX8ddKS6l" alt=""><figcaption></figcaption></figure>

To finalize defining the Width variant, we click 'Numerical' section and we do the following set-up:

1. **Type of Value:** select 'Size'
2. **Show dimensions:** check 'dimensions' if you want to show the size in the front-end
3. **Unit:** select the unit measurements (in our case I'll choose 'cm')

<figure><img src="/files/dTRocBHCFQOo4gXLDNnZ" alt=""><figcaption></figcaption></figure>

4. **Default value:** type the original width size of the 3D model (e.g. 160cm)
5. **Increment:** the change in increment as we scale the table (e.g. 1cm)
6. **Minimum value:** the minimum width (e.g. 90cm)
7. **Maximum value:** the maximum width (e.g. 210cm)

<figure><img src="/files/aHUcUQlgbwTtNVsM4GpA" alt=""><figcaption></figcaption></figure>

8. **Scaling on:** in this case, I select the X-axis, which the table will scale along for the width
9. **Position parts:** we select the parts that will remain in place (not scale) while the table scales in width along the X-axis.

<figure><img src="/files/oA49unJLjoorMlnl4rj1" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**For tables, the fixed parts are generally the legs. Parts that scale along the Z or Y axis (length or height) also remain fixed when scaling the width along the X-axis. We will create separate variants for each size, and the fixed parts vary depending on the axis along which the table is scaled.**
{% endhint %}

Click 'Save' and add your first Numeral variant, Width.

<figure><img src="/files/uoDH3Zn932bKFDBMmXnZ" alt=""><figcaption></figcaption></figure>

Next, you can repeat this process to add two more variants: one for **Length** and another for **Height**. The steps are the same, except for the Title and the 'Numerical' section, where the setup differs. You will need to adjust the default, minimum, and maximum values, change the scaling axis (Z or Y), and select different position parts (the parts that don't scale).

### Length

Now, add the Length variant by clicking the blue 'Add Variant' button. In the popup, enter 'Length' for the title and variant name, then select all its 3D parts before configuring the Numerical settings.

<figure><img src="/files/CaXcdLaK8cajsF4a9fp1" alt=""><figcaption></figcaption></figure>

In the Numerical settings, set up the length as follows:

1. **Type of value, show dimensions** and **unit** are the same as found above in Width.
2. **Default value:** we type the original mesh length (depth) of the table (e.g. 90cm)
3. **Increment:** the change in increment as we scale the table (e.g. 1cm)
4. **Minimum value:** type the minimum length of the table (e.g. 70cm)
5. **Maximum value:** type the maximum length of the table (e.g. 110cm)

<figure><img src="/files/7bm6wct7stHf9bbSqwH1" alt=""><figcaption></figcaption></figure>

6. **Scaling on:** in this case, I select the Z-axis, which the table will scale along for the length
7. **Position parts:** we select the parts that will remain in place while the table scales in length (depth) along the Z-axis

<figure><img src="/files/VvF1tRRXrhUHEy2CXa2h" alt=""><figcaption></figcaption></figure>

Click 'Save' and add the second Numeral variant, Length.

<figure><img src="/files/e5E5772ynuRp3nGwjlpI" alt=""><figcaption></figcaption></figure>

Click the 'Save' button again to save the entire Numeral block with its variants. Then, click 'Preview' to test the configurator and check if the table scales correctly in width and length.

### Height

Finally, add the **Height** variant within the Numeral option block. The process is the same as for Width and Length, with differences in the title and variant name (use 'Height') and the Numerical settings.

There are different ways to define height, it could be the overall height of the table or just the thickness of the tabletop. Depending on which parts need to be scaled along the Y-axis, the correct parts must be selected. In our case, we will scale only the legs to increase the table's height.

Add another variant titled **"Height"**. This time, select only the 3D parts that will be scaled, in our case, the legs.&#x20;

{% hint style="warning" %}
**The rest of the table does not need to move relative to the legs, as only the legs will be scaled, therefore in this case we will not need to select all the 3D parts.**
{% endhint %}

<figure><img src="/files/odyZOGqZGlHV8lYjhXZr" alt=""><figcaption></figcaption></figure>

In the **Numerical settings**, we keep the same settings for 'Type of value: Size', 'Show dimensions: checked', 'Unit: cm' and 'Default value: 90', 'Increment: 1', 'Minimum value: 70', Maximum value: 120', 'Scale on: Y axis' and leave 'Position parts' unselected. These values may vary depending on the type of table.

<figure><img src="/files/FroQQk0z6N54FHo6T7Kz" alt=""><figcaption></figcaption></figure>

After clicking **"Save"**, you should see three variants in the *Numeral* option block: **Width**, **Length**, and **Height**. Click **"Save"** again to update the entire *Numeral* option block, then click **"Preview"**.

<figure><img src="/files/xImueEMVIySglA9F67XR" alt=""><figcaption></figcaption></figure>

In **Preview**, the result should look similar to the image below. Test by changing the width, length, and height to ensure they scale correctly. If not, review the size variants to confirm they are set up properly, and verify you’ve followed all the steps on this page. If the sizes still don’t scale correctly, check that the 3D model’s center axis is positioned correctly, and update the model if necessary.

<figure><img src="/files/XqNVenbbKfllwVcTgJyg" alt=""><figcaption></figcaption></figure>

### Add more options

Once the size functionality is working correctly, you can enhance your configurator with additional options, such as color selection or choosing different parts. For example, customers could select from various types of top surfaces, legs, or accessories, while applying specific restrictions where needed.

For more information on adding extra option blocks to your configurator, refer to the [**Product**](/learning-the-app/products) section and explore the different types of [option blocks](/learning-the-app/products/create-options) and [restrictions](/learning-the-app/products/create-options/restrictions) available.


# Cabinet configurator

Adjust the center axis for a 3D cabinet configurator

## Prepare 3D Model

You can download the 3D cabinet model from [here](https://sourceforge.net/projects/simplio3d/files/Mesh%20axis%20use%20cases/cabinet_example.glb/download) to review its center axis adjustments. By opening the file in your preferred 3D software (e.g., Blender), you can examine the pivot point placement and see how the center axes are positioned for each component (e.g., side panels, shelves, front door(s), legs). **This detailed review of the axis setup offers a useful reference for applying similar configurations in your own projects.**

[**Download**](https://sourceforge.net/projects/simplio3d/files/Mesh%20axis%20use%20cases/cabinet_example.glb/download) \[*cabinet-example.glb*]

When building a cabinet configurator that allow size adjustments, two most common aspects must be taken into account during 3D model editing:

{% hint style="info" %}

1. **If the cabinet has legs, the correct placement of the center axis is crucial. Review the example 3D cabinet model to see how the pivot axis is positioned for the legs. A key detail to note is that the pivot is aligned with the side panel. This technique also applies to handles and hinges.**

2. **If the cabinet is scaled in height along the Y-axis and includes shelves, the shelf thickness should remain consistent as the cabinet height increases. The pivot of a shelf or panel needs to be positioned at its geometric bottom center.** **The same applies to the side, front, and back panels.**&#x20;
   {% endhint %}

3. **Center Axis Placement for Legs, Handles, and Hinges**

If the cabinet has legs, the placement of the center axis is crucial for ensuring accurate scaling, positioning, and alignment during configuration. In the example 3D cabinet model, the pivot axis for the legs is aligned with the side panel, allowing the legs to move correctly without distorting their shape or position when the cabinet is scaled in width, depth or height.

The same principle applies to smaller components such as handles and hinges. Correct pivot placement ensures that handles move naturally with the door, and hinges maintain proper alignment during model adjustments. Misaligned pivots on these elements can cause unrealistic movement, incorrect scaling, or gaps between connected parts.

<figure><img src="/files/qBECoVpb8IG19EAIqm6b" alt=""><figcaption></figcaption></figure>

2. **Maintain consistent thickness for the side, front, and back panels, as well as the shelves, when scaling the cabinet**

When scaling a cabinet in height along the Y-axis, it’s important to maintain the structural proportions of its components. If the cabinet includes shelves, their thickness must remain consistent as the overall height increases; otherwise, the shelves may appear stretched or unnaturally thin.

The same principle applies to the side, front, and back panels. Keeping their thickness uniform ensures the cabinet maintains a realistic and visually balanced appearance.

Achieving this requires correct placement of the center axis for each component. **For example, if the pivot of a shelf or panel is positioned at its geometric bottom center, scaling the cabinet along the Y-axis will expand the space between elements without altering their thickness. For the side panel, we can see from the file that the axis is positioned internally, which means it is located at the inner bottom center.** Misaligned pivots can lead to distorted parts, gaps, or overlapping geometry, which can compromise both the functionality and aesthetics of the model.

<figure><img src="/files/hOYilcMunRmo0DwbCwm7" alt=""><figcaption></figcaption></figure>

## Build the configurator

**Example of how to correctly set up the numeral variables for width, length, and height for cabinets**

Create a new product by clicking the blue 'Add Product' button (ensure the 'Configurator' option is checked). Once the product is created, add the cabinet’s 3D model from the 'Add 3D Models' tab, then create the **size variables** from the 'Create Options' tab. For more details, see the [*New Product*](/learning-the-app/products/new-product) chapter.

In the 'Create Options' tab, use the dropdown in the upper-right corner to select the *Numeral* block and create the first size variant, 'Width'. Click 'Add block' to add the Numeral block.

<figure><img src="/files/A6wnQU5kVl6ky22IyDVB" alt=""><figcaption></figcaption></figure>

Before adding the Numeral block, assign it a title, choose the field type (in this case, 'Horizontal bar'), and then click 'Add Variant' to create the first size variant: **Width**.

<figure><img src="/files/6qopykdw8y6UDK7YUPdO" alt=""><figcaption></figcaption></figure>

### Width

When you click 'Add Variant,' a popup window will appear where you can define the 'Width' variant. Enter a title for the variant (in this case, 'Width') and use the same name for the variant name ('width'). Then, in the 'Select 3D Model' section on the right, choose the 3D model you want to scale.

<figure><img src="/files/SXXQsQ5gW3BcTxfesU3t" alt=""><figcaption></figcaption></figure>

Next, select the 3D parts that will be affected by the block. In this case, we choose all parts.

<figure><img src="/files/KRpInyPabFfhjn3uCwMs" alt=""><figcaption></figcaption></figure>

To finalize defining the Width variant, we click 'Numerical' section and we do the following set-up:

1. **Type of Value:** select 'Size'
2. **Show dimensions:** check 'dimensions' if you want to show the size in the front-end
3. **Unit:** select the unit measurements (in our case I'll choose 'cm')

<figure><img src="/files/UClqsxk0pgod4BDmsQrq" alt=""><figcaption></figcaption></figure>

* **Default value:** type the original width size of the 3D model (e.g. 60cm)
* **Increment:** the change in increment as we scale the table (e.g. 1cm)
* **Minimum value:** the minimum width (e.g. 45cm)
* **Maximum value:** the maximum width (e.g. 80cm)

<figure><img src="/files/BBOk3BRvVzOadzc439ql" alt=""><figcaption></figcaption></figure>

* **Scaling on:** in this case, I select the X-axis, which the cabinet will scale along for the width
* **Position parts:** we select the parts that will remain in place (not scale) while the cabinet scales in width along the X-axis.

<figure><img src="/files/0fLcWi5kqMXGw32SMvJc" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**When scaling a typical cabinet along the X-axis (Width), the components that remain unchanged in size are the side panels (left and right), legs, and, if present, handles and hinges.**
{% endhint %}

Click 'Save' and add your first Numeral variant, Width.

<figure><img src="/files/iSHWtkfYNxty4WI45H49" alt=""><figcaption></figcaption></figure>

Next, you can repeat this process to add two more variants: one for **Length** and another for **Height**. The steps are the same, except for the Title and the 'Numerical' section, where the setup differs. You will need to adjust the default, minimum, and maximum values, change the scaling axis (Z or Y), and select different position parts (the parts that don't scale).

### Length

Now, add the Length variant by clicking the blue 'Add Variant' button. In the popup, enter 'Length' for the title and variant name, then select all its 3D parts before configuring the Numerical settings.

<figure><img src="/files/71vJ6SWUjpV72XeT0OYt" alt=""><figcaption></figcaption></figure>

In the Numerical settings, set up the length as follows:

* **Type of value, show dimensions** and **unit** are the same as found above in Width.
* **Default value:** we type the original mesh length (depth) of the table (e.g. 45cm)
* **Increment:** the change in increment as we scale the table (e.g. 1cm)
* **Minimum value:** type the minimum length of the table (e.g. 30cm)
* **Maximum value:** type the maximum length of the table (e.g. 65cm)

<figure><img src="/files/pmFyE2uyDobLpmX1tXvd" alt=""><figcaption></figcaption></figure>

* **Scaling on:** in this case, I select the Z-axis, which the cabinet will scale along for the width
* **Position parts:** we select the parts that will remain in place (not scale) while the cabinet scales in width along the Z-axis (*typically these are the front parts and legs*).

{% hint style="warning" %}
**When scaling a typical cabinet along the Z-axis (Length or Depth), the components that remain unchanged in size are the front panels/doors (left and right), back panel, legs, and, if present, handles and hinges.**
{% endhint %}

<figure><img src="/files/JGkFqGlsKebe8MhQ9fDP" alt=""><figcaption></figcaption></figure>

Click 'Save' and add the second Numeral variant, Length.

<figure><img src="/files/qQfBmSS6MQ5HiV10U4jP" alt=""><figcaption></figcaption></figure>

### Height

Finally, add the **Height** variant within the Numeral option block. The process is the same as for Width and Length, with differences in the title and variant name (use 'Height') and the Numerical settings.

Depending on which parts need to be scaled along the Y-axis, the correct parts must be selected. In our case, we will scale the side panels (left/right), front and back panels.

<figure><img src="/files/07h4GOVjlgG5Wk0allpH" alt=""><figcaption></figcaption></figure>

In the **Numerical settings**, we input the following settings for 'Type of value: Size', 'Show dimensions: checked', 'Unit: cm' and 'Default value: 80', 'Increment: 1', 'Minimum value: 60', Maximum value: 90', 'Scale on: Y axis' and in 'Position parts' select the fixed parts, in our case: shelfs and legs. These values may vary depending on the type of cabinet.

<figure><img src="/files/DlqX9GHzbnws3yInSaHB" alt=""><figcaption></figcaption></figure>

After clicking **"Save"**, you should see three variants in the *Numeral* option block: **Width**, **Length**, and **Height**. Click **"Save"** again to update the entire *Numeral* option block, then click **"Preview"**.

<figure><img src="/files/fNLClXtjs759FNDWjYZE" alt=""><figcaption></figcaption></figure>

In **Preview**, the result should look similar to the image below. Test by changing the width, length, and height to ensure they scale correctly. If not, review the size variants to confirm they are set up properly, and verify you’ve followed all the steps on this page. If the sizes still don’t scale correctly, check that the 3D model’s center axis is positioned correctly, and update the model if necessary.

<figure><img src="/files/gq9FTfcz1pk9UokazCY1" alt=""><figcaption></figcaption></figure>

## Add more options

Once the size functionality is working correctly, you can enhance your configurator with additional options, such as color selection or choosing different parts. For example, customers could select from various types of front doors, legs or no legs, and accessories, while applying specific restrictions where needed.

For more information on adding extra option blocks to your configurator, refer to the [**Product**](/learning-the-app/products) section and explore the different types of [option blocks](/learning-the-app/products/create-options) and [restrictions](/learning-the-app/products/create-options/restrictions) available.


# Restrictions

Conditional Logic Options

In previous chapters, we covered how users can add different types of option sets. Depending on the configurator built, in each set of options we have a number of variants that we can add. But all of these variants found in all of the option sets I added can be linked together depending on the constraints that the product configurator I'm building will have. For example, if I choose to select teacup model 1, then I may have one set of colors available, but if I choose teacup model 2, then I may have a different set of colors available for that model. I can achieve this by linking the variants together.

{% hint style="info" %}
For your restrictions to work properly, make sure your 3D models are set up correctly. To avoid issues, **don’t use multiple materials on a single part** or **group materials or parts together**. Keep your 3D models **simple and clean** for best results.
{% endhint %}

In short, each variant can be linked to one or more variants to create a restriction.

To add a restriction, click the button with a "chain" icon located in the right bar in each variant.

<figure><img src="/files/m0ZphaRYeaILn3Y3no9F" alt=""><figcaption><p>Restriction buttons</p></figcaption></figure>

{% hint style="info" %}
**If a restriction icon includes an asterisk (\*), it indicates that a restriction has been set for that variant, as shown in the screenshot above.**
{% endhint %}

Except for "Default" and "Section", all option types have a restriction button displayed on each added variation. Clicking the restriction button will open a pop-up window with settings to define the restriction for the variant.

<figure><img src="/files/kHN7VT6wDnHXMS8GUoV6" alt=""><figcaption><p>Restriction Popup Window: Constraint Expression</p></figcaption></figure>

**In Simplio3D, all restrictions share the same general expression:**&#x20;

Option is: *Hidden by default, becomes visible*, When: *All following rules are true*; **Type of Restriction** **>** **Options set**.

For the example found in the image above, this means that the color variant "*palm\_back\_plain*" will be hidden by default, becoming visible only when all of the following rules are true: when users select the "*plain*" material type it will unhide the '*palm\_back\_plain*' color. In other words, if I select Plain material I will see the 'palm\_back\_plain' color option.

As a user, you just need to select the ‘Type of restriction’, ‘Option set’ and the variant(s) upon which the variant will be linked.

The platform works with 2 types of restrictions:&#x20;

* Has one or more variants selected from - an example explained above&#x20;
* The variant value is between min and max - this type of restriction only works with numeric variants, for example restriction within a range.

**Please find below restriction examples:**

Example using ['Has one or more variants selected from' type of restriction.](/learning-the-app/products/create-options/restrictions/has-one-or-more-variants-selected-from-type-of-restriction)

Example using ['The variant value is between min and max' type of restriction.](/learning-the-app/products/create-options/restrictions/the-variant-value-is-between-min-and-max-type-of-restriction)

These restrictions can also be used together with hidden option sets, which serve as **'dummy' options** in certain situations.

Example: [How to apply 'dummy' blocks for more advanced restrictions](/learning-the-app/products/create-options/restrictions/how-to-apply-dummy-blocks-for-more-advanced-restrictions)

{% embed url="<https://www.youtube.com/watch?v=RUwTsx00dfs>" %}


# 'Has one or more variants selected from' type of restriction

Create a constraint between 2 variants

The most common method is creating restrictions between two or more variants, as this approach covers most product configurator requirements. Depending on the option set type and how each variant is defined, you can hide or display a material (color), a 3D part, or an entire 3D model.

<figure><img src="/files/mCt9ZbeqfY9ZORe2rwIz" alt=""><figcaption><p>Ways of defining a variant </p></figcaption></figure>

{% hint style="warning" %}
**The effect of a restriction on a variant depends on how that variant is defined, as shown in the image above.**
{% endhint %}

Let's take the ring configurator example below:

<figure><img src="/files/dCBHejquzypSjwd8GpxW" alt=""><figcaption><p>Ring with metal and stone variants selection</p></figcaption></figure>

We have a ring configurator made from 2 'Thumbnail' blocks: **Metal** and **Stone**. We already learned how you can add a [Thumbnail](/learning-the-app/products/create-options/thumbnails) option set in another chapter. For Metal we have 3 variants and for Stone we have 4 variants. **I want to create a restriction when I select White gold (the first metal variant) to have only 2 stone options: white and black diamond.** How will I proceed?

First, we access the "Create Options" tab and see the 2 added Metal and Stone option set blocks.

<figure><img src="/files/1TeM1KJorArnHWgmyDOX" alt=""><figcaption><p>Metal and Stone 'Thumbnail' option sets</p></figcaption></figure>

In this case, we have 2 sets of Thumbnail options and the constraint effect will be in terms of which materials (color) will be visible and which will not. Since, I mentioned that my restriction will be on Stone depending on which Metal I select, I will need to click on the Stone option block and apply restrictions to the *amethyst* and *sapphire* variants or whatever variants you need to restrict depending on the configurator.

<figure><img src="/files/UPO9J8N32PbaDPTQCqy2" alt=""><figcaption><p>Apply restriction for 'amethyst' and 'sapphire' variants in relation with 'white' gold variant</p></figcaption></figure>

We click on the "chain" button on each of the variants to apply the restriction regarding "white" gold.

<figure><img src="/files/2mNsLi5okT34KPXeMHBh" alt=""><figcaption><p>Add restriction - version 1</p></figcaption></figure>

Or

<figure><img src="/files/gRq2dpPNbyd57P50JzYe" alt=""><figcaption><p>Add restriction - version 2</p></figcaption></figure>

**The above conditions are the same.** Once I have applied the restrictions for the 2 variants, I should have each of the "chain" icon buttons marked with an asterisk, as shown below.&#x20;

<figure><img src="/files/lt76KXYipRhlqjGq6ZxO" alt=""><figcaption><p>Variants with restriction applied</p></figcaption></figure>

To save the newly added restriction, we first click "Save" and then "Preview" for a quick test.

<figure><img src="/files/LA6FYkmJ4aWsrOwSV8d3" alt=""><figcaption><p>Effect of restriction</p></figcaption></figure>

If we select the "White" gold, there will only be 2 diamonds, White and Black. If we change the gold to yellow, we will have all 4 diamonds available.&#x20;

{% hint style="info" %}
The same logic can be applied to hiding 3D parts, just make sure to select only the 3D part in the variant, not the material.
{% endhint %}


# 'The variant value is between min and max' type of restriction

Constraints using ranges

The platform allows users to add constraints to a range using the "Numeral" option block. In other words, you can restrict the ability to show or hide options in the configurator, depending on the input number. For example, you can have 2 extra colors: red and yellow on a cabinet only between 100 cm and 200 cm wide.

Once you understand how to create these constraints using numerical variants, you can apply them in many situations.

Let's take the example below on a closet storage cabinet. I want to limit the **color** variants to a range in the numeric **Width** variant.

We have a basic 3D closet configurator with the following option blocks: Size and Material (Colors).

<figure><img src="/files/bjNwzwlqChXfLbfZdbYt" alt=""><figcaption><p>'Size' and 'Material' blocks</p></figcaption></figure>

We want to allow color selection only between a minimum and maximum range found in the **Size** numeric block. Since this restriction will impact the **Material** option block, we click on it and apply the constraint to the color variant.

<figure><img src="/files/NsyBfE9uAmp1BANuV7vK" alt=""><figcaption><p>Click the 'chain' icon to apply a constraint</p></figcaption></figure>

We take again the regular expression, except when it comes to selecting the type of restriction.

<figure><img src="/files/iK9yueXZwcERoSZ9C2Nz" alt=""><figcaption><p>Select the type of the restriction</p></figcaption></figure>

After selecting the constraint type, we select 'Size', i.e. the Numeral option set, and click on the "width" option to display the range.

<figure><img src="/files/8H13JSmyvlGtjyNvduhW" alt=""><figcaption><p>Select option set and variant(s)</p></figcaption></figure>

In "Has value between" we set the minimum and maximum range in which we want to show the "colors". In this example, we set the minimum to 200 and leave the maximum at 280 and click 'Save'.

<figure><img src="/files/v9xvBm9XaBRGjHu6wAih" alt=""><figcaption><p>Set the constraint within a range</p></figcaption></figure>

After clicking "Save", at this point, we have an "asterisk" displayed next to the chain icon, which means that this "colors" variant has an added restriction.

<figure><img src="/files/2zXqAnCIcKfYVRxwg8pA" alt=""><figcaption><p>Restriction added</p></figcaption></figure>

You must save the updated "Colors" options block before clicking "Preview" to see the effect.

<figure><img src="/files/zMsGSUgigKWZL6NmJ3rA" alt=""><figcaption><p>Click to preview the configurator</p></figcaption></figure>

Once you click on the "Preview" button, due to the added restriction, by default the colors will not be enabled (visible). Only if you change the width of the cabinet and go above 200 cm will the color option be enabled as shown below.

<figure><img src="/files/4VLsVrdmI1eFQIBnyfKY" alt=""><figcaption><p>Changing the width will enable the color option</p></figcaption></figure>

{% hint style="info" %}
**Notice that no color/texture is applied to the front doors, the texture is only applied after the "Colors" option set is displayed. You can modify this by using 2 or more restrictions in combination, depending on the type of configurator you have.**
{% endhint %}


# How to apply 'dummy' blocks for more advanced restrictions

Apply dummy blocks for conditional logic options

Any option block that supports conditional logic (restrictions) can also be hidden. In other words, when you add an option set such as a thumbnail, material, numeral, and so on, you can choose to hide it in the configurator’s front end and use it solely for internal logic.

This is especially useful in certain logic scenarios, particularly when working with more complex configurators.

#### Using the “Dummy” Block for Option Restrictions

When configuring relationships between options, it’s important to understand when a “dummy” block is required and when it isn’t.

***

**Direct Restrictions Between Options**

If your configurator includes both options you want to connect, you can create a restriction directly between them, **no dummy block is needed**.

**Example:**\
If your configurator includes both **Window Type** and **Handle Position**, you can create a direct restriction link between these two options.

***

**When to Use a “Dummy” Block**

If one of the options you want to restrict **does not exist** in the configurator, you can use a **“dummy” block** to act as a hidden placeholder.

**Example:**\
If your configurator includes only **Handle Position** and no **Window Type** option, you can create a **dummy block** to represent the missing second option. This hidden option allows the system to establish the restriction link.

As a result, when users select a **Handle Position**, the system can still apply the intended restriction logic or trigger the corresponding behavior, even though the second option is not visible in the interface.

***

**Summary**

* **If both options exist:** Use a **direct restriction link**.
* **If one option is 'missing' (no direct link between 2 option blocks):** Use a **dummy block** as a hidden second option to maintain configuration logic consistency.

#### Here’s an example of a restriction that uses a “dummy” block

Below is a configurator logic example where an option block is hidden and used as a 'dummy'.

First, create a configurator. In this example, I’ll name it *'Store Shelving'*, but you can adapt the tutorial to your own logic if it better fits your needs. In this example, I have a 3D store shelf with three shelves. I want to allow customers to select the number of shelves: 1, 2, 3 or none. Here’s how my configurator looks before adding any option blocks:

<figure><img src="/files/yzfpkrSb4O7Md1G7Vn62" alt=""><figcaption></figcaption></figure>

In the 'Create Options' tab, add your first option block. In this example, I’ll use a **dropdown** (but you can choose a different type). This **dropdown** will let users select the number of shelves.

<figure><img src="/files/5tZrTXkw56hgvfthjOvn" alt=""><figcaption></figcaption></figure>

Next, define each variant within the dropdown option block by adding 0, 1, 2, and 3 shelves.

<figure><img src="/files/vKNKKVvaXeTthMLayxge" alt=""><figcaption></figcaption></figure>

Define each variant without selecting a 3D model, 3D part, or material. Assign **only** a **title** and **variant name** to each variant.

<figure><img src="/files/x4frR3hye4djUD9J0p72" alt=""><figcaption></figcaption></figure>

Repeat this process to add variants for 1, 2, and 3 shelves.

<figure><img src="/files/FZld5YWAyXBAIySMH8Iy" alt=""><figcaption></figcaption></figure>

Now, click the 'Save' button at the lower-right corner of the screen, and then add your first selection block.

<figure><img src="/files/pNEA8irjL5aWabELPD3t" alt=""><figcaption></figcaption></figure>

Now, click 'Preview' to see the results.

<figure><img src="/files/WIvRvhO0TvS7KU60lg6j" alt=""><figcaption></figcaption></figure>

The dropdown shows 0 shelves by default and lets you choose 1, 2, or 3, but it won’t work until restrictions are applied.

In this situation, its best to add another dropdown which will be hidden, to be used as a 'dummy' block to create restriction.&#x20;

{% hint style="warning" %}
**In Simplio3D, hiding or showing 3D models or parts usually requires at least two option blocks linked by a restriction. In some cases, your configurator may only need one block, with the second serving only as a 'dummy'.**
{% endhint %}

I create another dropdown block called 'Dummy block'.

<figure><img src="/files/ZCoAVCUhcKnuRuhIYFHZ" alt=""><figcaption></figcaption></figure>

For this 'dummy' block, make sure the 'Hide Option' is set to 'Yes'. When adding variants, select the 3D parts that should be hidden. Refer to the general restriction diagram below to understand how each variant will be affected once the restriction is applied.

<figure><img src="/files/mCt9ZbeqfY9ZORe2rwIz" alt=""><figcaption></figcaption></figure>

I created the first variant titled '0' and selected the 3D model along with all three shelves found in '3D Parts', which will be hidden when '0' is selected. This rule will work after we add the restrictions.

<figure><img src="/files/iDr6ctZmMcVHq61EGqqq" alt=""><figcaption></figcaption></figure>

Click 'Save' to add the first variant.&#x20;

<figure><img src="/files/mCfqGT6tBmEsA08XhPyg" alt=""><figcaption></figcaption></figure>

Next, add another variant titled '1'. This variant will ensure that when the user selects 1, only one shelf is displayed. In 3D parts we leave the one shelf unselected and the other 2 shelfs selected. Again, this will only work on the front end after adding the restriction, but first we need to create the variant.

<figure><img src="/files/sWtn9I8j5TWBvLYB6gJc" alt=""><figcaption></figcaption></figure>

Click 'Save' to add the second variant.

<figure><img src="/files/bKJIBGF9YCPLfHrDyycV" alt=""><figcaption></figcaption></figure>

Click the 'Add Variant' button to create the next variant titled '2', which will display two shelves. Here, we select only one shelf in '3D Parts'.

<figure><img src="/files/DSU6q0EXDSeiyiI7FIJr" alt=""><figcaption></figcaption></figure>

Click 'Save' to add the new variant.

<figure><img src="/files/nb0Pu8JZWTZUiCwEc6TX" alt=""><figcaption></figcaption></figure>

Finally, add the last variant titled '3'. In this case, do not select any 3D parts, as all shelves will be visible once the restriction is applied.

<figure><img src="/files/bW2j35w5YbGe503uBxWG" alt=""><figcaption></figcaption></figure>

Click 'Save' button to add the last variant.

<figure><img src="/files/sZBtcw90pa1IiUlZ57YN" alt=""><figcaption></figcaption></figure>

You can either click 'Save' to save the option block first or directly click the 'chain' button on each variant to apply the restriction. The restriction will link to the previously created dropdown, matching corresponding values—for example, 1 shelf to 1 shelf. See below the restriction for '0' variant:

<figure><img src="/files/3NZVm9ypwseeSXUy6hb9" alt=""><figcaption></figcaption></figure>

Repeat this for all variants inside the 'Dummy' block with '1', '2' and '3' shelfs.

<figure><img src="/files/DQAs6S5fxGZzDEst0qFy" alt=""><figcaption></figcaption></figure>

After adding a restriction to each variant, click 'Save' to update the 'dummy' block. Click 'Preview' and see how it works.

<figure><img src="/files/FFs7oiHBHKsVpGDWeozG" alt=""><figcaption></figcaption></figure>


# Pricing

Set price for option variants

The platform allows configurator builders to set the price of options. For example, if we have a configurator that allows customers to choose the color, for each color you can set a specific price. As customers switch between colors, the price is updated in real time. This would be a basic example, but in the platform you can add more complex pricing, such as **price groups**, **price tables**, **variables**, and use them in a **pricing formula**.

<figure><img src="/files/tdWenOzh1KhIYW2vkNRk" alt=""><figcaption><p>Pricing tab</p></figcaption></figure>

There are 3 key sections in the Pricing tab, discussed in more detail separately in each chapter: **Pricing Formula**, **Variables** and **Add price**.

* [**Price Formula**](/learning-the-app/products/pricing/pricing-formula) - In the price formula we have a field that supports basic mathematical calculation, such as: addition, subtraction, multiplication, division, and the use of parentheses. The price formula field also supports *variables* that can be added anywhere in a price formula by clicking on them in the Variables section.
* [**Variables**](/learning-the-app/products/pricing/variables) - There are 5 types of variables inside the platform: <mark style="color:purple;">**@total\_pricing**</mark>, <mark style="color:red;">**@base\_price,**</mark>**&#x20;**<mark style="color:green;">**@price\_options**</mark><mark style="color:red;">**,**</mark>**&#x20;**<mark style="color:orange;">**@price\_table**</mark> and <mark style="color:blue;">**@price\_variable**</mark>. All these variables can be used inside the price formula.
* [**Add price**](/learning-the-app/products/pricing/add-price) - From this section you will price your options using different pricing variables. The logic in adding a price, tax or any other cost is similar to adding option sets or when creating a contact form.


# Pricing formula

Build complex pricing

The platform has a versatile way of pricing for configurators and one of its key features is the ability to enter a pricing formula that uses basic mathematical calculation and variables.

<figure><img src="/files/cQQUgUO9XQIToiLi3jQu" alt=""><figcaption><p>Pricing Formula</p></figcaption></figure>

### Examples

1. **Teacup Configurator**

Let's say we have a Teacup configurator coming in 4 colors: White, Gray, Red and Blue. Each color will come with a different price.

In this situation we can start with a basic price, let's say for the White one the <mark style="color:red;">**@base\_price**</mark> is 20$.

Base Price = 20$.

Price the options by using <mark style="color:green;">**@price\_options**</mark> variable. For each variant we have a price.

&#x20; White = 0$

&#x20; Gray = 2$

&#x20; Red = 4$

&#x20; Blue = 6$

All of the above can go in the <mark style="color:purple;">**@total\_price**</mark> built in variable **by default**.

For a red teacup the **Total is $24** (base price 20 + red color 4). We don’t have Variables here and the formula is basic.

2. **Table Configurator**

This time we have a table coming in 2 colors and able to change size **Width** and **Depth**.

<mark style="color:red;">**@base\_price**</mark> = 120$

But this time, I want to create a more complex price formula therefore, I will use variables here for both colors and size.

**Add Variables**

<mark style="color:blue;">**@colors**</mark> (@*price\_variable*) - ‘from options’ variable type

White - $40

Green - $48

<mark style="color:blue;">**@size**</mark> - (*@price\_variable*) ‘for options’ variable type

Width - $2 (size\_number\*$2) i.e. 200cm x $2

Length - $2 (size\_number\*$2) i.e. 160cm x $2

<mark style="color:blue;">**@sales\_tax**</mark> - (*@price\_variable*) ‘custom’ type of variable

Price - 0.01 (10%)

Now, I build my price formula from variables. First, I remove the default variable <mark style="color:purple;">**@total\_price**</mark>.

I add:

(<mark style="color:red;">**@basic\_price**</mark> + <mark style="color:green;">**@colors**</mark> +<mark style="color:blue;">**@size**</mark>) + ((@<mark style="color:red;">**basic\_price**</mark> + <mark style="color:green;">**@colors**</mark> +<mark style="color:blue;">**@size**</mark>)\*<mark style="color:blue;">**@sales\_tax**</mark>)

Based on the above formula, the configurator will calculate the total price.

<figure><img src="/files/IRpWEm5gXMnTf5IOYO1R" alt=""><figcaption><p>Typical example of a pricing formula using variables</p></figcaption></figure>

<br>


# Variables

Price variables to calculate total cost

Variables are used to set the price for options, to add taxes, shipping, labor, discounts, or other costs that would help accurately calculate the **total price**. All of these variables can go into the built-in <mark style="color:purple;">**@total\_cost**</mark> variable that is added by default or can be used in the price formula. To add a variable to the price formula, click the block.

**There are 5 types of variables:**

<mark style="color:purple;">**@total\_cost**</mark> - Total cost is a built-in variable added to the price formula field by default, but depending on how you want to build the formula, it can be removed. Total cost is calculated from all variables added in the *Variable* section except the <mark style="color:blue;">**@price\_variable**</mark>. There are no settings for this type of variable.

<mark style="color:red;">**@base\_price**</mark> - This variable allows you to set a base price for your customizable item. This variable is added by default and cannot be deleted. **If there is no base price, simply leave the field blank or enter 0.**

<mark style="color:green;">**@price\_options**</mark> - Price your options, price your variants. This variable allows users to set the price of each option set and its variants, regardless of type. You can set the price for each color, checkboxes, uploads, text, etc. In a *price\_options* variable, you can set the price for each color (except when using Material block set), this will be called a *price group*, in other words when each variant in the option set has a price.

<mark style="color:orange;">**@price\_table**</mark> - Pricing tables, as the variable name suggests, create tables between 2 option sets. For example, the platform allows you to set the price between 2 option sets: *Width* and *Height*, but you can use almost any type of option set with more than one variant.

<mark style="color:blue;">**@price\_variable**</mark> - Price variables are a different way to price option variants, and the difference from other types of variables is that this allows you to create individual variables for taxes, shipping, labor and have them in the price formula. These variables work only when added in the pricing formula, and don't fall in the built in <mark style="color:purple;">**@total\_cost**</mark>. You can also add a Numeral price, entering a unit price that will be multiplied by the Numeral parameter that is selected. **Also, most of the time using&#x20;*****price variables*****&#x20;will be the fastest way to set the price of the configurator.**


# Add price

Example of pricing for a configurator

We will set the price of the configurator using the available variables detailed in the previous [chapter](/learning-the-app/products/pricing/variables). In this example, we will use a basic table configurator with size and color parameters.

<figure><img src="/files/PUAQPRc4LvIGzM1G5tTf" alt=""><figcaption><p>table configurator</p></figcaption></figure>

We will first add a base price, an amount from which the total price will be calculated. For this, we will use the <mark style="color:red;">**@base\_price**</mark> variable which is added by default and cannot be removed. The base price can be zero or any other positive number. In this example, my price for the table will start from $300.

<figure><img src="/files/z84EbcqgMubRGbvTIKQL" alt=""><figcaption><p>Click 'Base Price' variable to add your start price</p></figcaption></figure>

Type "300" in the "Base Price" field and click "Save" on the bottom right screen.

<figure><img src="/files/JqHXtojxbbTDdSfA00RE" alt=""><figcaption><p>Add base price</p></figcaption></figure>

After we've added the base price, we can click the "Preview" button to see that the total price is $300.

<figure><img src="/files/S0ApZ5QRoTqpmm2TCtFA" alt=""><figcaption><p>Preview mode</p></figcaption></figure>

Each color has an additional price, so I need to add another variable to help me calculate the additional price on top of the base price we already have. We can do this with both <mark style="color:green;">**@price\_options**</mark> and <mark style="color:blue;">**@price\_variable**</mark>. In this example, we will use <mark style="color:green;">**@price\_options**</mark>.

<figure><img src="/files/iykaepXn1004Agkdz4cg" alt=""><figcaption><p>Add a variable to price the colors</p></figcaption></figure>

Select **"Price Options"** and click "Add Price" to define the variable. Enter the name of the price variable and click the blue "Add Price" button located in the bottom screen and set the price of the first option variant.

<figure><img src="/files/y19Aqip5poJpT58bdb2K" alt=""><figcaption><p>Define Price Options</p></figcaption></figure>

When setting the price of a variant in a price group, such as the <mark style="color:green;">**@price\_options**</mark> variable, the logic is almost the same as when [creating restrictions](/learning-the-app/products/create-options/restrictions) explained in a previous chapter. Enter the name and price ($50) and click the light blue "Add" button to add the price rule. The price rule will follow a basic expression:

“The price is added only when all the following rules are true: **\[Type of option]** **\[Has one or more options selected]**”

Select type of option, in this case we select the 'Wood' material option set (wood colors) and check 'wood' as option variant selected. **For each color selected, $50 will be added to the base price.**

<figure><img src="/files/jupjOPvjBB0zDbvKBtOW" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**In the example above, we used an option set of type "Material" and it doesn't show multiple variants to choose from. If you want to apply different prices to different colors, you will need to use a different option set type, such as thumbnails, dropdown, etc.**
{% endhint %}

Once we click "Save", we add the first price to the price group.

<figure><img src="/files/clrVzeCGRJ98IzseEBvs" alt=""><figcaption><p>First price to the price group</p></figcaption></figure>

Click ‘Save’ again to create the price group.

<figure><img src="/files/uJQFq737fbHSxuFOgTjQ" alt=""><figcaption><p>Price group added</p></figcaption></figure>

By clicking "Preview", we will now see the total of **$350** ($300 base price + $50 wood color). The total price is calculated in the built-in variable <mark style="color:purple;">**@total\_price**</mark> added by default to the **Price Formula** field.

Let's price the table based on size, and for this we need to add another price variable to the total price calculation. For this, we will add a <mark style="color:blue;">**@price\_variable**</mark>. Please note that this type of variable is not taken in the <mark style="color:purple;">**@total\_price**</mark>, therefore we need to use the price formula.

<figure><img src="/files/jtmiO6VDIsq2CeG20rj5" alt=""><figcaption><p>Add price variable</p></figcaption></figure>

Select 'Price Variable' from the dropdown and click 'Add price' to define it. Enter the name and select the variable type "**for options**." Select the "Size" numeral option set from the drop-down menu below to load all three dimension parameters: *Width*, *Length*, and *Height*. If you want to price the table by **width**, just type the cost per centimeter, in this case we have $12.

<figure><img src="/files/mHhQA2BIjXAtwr48xecD" alt=""><figcaption><p>Price by size with 'Price Variable'</p></figcaption></figure>

Click "Save" and add the new variable in the price block list.

<mark style="color:red;">**NOTE:**</mark> When pricing numerical variables (e.g. size, quantity, etc.), make sure to select the 3D model and parts in the numerical option variants, even if it will not affect the 3D model (for example, in case of quantity).

<figure><img src="/files/yNQifwwnzrQfZOVraUnE" alt=""><figcaption><p>Price by size variable added</p></figcaption></figure>

Note that you can remove <mark style="color:purple;">**@total\_pricing**</mark> from the pricing formula and use the variables you created.

<figure><img src="/files/OEjkS8nMAo5tWiiLnV7L" alt=""><figcaption><p>Pricing without @total_pricing built-in variable</p></figcaption></figure>

Click "Preview" and see if total price shows the exact price of the table. It should calculate the following: $300 (base price) + $50 (wood color) + ($12 \* 138cm) = $350 + $1656 = **$2006.00**. If you change the width of the table, the price will update in real-time.

<figure><img src="/files/8H8nEHQwIFuLaUYpriJv" alt=""><figcaption><p>Total price of the table</p></figcaption></figure>

Using the price formula unlocks more complex pricing systems, which may be necessary for complex product configurators. Below, I'll give a simpler example of how you can use the price formula field and <mark style="color:blue;">**@price\_variable**</mark> to add a sales tax in the configurator.

Select "Price Variable" from the drop-down menu and click "Add Price" to define the sales tax variable.

<figure><img src="/files/p4KE9Z8Nte24ZLrSIEAS" alt=""><figcaption><p>Add a price variable for sales tax</p></figcaption></figure>

Enter the name, keep the variable type "custom" and apply the percentage, in this case 0.12 (12%).

<figure><img src="/files/hIIBzAQCp4Nwiv574Lxu" alt=""><figcaption><p>Sales tax variable</p></figcaption></figure>

Click 'Save' to add the new variable and starting making your price formula so the configurator would calculate the sales tax, here's an example below:

<figure><img src="/files/ysHt7hMnwilkEVBE5qzw" alt=""><figcaption><p>Price formula example with sales tax</p></figcaption></figure>


# Add form

Adding a contact form to a product configurator

For each configurator the platform allows you to add a contact form to collect data from customers and allows them to submit their design for a quote request. Having a contact form is optional and in some cases, such as when integrating the configurator with an e-commerce platform like Shopify, WooCommerce or BigCommerce, there is no need for a contact form other than the "Submit" button, which will turn into an "Add to Cart" button to redirect the order to the e-commerce checkout protocol.

The logic behind creating a contact form is similar to the logic found in [creating option sets](/learning-the-app/products/create-options) already discussed in previous chapters. It uses block logic, each block shares an attribute like (name, phone, email address, text, etc.). You can add as many blocks as you want to the contact form depending on what kind of information you want to collect from the client using the configurator. &#x20;

<figure><img src="/files/jwP4m4SrRadcmptYaYDE" alt=""><figcaption><p>Contact form blocks</p></figcaption></figure>

Users can select from the drop-down menu in the top right, where they can select the field type and then click “Add Field” to add the block to the contact form block list.

Please find below the field blocks available in standard subscriptions:

* **Name** - The "Name" field allows customers to fill in their name. For example, you can add 2 blocks, one for "First Name" and another one for "Last Name".
* **Text** - The "Text" field is used for any type of field where customers need to enter their *physical address, comments, message*, or anything else that may be required before submission. It can be added multiple times with different roles to collect more information, for example one text field for 'physical address' and another one for 'comments'.
* **Email** - field for entering an email address.
* **Telephone** - field for entering phone number. It can be added multiple times with different roles to collect more information, for example one field for 'Office Number' and another one for 'Mobile Phone'.
* **Dropdown** - the drop-down form block is good for allowing users to select the country, city, or answer generic questions to gather more data about the customer's requirements.
* **Acceptance** - This block generates a checkbox with a popup text document and customers can submit their configuration only after agreeing to terms like GDPR, DSA or any other privacy act.
* **Submit** - Add and name the Submit button. If your configurator is integrated with an e-commerce platform, you can simply add the Submit button and name it "Add to Cart."
* **Header Title** - Write a custom header for your contact form, the default is "Submit Your Information".
* **Confirmation** - Users can customize the confirmation message when customers submit.

Please find below, how to:

[Add Field](/learning-the-app/products/add-form/add-field) - Add a field and create a contact form for the configurator.

[Email Settings](/learning-the-app/products/add-form/email-settings) - Trigger emails by applying SMTP settings

### Create a Contact Form Video Tutorial

{% embed url="<https://youtu.be/qVJTpd4SENI?si=Pz_WBJxU85ZpNSYO&t=587>" %}


# Add Field

How to create a contact form

Before you start adding fields and customizing your contact form, you must first enable the contact form in your configurator.

<figure><img src="/files/avu4Zc6NWoOQ2E1bcXZU" alt=""><figcaption><p>Enable contact form</p></figcaption></figure>

The Enable Form drop-down menu is located at the top left of the screen and select "Yes" to enable the form.

Let's add the first field, usually the first time we ask for the name and in this case I will create the 'First Name' field using the **Name** field block.

<figure><img src="/files/s9zmJ8BMr3hALMOXMOy3" alt=""><figcaption><p>Select 'Name' block to a name field</p></figcaption></figure>

Click the drop-down menu in the top right and select **Name** block, then click the blue "Add field" button next to the drop-down menu to add the name field.

<figure><img src="/files/8FtapXzSHiQ3tdcroXky" alt=""><figcaption><p>Define your field block</p></figcaption></figure>

Enter your title, in this case I'll name it "First Name" and make this field required (*otherwise users can't submit a configuration*) from the Mandatory Field drop-down menu. Click 'Save' and create your first contact field.

<figure><img src="/files/1oWK7iiVRX1ystC0cSK9" alt=""><figcaption><p>Contact form block</p></figcaption></figure>

You can repeat this process with the “Last Name” field, the same process is found for the “Email”, “Phone” and “Message” field blocks. Your contact form could look like the one below:

<figure><img src="/files/eOcqtxMqDclyzjLSiiUu" alt=""><figcaption><p>Contact form</p></figcaption></figure>

Like any other contact form, we need to add a consent checkbox, and you can do this by adding an "Acceptance" block located in the same drop-down menu on the top right.

<figure><img src="/files/8dLuy6NGRdWxHkfFHfBy" alt=""><figcaption><p>Add 'Acceptance' block</p></figcaption></figure>

Select the "Acceptance" block and then click the blue "Add field" button next to the drop-down button. Once you click "Add field" before creating the block, you need to define it.

<figure><img src="/files/luF4v7zcFW091Mzg9WN4" alt=""><figcaption><p>Define 'Acceptance' form block</p></figcaption></figure>

You will need to enter the consent title as shown in the image above. In the description field enter the terms/conditions of the consent, for example GDPR/DSA policy. You will also need to select “Required” from the Mandatory Field drop-down, which means users will have to consent before submitting. Click “Save” to add the form block.

<figure><img src="/files/24W6rZ8QJAi8nnyPqdaA" alt=""><figcaption><p>'Acceptance' form block</p></figcaption></figure>

Finally, we need to add the “Submit” button. Go back to the drop-down menu and select the “Submit” form block.&#x20;

{% hint style="warning" %}
**The "Submit" button can only be added once.**
{% endhint %}

<figure><img src="/files/a8kzWwF76AZAo9hK4paQ" alt=""><figcaption><p>Define 'Submit' form block</p></figcaption></figure>

For the "Submit" form block, you just need to type the name of the button, in this case we typed: Request a quote. If you plan to integrate the configurator with an e-commerce platform, you will most likely need to type "Add to Cart" or something similar that suggests that once submitted, it will add the configured item to the cart. More information about e-commerce integration in another [chapter here](/integrations/woocommerce).

Click "Save" and add the button to your contact form.

<figure><img src="/files/DUJVOIk9WYPyalDmVSv8" alt=""><figcaption><p>Contact form</p></figcaption></figure>

Now, let's click the "Preview" button to see what our contact form looks like.

<figure><img src="/files/Oghd4fF4ky8fQaMzOlEq" alt=""><figcaption><p>Contact form in 'Preview' mode</p></figcaption></figure>

You can add another type of form block to customize the header title of your contact form. From the default title: "Submit Your Information", you can enter any other title in any language using the Header Title form block. The **Header Title** form block is added like the other form blocks.

The platform allows you to trigger emails once your customers submit a configuration. To do this, you need to go into the email settings and authenticate with your email details, the detailed steps will be discussed in the [next chapter](/learning-the-app/products/add-form/email-settings).


# Email Settings

Trigger emails once a configurator is submitted

Having a configurator contact form allows you to not only submit and store data in the [Orders](/learning-the-app/orders) section, and be able to send data via API, but also trigger an email once the form has been completed and submitted. In other words, each submission triggers an email with all the order information: *customer information, configuration summary*, and *price*.

By default, the configurator will not trigger emails, however, you can add your own email settings and send from your custom domain email address.

<figure><img src="/files/tgGB4IvNStly6mLbY9yn" alt=""><figcaption><p>Click the 'Email Settings' button to open the popup window and set the email service</p></figcaption></figure>

You can use the standard cPanel SMTP email settings found at most hosting providers, or Gmail, Sendgrid, Amazon SES, Mailgun, etc.

<figure><img src="/files/CkMeUIdC5OXCY3MeinWU" alt=""><figcaption><p>Email settings popup</p></figcaption></figure>

To successfully set up your custom email address, you need the following settings:

* **Mail Driver** - Here you select the email service you want to use. SMTP is the standard setting found with most hosting providers, including if you use Gmail.
* **SMTP Host** - here we usually enter the domain of the email address we will use. (i.e. *mycompany.com*). For Gmail you need to use: *smtp.gmail.com*. For Sendgrid the mail host is: *smtp.sendgrid.net*.
* **SMTP Port** - we need the SMTP outgoing port number that will allow the app to send emails. This depends on the encryption type. For example for Gmail we have: Port: 587 (for TLS) or 465 (for SSL)
* **Encryption** - select the encryption type: SSL, TLS, or None. The most commonly used is TLS. For Gmail we match the port with the encryption type: `TLS` (for 587) or `SSL` (for 465)
* **SMTP Username** - we usually enter the entire email address. (i.e. *<contact@mycompany.com>*). For Sendgrid we type 'apikey'.
* **SMTP Password** - for the standard SMTP service we enter the password with which we access the email inbox except for Gmail and Sendgrid.

**Gmail Passwords** - for Gmail service, personal account password does not work. Therefore, in Gmail (Workspace) you need to generate an Application Password for it to work.

How to generate App Password with Google: <https://support.google.com/accounts/answer/185833>

**Sendgrid Passwords** - if you are using Sendgrid to trigger emails from your configurators, then the password is the API key generated in the Sendgrid account.

How to generate a Sengrid API key: <https://sendgrid.com/en-us/blog/introducing-api-key-permissions>

* **From Address** - enter the email address you want to send from.
* **From Name** - enter the company name attached to the email address.
* **Reply-to Address** - enter the email address that you want customers to use when they reply.
* **Test Email** - enter an email address to take a test.
* **Enable DKIM** - it is mandatory to confirm that you have DKIM authentication to have a successful email test.

If you are not familiar with DKIM email authentication, please learn more at this link: <https://www.valimail.com/blog/dmarc-dkim-spf-explained/>

**Please find below the standard email settings for:**

[Gmail](/learning-the-app/products/add-form/email-settings/gmail)

[Sendgrid](/learning-the-app/products/add-form/email-settings/sendgrid)


# Gmail

Gmail settings

SMTP Host: [`smtp.gmail.com`](http://smtp.gmail.com/)\
Port: `587` (for TLS) or `465` (for SSL)\
Encryption: Match the port with `TLS` (for 587) or `SSL` (for 465)\
Username: <mark style="color:red;">\[Full email address]</mark>\
Password: <mark style="color:red;">\[The App Password generated]\*</mark>

**NOTE:** If your email settings are from Gmail then your normal password will not work. You will need to generate an app password. Please find more details here on how to generate an App Password:  <https://support.google.com/mail/answer/185833?hl=en>


# Sendgrid

Sendgrid email settings

MAIL\_MAILER=smtp\
MAIL\_HOST=[smtp.sendgrid.net](http://smtp.sendgrid.net/)\
MAIL\_PORT=587\
MAIL\_USERNAME=apikey\
MAIL\_PASSWORD=<mark style="color:red;">\[secret key]</mark>\
MAIL\_ENCRYPTION=tls\
MAIL\_FROM\_ADDRESS=<mark style="color:red;">\[email address]</mark>\
MAIL\_FROM\_NAME=<mark style="color:red;">\[name]</mark>


# Share

Embedding configurators

Each configurator built into the platform generates a **unique source link (src)** from where anyone can access the configurator, in other words from the unique source link anyone can see what you see in the 'Preview' mode. The **source link** is a long, secure URL and can be used to embed the configurator into a website.

<figure><img src="/files/qelBkhwddYrzMWzgJ9ko" alt=""><figcaption><p>Where we find the configurator's source link (src)</p></figcaption></figure>

**The easiest way to embed the configurator wherever you want is to use HTML code with the source link (src) in it:**

```
<iframe src="[src link]" 
  style="border: none; margin: 0; width: 100%; height: 900px" 
  id="3d-configurator-iframe" 
  scrolling="no" 
  frameborder="1" 
  allowfullscreen > 
</iframe>
```

In addition to using the HTML iFrame code, you can also use JavaScript alongside it to better define your embedding with more settings.

Example:

```
<script>  
  const iframe = document.getElementById("3d-configurator-iframe"); 
  const widthIframe = 1200; 
  const heightIframe = 800; 
  const paddingWidth = 0;  
  const paddingHeight = 0; 
  let iframeOrigin = ""; 
  let mobileWidth = 0; 
  let full = false; 
  iframe.style.width = `${widthIframe}px`; 
  iframe.style.height = `${heightIframe}px`; 
  const handleResize = () => { 
   if (!full) { 
     if (iframe.parentNode.clientWidth - paddingWidth <= widthIframe) { 
       iframe.style.width = `${iframe.parentNode.clientWidth - paddingWidth}px`; 
     } else { 
       iframe.style.width = `${widthIframe}px`; 
     } 
   if (iframe.parentNode.clientHeight - paddingHeight <= heightIframe) { 
     iframe.style.height = `${iframe.parentNode.clientHeight - paddingHeight}px`; 
   } else { 
     if (iframe.parentNode.clientWidth - paddingWidth <= mobileWidth) iframe.style.height = `${heightIframe}px`; 
   } 
    } 
   if (iframeOrigin) { 
     iframe.contentWindow.postMessage( 
      { 
       type: "DIMENSIONS", 
       windowW: iframe.parentNode.clientWidth - paddingWidth, 
       windowH: iframe.parentNode.clientHeight - paddingHeight, 
       iframeW: iframe.clientWidth, 
       iframeH: iframe.clientHeight, 
      }, 
      iframeOrigin 
    ); 
   }; 
  }; 
  window.addEventListener("resize", handleResize); 
  handleResize(); 
  window.addEventListener("message", (event) => { 
   if (event.data?.type === "GET_DIMENSIONS") { 
    mobileWidth = event.data?.mobileWidth; 
    iframeOrigin = event.origin; 
    handleResize(); 
   } 
   if (event.data?.type === "FULLPAGE") { 
    if (event.data?.value === true) { 
     full = true; 
     iframe.style.width = "100%"; 
     iframe.style.height = "100%"; 
     iframe.style.position = "fixed"; 
     iframe.style.top = "0"; 
     iframe.style.left = "0"; 
    } else { 
     full = false; 
     iframe.style.width = `${widthIframe}px`; 
     iframe.style.height = `${heightIframe}px`; 
     iframe.style.position = ""; 
    } 
   } 
  }); 
</script>
```

**Sidebar Checkboxes**

Users can enable or disable sidebar buttons by selecting the available checkboxes:

* **Dark theme** - Users can switch the frontend UI into dark mode
* **Show dimensions** - Allow option to show dimensions when *Numeral* blocks are used. More information about how to properly set 'Show dimensions' here: [Numeral](/learning-the-app/products/create-options/numeral).
* **Enable sidebar** - Users can turn off/on the entire sidebar
* **Enable AR** - Allow configurator users to generate QR for Augmented Reality

### Video About Embedding Configurators

{% embed url="<https://youtu.be/qVJTpd4SENI?si=ARGxwkX1gaJYSH1n&t=729>" %}


# Product Viewer

Showcase your products with dynamic real-time 3D visualization

On all subscription plans, the platform allows users to generate 3D visualizations without including a configurator. The viewer is for presentation purposes only and can be embedded anywhere that supports HTML code. You can embed a 3D viewer in a web page or slider, in a powerpoint presentation or using the API in a third party application.

A 3D viewer is created in the **Products** section by clicking the blue "Add Product" button located in the top right of the screen.&#x20;

<figure><img src="/files/EV0yyP66AwdOz7EVDe0I" alt=""><figcaption><p>Click 'Add Product' button to create a 3D viewer</p></figcaption></figure>

This time, after clicking "Add Product", we no longer keep the "Configurator" product type selected, but switch to the "Viewer" product type, as shown in the screenshot below.

<figure><img src="/files/QLdzGHSPLrLsMBy07Mxu" alt=""><figcaption><p>Select 'Viewer' type of product</p></figcaption></figure>

Once we clicked "Save", we created the 3d viewer and we can edit it as we need. All views are defined in 4 steps: selecting the layout, adding a 3D model, applying materials to the 3D model and the share section where we copy the HTML code or source link.

<figure><img src="/files/fylGGP5BzjEARihUZsP1" alt=""><figcaption><p>Select Layout</p></figcaption></figure>

**Select Layout** - here we select the position of the toolbar and the viewport.

<figure><img src="/files/NS1NIcZrn7wa2K1kUl3M" alt=""><figcaption><p>Add 3D Models</p></figcaption></figure>

**Add 3D Models** - select the 3D model to be used in the viewer.

<figure><img src="/files/1hwTLbpppXbGcG5Tr56j" alt=""><figcaption><p>Apply materials</p></figcaption></figure>

**Create Options** - here we can use the "Default" block to apply materials to a 3D model just like when we apply materials for [configurators](/learning-the-app/products/create-options/default). If your 3D model already has materials applied, you can leave this step blank.

<figure><img src="/files/uXljF50XTApO7sCsk08u" alt=""><figcaption><p>Share</p></figcaption></figure>

**Share** - each viewer generates a unique HTML code that you can copy/paste anywhere you want on a web page.

In the Share tab, you can also enable/disable the following in the 3D viewer: **dark theme**, **sidebar**, and **AR mode**.

<figure><img src="/files/OgSrkGEBg3taOe1QQvsG" alt=""><figcaption><p>3D Viewer Mode</p></figcaption></figure>


# Materials

Add and manage materials for 3D assets

**Introduction**

Materials are important because they allow users to simulate different materials on the surfaces of 3D assets. For example, for a piece of furniture such as a table, users can apply a specific material such as wood. To be able to create that wood feeling material or other specific materials such as metal, fabric, stone, etc., the platform allows users to create from several parameters when creating a [New Material](/learning-the-app/materials/new-materials).

The Materials section is divided into 2 subsections: **Materials** and **Textures**. All materials and textures can be organized into categories, just like 3D assets.&#x20;

{% hint style="warning" %}
**Organizing by categories makes it much easier to manage the process of building your product configurator or 3D product viewer.**
{% endhint %}

<figure><img src="/files/Z2NL2fIN3XEo4XAAF3Wp" alt=""><figcaption><p>Simplio3D - Material Listing - Grid View</p></figcaption></figure>

###


# New Materials

Create and edit materials for 3D assets

The platform allows users to create a wide range of materials such as: wood, stone, metal, plastic, rubber, glossy surfaces, etc. When creating the material, you must **Name** it, assign a **Category** and a **Status**. Assigning a category will help better manage materials when building the configurator, and having a status will help better keep track of what's draft and what's ready to go.

When creating a **New Material**, there are a few parameters that help define the 'feel' of the material.

<figure><img src="/files/pd99YBmTKhioQkDY3XOz" alt=""><figcaption><p>Creating a material</p></figcaption></figure>

**TYPE:** *Flat, Fabric, Metal and Glossy*.

&#x20;         **Flat** - it is a type of material suitable for wood, plastic or various composite materials that would not normally reflect or shine.

&#x20;           **Fabric** - simulates textiles, this is a specially built shader for clothing and works great with fabric textures.

&#x20;           **Metal** - it simulates metal-like surfaces and we recommend using it in combination with metal textures to reproduce the required material as accurately as possible.

&#x20;           **Glossy** - if you need shiny materials, chrome or glass this is the type of material to use.

&#x20;           **Inherit** - the option allows a material to automatically use the **normal map** already applied to the 3D model. **When selected, the material will not require a separate normal map, but instead inherits the existing normal map information from the 3d model.**

{% hint style="info" %}
This is useful for maintaining **consistent surface details** across multiple materials or when you want to **reuse the same normals** without duplicating textures. It simplifies material setup and helps keep performance optimized.
{% endhint %}

**SURFACE:** *Texture and Color*.

&#x20;            **Textures** - Allows the use of textures in the material. Users can select a texture by filtering by category.

&#x20;            **Colors** - Allows the use of colors in the material by using the standard HEX color picker.

**BUMP:** Yes or No.

&#x20;             **Yes** - selecting Yes will simulate wrinkles on the surface of an object. It should be used, for example, for wood, stone materials where there is usually a bumpy surface.

&#x20;             **No** - selecting No will disable this material effect.

**SPECULAR:**  Users can set the intensity of specular highlights making the surface brighter or darker.&#x20;

**REFLECTION:** Users can set the level of reflection, suitable for chrome, glossy and metallic materials.

**OPACITY:**  Adding material transparency will allow simulation of glass-based materials or other related transparent materials required by changing its percentage.

**3D Preview**     &#x20;

While creating the material, you can preview in real-time 3D to get an idea of how it will look on the final surface of the object. The 3D preview allows you to make small corrections until the material looks right. You can switch between "Plane", "Cube" and "Sphere" to test the material on different surface types.

### Material Editor - Video Tutorial

{% embed url="<https://youtu.be/qVJTpd4SENI?si=9P_1w1nLZh1d9geC&t=145>" %}


# Textures

Uploading and managing textures

Users can select one or more texture files to upload into the system. By default, these textures take the filename as the default title. Users must take each texture image, edit the title (if needed) and assign a category to use in [materials](/learning-the-app/materials).

<figure><img src="/files/GixfX0gwceYAWJMeKt2k" alt=""><figcaption><p>Managing Textures - Grid View</p></figcaption></figure>

### Textures - Video Tutorial

{% embed url="<https://youtu.be/qVJTpd4SENI?si=Uigmpgo4-_C6TYCq&t=93>" %}


# SVG

Upload and manage SVGs

#### Uploading SVG Files in Materials

Simplio3D supports the use of **SVG files** for materials, allowing you to apply **vector graphics** as textures or decals on your 3D models. SVGs are ideal for **logos, patterns, or illustrations** that need to scale without losing quality.

{% hint style="info" %}
**In Simplio3D SVGs are commonly used in configurators with Patterns and Canvas option sets, but they can also serve as textures for plain materials.**
{% endhint %}

**How to upload an SVG:**

1. Go to the **Materials** section.
2. Click the **SVG** subsection.
3. Click **Upload** and choose your file.

**Best Practices:**

* Use **clean, optimized SVGs** to avoid performance issues.
* Avoid extremely complex SVGs with too many nodes.
* Combine SVGs with other material properties (color, normal maps) for enhanced visual effects.

By using SVG files, you can ensure your materials remain **sharp and scalable** across all device resolutions.


# Categories

Manage materials and textures with categories

Having a lot of materials and textures might require proper management, the platform makes it easy by using categories for both [Materials](/learning-the-app/materials) and [Textures](/learning-the-app/materials/textures). This will allow users to store different material collections, texture galleries and more and easily use them when building configurators or product views.

The Categories page is divided into 2 main tabs: [Materials](/learning-the-app/materials/new-materials) and [Textures](/learning-the-app/materials/textures).

For example, you can organize your materials or textures by type by having the following categories: metal, wood, fabric, plastic, painted, glass, etc. or using categories to organize them into catalogs, for example: 'Tea cup cottage colors', 'Vintage colors', 'Traditional', 'Cottage style', etc. At the end is up to the user how it's more easy to organize both the **Materials** and **Textures**.

<figure><img src="/files/Fhz7Pgr6Ej6XNYlAOlSX" alt=""><figcaption><p>Listing material &#x26; texture categories</p></figcaption></figure>

### Material Categories - Video Tutorial

{% embed url="<https://youtu.be/qVJTpd4SENI?si=c0a4zafgB02ii1Yx&t=55>" %}


# Texture & Normal Map Limits

Texture and Normal Map Resolution Recommendations

First, before applying any texture to a 3D model (or a specific 3D part), it is mandatory to create and apply a UV map before uploading the file to Simplio3D. If the 3D model does not have a UV map, the texture will not be applied, and the configurator will display only a plain color. You can get more information about this process in [Prepare 3D models](/getting-started/prepare-3d-models) chapter.

To ensure an optimal balance between **visual quality** and **application performance**, we recommend that all **textures and normal maps** used in Simplio3D projects should not exceed a resolution of **1024 × 1024 pixels**.

Using higher resolutions (2048, 4096, or more) can significantly impact performance, especially on devices with limited graphics processing power, such as mobile phones or older computers. Large texture sizes increase loading times, memory usage, and rendering overhead, which may result in reduced frame rates or lag during the configuration experience.

**Best practice:**

* Keep textures and normal maps at or below **1024 × 1024**.
* Compress and optimize textures before uploading.
* Use lower resolutions when possible for less detailed surfaces.
* Reserve higher resolutions only if absolutely necessary for critical details.

By following these guidelines, you will maintain both **fast performance** and **a smooth user experience** across all devices.


# 3D Assets

Managing 3d assets inside the platform

**Introduction**

Simplio3D provides an efficient way to manage 3d assets inside the platform, allowing users to **upload**, **assign status** and **save** them in categories. This is very useful when you build many product configurators and product views and want to easily manage each 3d asset to which product goes.

<figure><img src="/files/MathcJY9nPHepUqQiizF" alt=""><figcaption><p>3D Asset Manager</p></figcaption></figure>

**Upload 3D files**

The platform supports 3 formats: **GLB**, **glTF** and **OBJ**. These are the most widely used 3D data formats for the web, suitable for web applications, virtual reality and augmented reality applications. Users can upload one or a group of files at a time.

Uploading and having the 3D asset ready is important before creating the product configurator in [**Products**](/learning-the-app/products). If you are new to 3D modeling or don't know how to source your 3D files, please see the [**Preparing 3D models**](/getting-started/prepare-3d-models) section.

{% hint style="info" %}
**To learn how to edit 3D models for proper scaling using numeral blocks (great for tables, cabinets, closets, windows, doors, shelves, roofs and sheds), read this section:** [Modeling and editing 3D meshes to support numeral blocks.](/learning-the-app/products/create-options/numeral/modeling-and-editing-3d-meshes-to-support-numeral-blocks)
{% endhint %}

{% hint style="warning" %}
**Simplio3D does not support groups, so you should avoid using them, especially if your configurator includes numeric options such as width, length, or height. More information** [**here**](/getting-started/prepare-3d-models/numeral-keep-the-proportions)**.**
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=4I88cOfv5-w>" %}


# Edit 3D Assets

Rename, assign category, change status and orientation

After you select the 3D file from the local source and click the **Upload** button, the platform will create an asset for you with the status "**Draft**" and take the file name as the asset name by default. You can further edit the newly uploaded 3d asset by changing the **name**, assigning a **category**, changing the **orientation** and **status**.

<figure><img src="/files/YBWRmgP8mg0DEzeBxbWX" alt=""><figcaption><p>Edit 3D Model - Asset</p></figcaption></figure>

**Parts**

Once uploaded, the platform shows you what parts the 3D file is made of. This is a critical step where users can verify that the 3D model has the right parts that will later define its customization degree. For example, if we have a tea cup with 2 parts: *cup* and *saucer*, then the platform will allow the structure of the configurator **to choose separately the options for cup and saucer**. We will have the color red for the cup and green for the plate.&#x20;

{% hint style="info" %}
**For more complex configurators, users will most likely need to upload and update the 3D files multiple times until they get the right parts to fit the configurator's requirements. This will be a back and forth job until you will have the right 3D file. We recommend that you document your configurator well before building it in the platform and use the on** [3D Model versions](/learning-the-app/products/add-3d-models/3d-model-versions) **to ease up the process.**
{% endhint %}

**Orientation**

Once you load a 3D file, by default the platform takes the initial position (x,y,z) taken from the original CAD source, which should usually be the correct one. For various reasons, this can be changed, for example during export, and you can correct this from the platform. For example, you might load a 3d table upside down with the legs up, so you may need to flip along the axis until it looks right.

{% hint style="warning" %}
**Read this section to learn how to edit 3D models for correct resizing with the numeral block (suitable for tables, cabinets, closets, shelves, windows, doors, roofs, and sheds):** [Modeling and editing 3D meshes to support numeral blocks.](/learning-the-app/products/create-options/numeral/modeling-and-editing-3d-meshes-to-support-numeral-blocks)
{% endhint %}

### Prepare 3D Models

{% embed url="<https://youtu.be/ML2H2lZWfhs?si=jgzO51TUuSKDKpNw>" %}


# Categories

Organize your 3D assets into categories

We strongly recommend using categories when organizing your 3D assets in the platform. Especially when you have many, a good practice is to have for each product configurator or 3d viewer at least one category where you keep all your assigned 3d assets. You can also create separate categories for drafts, for unused ones, it's up to you how you organize them, but don't avoid using them.

<figure><img src="/files/m3gqEy1b2KwexWwmnLwm" alt=""><figcaption><p>Categories for 3D Assets</p></figcaption></figure>


# File too large


# Orders

Manage submissions from configurators

Each configurator can generate orders and all of them are collected in the **Orders** section.

<figure><img src="/files/A283q2wRd6KAZNakKzAW" alt=""><figcaption><p>Orders</p></figcaption></figure>

Each order generates a unique order number, lists which configurator the order came from, its date and status. The user can click on the green "eye" icon found in the "Actions" column to review the order and access more information about the order.

<figure><img src="/files/D6OUmpRRVQQdutOK3sWc" alt=""><figcaption><p>Order page</p></figcaption></figure>


# WooCommerce

Integrate configurators with WooCommerce websites

Simplio3D integrates with WooCommerce in two modes: **Redirect to Checkout**, which sends customers directly to checkout after configuration, and **Add to Basket**, which adds the configured product to the cart for further shopping or review before purchase.

## Installation

1. [**Redirect to Checkout**](/integrations/woocommerce/redirect-to-checkout)
2. [**Add to Basket**](/integrations/woocommerce/add-to-basket)


# Redirect to Checkout

Integrate with WooCommerce using 'Redirect to Checkout' mode (no Wordpress plugin required)

Integrating Simplio3D with WooCommerce offers a seamless and efficient way to enhance your online store's functionality. This integration not only elevates the shopping experience through interactive 3D customizations but also streamlines operations by leveraging WooCommerce's vast eCommerce capabilities.

## Quick Setup —  Simplio3D → WooCommerce: Redirect to Checkout (no Wordpress plugin required)&#x20;

1. In WordPress, ensure WooCommerce is installed and running.&#x20;
2. In WooCommerce > Settings > Advanced > REST API, create an API key with Read/Write permissions.
3. In Simplio3D, go to Integrations → WooCommerce and enter:
   * Store URL (with `https://`, without `www`)&#x20;
   * Consumer Key & Consumer Secret (**from step 2**)&#x20;
   * Webhook Signature Secret
   * Click **Connect to WooCommerce**&#x20;
4. Link a configurator to WooCommerce website by clicking the “cart” icon in the Products section, selecting WooCommerce, and saving (**no product ID required in this integration mode**).&#x20;
5. Embed the configurator (iframe/JavaScript) into the WooCommerce product page template.

## C**onnect with WooCommerce**

Ensure you have a fully functioning WooCommerce installation on your WordPress site.

In **Simplio3D** app, go to **Integrations**, found in the left menu and select **WooCommerce**.

<figure><img src="/files/Dtf1WJhwYL2KqyZIYKVr" alt=""><figcaption><p>Integration page</p></figcaption></figure>

Open another tab in your browser and go to your **WordPress** site, click on **WooCommerce** in the left menu, and go to **Settings**.

<figure><img src="/files/pI9ehn6eyg3dWJMKG3lh" alt=""><figcaption><p>Go to WooCommerce > Settings > Advanced > REST API</p></figcaption></figure>

Next, click on the **Advanced** tab and select the **REST API** tab from the submenu, as shown in the image below.

<figure><img src="/files/Mebs0t83PwSMuslkUKeE" alt=""><figcaption><p>Create an API key</p></figcaption></figure>

Click the blue "Create an API Key" button to generate a key for your integration.

<figure><img src="/files/LvOhQ80rZJcasJybzB6y" alt=""><figcaption><p>Type a name for Description field to identify your key and for Permissions select Read/Write</p></figcaption></figure>

{% hint style="warning" %}
**Make sure Read/Write is selected in Permissions. Please see screenshot above.**
{% endhint %}

Click the blue **'Generate API key'** button found at the bottom to generate the **Consumer Key** and **Consumer Secret.** The 2 codes will be used in the WooCommerce integration step found on the Simplio3D platform.

<figure><img src="/files/pQfBCzzlb5dir0k4Af48" alt=""><figcaption><p>Copy/Paste consumer key and consumer secret in WooCommerce settings found in the Simplio3D platform</p></figcaption></figure>

Also user will create webhook in WooCommerce and will get Secret Key:

<figure><img src="/files/tOR5hiCVTlqHOK4sQV0v" alt=""><figcaption></figcaption></figure>

Return to the WooCommerce integration page on the Simplio3D platform and copy/paste the 2 codes along with the store URL.

{% hint style="warning" %}
**For the store URL, please make sure you add the&#x20;*****https\://*****&#x20;and&#x20;**<mark style="color:red;">**without**</mark> ***www*****.**
{% endhint %}

<figure><img src="/files/dmPj13llXRMhxIrQV4UG" alt=""><figcaption><p>In Simplio3D, copy/paste the 3 codes along with the store URL</p></figcaption></figure>

Once the 3 fields are filled in, click “Connect to WooCommerce” to complete the integration. If the fields are correctly filled in with the required data, you should receive a “WooCommerce is connected” confirmation message as shown below.

<figure><img src="/files/hV8c0xzcfolOg3ykc9T7" alt=""><figcaption><p>WooCommerce is connected</p></figcaption></figure>

**Connect WooCommerce with a specific configurator**

After you have successfully connected WooCommerce with Simplio3D, you are ready to connect a configurator and complete orders through your WooCommerce store. You can do this by going directly to the [Products](/learning-the-app/products) section and clicking on the button with the "cart" icon on the configurator you want to connect to.

<figure><img src="/files/E5lzpJAAY5Om1QwLz7Zd" alt=""><figcaption><p>Click the basket button to connect a configurator with WooCommerce</p></figcaption></figure>

After clicking the "cart" button, a pop-up window will appear where you can select the platform you want to integrate the configurator with, in our case we select WooCommerce and click 'Save'.

<figure><img src="/files/viFEYH3f23ohIuhU537d" alt=""><figcaption><p>Select WooCommerce</p></figcaption></figure>

After you select "WooCommerce" and click "Save", the configurator is integrated and configurator users can finalize orders through the WooCommerce checkout process.

<figure><img src="/files/CdqEHU03XBbMzPTRO3xz" alt=""><figcaption><p>WooCommerce integration complete</p></figcaption></figure>

#### **Embed the Configurator**

Simplio3D provides an **embed code (iframe or JavaScript) or source link** for integration.

Add this to your WooCommerce product page template, usually via:

* A HTML block
* A custom page builder widget
* PHP template modification (`single-product.php`)

More information in the [Share](/learning-the-app/products/share) chapter.


# Add to Basket

Integrate with WooCommerce using 'Add to Basket' mode

Before integrating the configurator with a WooCommerce-based website, ensure that all necessary preparations have been completed. This includes deploying the WordPress website, installing and configuring the WooCommerce plugin, and verifying that the configurator is ready to be embedded into the site.

{% hint style="info" %}
**As you proceed through the following steps, ensure that both the Wordpress Admin interface and the Simplio3D application remain open in your browser.**
{% endhint %}

## Quick Setup — Simplio3D → WooCommerce: Add to Basket

1. Install and activate the **Simplio3D WooCommerce** plugin in WordPress.
2. Create a WooCommerce product (hidden), including SKU and a placeholder price.
3. In Simplio3D, go to Integrations → WooCommerce, choose **Add to Basket** mode, and fill in:
   * API URL (`?add-to-cart=PRODUCT_ID`) Example: <https://mydomain.com/?add-to-cart=22>
   * Access token
   * Store URL
   * WooCommerce consumer key & secret
   * Webhook Signature Secret (found in Webhooks tab)
4. In the Simplio3D, in Products, link your configurator to the WooCommerce product using its ID.
5. Embed the configurator into your site using the provided shortcode:

   ```
   [simplio3d_configurator url="…" product_id="123" height="850px" width="100%"]
   ```
6. On your WooCommerce Cart page, insert the cart shortcode:

   ```
   [woocommerce_cart]
   ```
7. Add custom CSS (in “Additional CSS”) to style thumbnails found in the cart:

   ```css
   .woocommerce-cart-form .product-thumbnail { max-width: 100px !important; }
   .woocommerce-cart-form .product-thumbnail img { max-width: 150px !important; width: auto !important; }
   .woocommerce-cart-form .product-name img { display: none !important; }
   ```

**Let’s review each step in detail.**

## Step 1

### Install and activate the Simplio3D WooCommerce plugin in WordPress.

Access the WordPress Admin dashboard and navigate to **Plugins → Add Plugin** and click **Upload Plugin** button found in the upper left screen. You can either use the **Add Plugin** button located on the **Installed Plugins** page or open the **Add Plugin** submenu and click **'Upload Plugin'**. From there, upload the plugin ZIP file to install it.

<figure><img src="/files/GMltsabHfqSc4N3oFoDD" alt=""><figcaption></figcaption></figure>

After selecting the ZIP file, click the **Install Now** button to install the plugin on your WordPress website.

<figure><img src="/files/TwQp4PPclN0D3milCeYI" alt=""><figcaption></figcaption></figure>

After the plugin is installed, click **Activate Plugin**.

<figure><img src="/files/xMj8M0BwAgrC46ZyJAFF" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Also, you can install the plugin by uploading the zip file directly in your server, through FTP, CPanel file manager or through terminal. Upload the Simplio3D WooCommerce plugin zip file into the ../wp-content/plugin/ .**
{% endhint %}

## Step 2

### Create a WooCommerce product (hidden), including SKU and a placeholder price.

In the WordPress Admin panel, select **Products** from the left-hand menu to create the product that will be linked to the configurator.

<figure><img src="/files/BP9Qp3Hu7OXHMqXZnLnX" alt=""><figcaption></figcaption></figure>

Create any product in WooCommerce **and keep the product hidden.**

<figure><img src="/files/9qwhpIf4Th2HIIb0rwK7" alt=""><figcaption></figcaption></figure>

Ensure that the product includes both an **SKU** and a **Price**. Although the final price will be generated by the configurator, an arbitrary price must still be set in WooCommerce for the product to function properly.

{% hint style="info" %}
**It’s not mandatory, but you can upload a Product Image to use as a thumbnail on the Cart and Checkout pages. If you don’t upload one, the product will automatically use the thumbnail generated from the configurator.**
{% endhint %}

**Add Price**

<figure><img src="/files/mQEjmna1jC8jRytpEktz" alt=""><figcaption></figcaption></figure>

**Add SKU**

<figure><img src="/files/nD4RUlcnYtafscQZ7M6r" alt=""><figcaption></figcaption></figure>

Now click '**Publish**' to create your product.

{% hint style="warning" %}
**Create any product in WooCommerce but keep this product hidden.**

**Keep remember that product should have SKU and Price. It should be a proper product.**
{% endhint %}

In the **Products** list, you’ll see the newly added product along with its **ID**. This product ID is important and will be required in the next step.

<figure><img src="/files/h7O3740VFTiQsvy92pLx" alt=""><figcaption></figcaption></figure>

## Step 3

### In Simplio3D, go to Integrations → WooCommerce, choose 'Add to Basket' integration mode, and fill in the form.

Access the **Integrations** section from the left-side menu in the Simplio3D application. Then, select **WooCommerce** to establish the connection with your account.

In this case, select the **Add to Basket** integration mode. This option ensures that the configured product is added directly to the WooCommerce cart.

<figure><img src="/files/5FT1d7fjMSNZZsggeSiH" alt=""><figcaption></figcaption></figure>

Below are the settings you need to configure to properly connect **Simplio3D** with **WooCommerce:**

* **Integration Mode:** Add to Basket
* **API URL:** This is made from the URL link of your website following *?add-to-cart=* and ID of the product. Example: <https://mydomain.com/?add-to-cart=22>
* **Access Token:** You can find this in your Simplio3D account profile under the **API Token** tab. Generate a token there and enter it in this field.

<figure><img src="/files/FYQReL6VNyaGGkOtLT7E" alt=""><figcaption></figcaption></figure>

* **Store URL:** Enter your website URL, including the **https\://** protocol. Example: <https://mydomain.com>
* **Consumer key:** Add WooCommerce Consumer key.
* **Consumer secret:** Add WooCommerce Consumer secret.
* **Webhook Signature Secret:** The secret key needs to be added in Simplio3D to validate signature from Woocommerce.

<figure><img src="/files/tOR5hiCVTlqHOK4sQV0v" alt=""><figcaption></figcaption></figure>

Both Consumer key and Consumer secret are taken from **WooCommerce>Settings>Advanced>REST API**.

<figure><img src="/files/C2yxs1lluz6dAWN8cfi3" alt=""><figcaption></figcaption></figure>

Click the **Create an API Key** button, then fill in the **Key Details** section. Add a **Description** and ensure that **Permissions** are set to **Read/Write**.

{% hint style="warning" %}
Its important to make sure that **Permissions** are set to **Read/Write**.
{% endhint %}

<figure><img src="/files/fhV4xOGUnU63iMhZd5Cl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**More detailed steps in getting the Consumer key and Consumer secret from WooCommerce are also explained in** [**'Redirect to Checkout'**](/integrations/woocommerce/redirect-to-checkout) **integration mode.**
{% endhint %}

Click the **Generate API Key** button, then copy and paste the **Consumer Key** and **Consumer Secret** into the integration form in **Simplio3D**.

After entering all the integration details in **Simplio3D**, click the **Connect to WooCommerce** button to complete the integration. If the information is correct, the application will confirm a successful connection with WooCommerce.

<figure><img src="/files/3VHHFwyljXD3WNj6xO7U" alt=""><figcaption></figcaption></figure>

## Step 4

### In the Simplio3D app, in Products, link your configurator to the WooCommerce product using its ID.

While still in the **Simplio3D** application, navigate to **Products** to connect your configurators with WooCommerce.

<figure><img src="/files/3zeZpridKTl6oHgCEhPz" alt=""><figcaption></figcaption></figure>

Each product in **Simplio3D** includes a shopping cart icon that you can click to connect it with **WooCommerce**. Click the shopping cart icon for the desired configurator to open the popup window. Then select **WooCommerce**, and be sure to enter the **Product ID** of the hidden product created in WooCommerce.

<figure><img src="/files/Jj8IiLsuTpiyEzqqh7vM" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Be sure to enter the **Product ID** of the hidden product created in WooCommerce.
{% endhint %}

## Step 5

### Embed the configurator into your site using the provided shortcode

Let’s embed the configurator on a WordPress page so it can be displayed to users and customers. Click the **Edit** button for the configurator you previously connected to WooCommerce.

<figure><img src="/files/uIeBn1Gpkpb8aC0iwevn" alt=""><figcaption></figcaption></figure>

Once you’re on the product editing page, go to **Add Form tab**, then open the dropdown menu in the upper-right corner and select **Add to Cart**. Instead of creating a contact form, we enable a Add to cart button for the WooCommerce website.

<figure><img src="/files/WaRx7qzz9isMlTcfP2Fv" alt=""><figcaption></figcaption></figure>

Click the **Add Field** button next to the dropdown menu to define and add the field block.

<figure><img src="/files/InCdcUm5flBToROCgKQJ" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Leave the **URL** field blank, as this setup is intended to add the product directly to the WooCommerce cart.
{% endhint %}

Name the **Add to Cart** button and click 'Save'.

<figure><img src="/files/WpjkRjTB9OEld4WgCXk2" alt=""><figcaption></figcaption></figure>

Go to the **Share** tab to copy the source link (**src**) for embedding into your WordPress website.&#x20;

<figure><img src="/files/d5A4dhoShA4hvaQ8gzdk" alt=""><figcaption></figcaption></figure>

For the **Add to Basket** integration mode, **you’ll need to use a shortcode that also includes the product ID**. The shortcode format is as follows:

`[simplio3d_configurator url="https://app.simplio3d.com/configurator/share/eyJpdiI6IngxS3Q1OVlPQzBzdFZGZUpaUUhJOVE9PSIsInZhbHVlIjoiZ45545454gfggfghbffgT09IiwibWFjIjoiNGFlZTA5YzNmYzJjYjAwNTU4NTZkZjY2YjU1MzQzZDE1M2ZhODYwZGU4YmYzZmE5NGU0MDgxMmJjNGJkZjA3OCIsInRhZyI6IiJ9" product_id="280" height="850px" width="100%"]`

The shortcode which is supported by the Simplio3D WooCommerce plugin contains the following values:

* **Name of the shortcode:** `simplio3d_configurator`
* **URL:** where we copy/paste the source link of the configurator (as shown above)
* **Product ID:** The ID of the product taken from the WooCommerce product listing (as shown above)
* **Height:** iFrame height in pixels/percentage&#x20;
* **Width:** iFrame width in pixels/percentage

Add the shortcode anywhere on your WordPress website. For example, you can create a new page called **Configurator** and insert the shortcode there.

<figure><img src="/files/tOfhr1bvxUwENrfCOACs" alt=""><figcaption></figcaption></figure>

## Step 6

### In your WooCommerce Cart page, insert the cart shortcode

In the WordPress Admin panel, navigate to **Pages** and open the **Cart** page for editing.

<figure><img src="/files/ogFY4b6ZpXm8hWVDcDal" alt=""><figcaption></figcaption></figure>

Within the **Cart** page, create a new shortcode block and include the shortcode shown below: `[woocommerce_cart]`

<figure><img src="/files/YyE4Or8RjvA4JQNKs5qb" alt=""><figcaption></figcaption></figure>

Click **Save** to apply and save the changes made to the **Cart** page.

## Step 7

### Add custom CSS (in “Additional CSS”) to style thumbnails found in the Cart

`.woocommerce-cart-form .product-thumbnail { max-width: 100px !important; }`

`.woocommerce-cart-form .product-thumbnail img { max-width: 150px !important; width: auto !important; }`

`.woocommerce-cart-form .product-name img { display:none !important; }`

Add CSS in theme. It’s an additional CSS for the theme.

<figure><img src="/files/P6Es6w0eZ66eG0JhXHur" alt=""><figcaption></figcaption></figure>


# Shopify

How to integrate configurators with Shopify

Integrating Simplio3D with Shopify can elevate your store by giving customers an interactive and immersive shopping experience. With this integration, shoppers can customize products in real time, which can improve customer satisfaction and help drive more sales. This guide walks you through the process of connecting Simplio3D to your Shopify store for a smooth setup and reliable performance.

To enable custom pricing and checkout functionality, you need to create a private app in your Shopify Admin by following these steps:

1. Go to **Settings > Apps in Dev Dashboard > Apps**
2. Click **Create an app** and name it **Simp3D Connector**.
3. Go to **Versions**, click **Create new version**.
4. Search for **Scopes** field and enable **write\_draft\_orders and** then click **Save**.
5. Click **Install app**, then copy the **Client ID** and **Client Secret** into the corresponding fields below.

Once this setup is complete, you will be able to generate draft orders and redirect users from the configurator to the checkout page with the price displayed in the Simplio3D application.


# API Documentation

Introduction

Simplio3D has an API library ready to unlock integration with third-party systems such as ERPs, CRMs and other web services and to increase the degree of customization in terms of implementing a product configurator using the Simplio3D foundation.

The platform offers REST API access at 2 levels:

* **Starter subscriptions:** [Partner API ](/api-reference/partner-api)
* **Pro and Enterprise subscriptions:**  [Open API](/api-reference/open-api)
* **Enterprise subscription:** [Web SDK](/api-reference/api-sdk) & Dashboard API

**Pro subscription: Partner REST API**

If you are a Pro user, you have access to the Partner API and in your user account profile you can generate a token to execute and generate a JSON response.\
The Partner API only handles the execution of **order data** coming from the 3D configurators. Here is an example of a JSON result below:

```
      {
          "id": 22,
          "price": 250,
          "status": "new",
          "customer_details": {
            "Phone": "000",
            "Last Name": "John",
            "First Name": "Smith",
            "Email address": "john@smith.smith",
            "GDPR/DSA": "yes"
          },
          "configurator_summary": {
            "Width": "60inches",
            "Colors": "Vintage Brown Wood",
            "Height": "60inches",
            "Profile Depth": "4inches",
            "Opening System": "Tilt & turn (left)",
            "Type of Window": "Tilt & Turn",
            "Upright Fanlight": "No upper fanlight"
          },
          "invoice_url": 1,
          "order_shopify": {
            "id": 3,
            "shopify_draft_order_id": "000",
            "order_id": 22,
            "currency": "INR",
            "invoice_url": "[link]invoices/f1c6f192caa9e1570dc7be672437d3ec",
            "return_url": "[link]configurator",
            "total_price": 250,
            "subtotal_price": 250,
            "total_tax": 20.64,
            "status": "open",
            "created_at": "2025-01-21T15:15:22.000000Z",
            "updated_at": "2025-01-21T15:15:22.000000Z"
          },
          "created_at": "2025-01-21 15:15:21",
          "updated_at": "2025-01-21 15:15:21"
        },
```

[Explore the Partner API documentation.](/api-reference/partner-api)

**Enterprise subscription:** **Open API**

Enterprise allows access to the Open API. This is for more advanced customization solutions, useful for IT development teams that want to implement more complex configurators based on the Simplio3D foundation.

[Explore the Open API documentation.](/api-reference/open-api)

For more information you can contact us anytime [here](https://www.simplio3d.com/contact-us/).

<figure><img src="/files/75NHkKkWGNjE38rN8SVa" alt=""><figcaption><p>Embedded versus Open API</p></figcaption></figure>


# Partner API

API Order Endpoints Introduction

## Overview

The Simplio3D Partner API's order endpoints provide comprehensive tools for handling various aspects of order management. These endpoints are designed to assist partners in seamlessly integrating the ordering process into their existing systems, ensuring a smooth and efficient workflow from order creation to fulfillment.

**Key Features**

**Order Creation**: Leverage the API to create new orders effortlessly by submitting relevant details such as product configurations, customer information, and pricing. This feature ensures that order details are captured accurately and efficiently.

By integrating these order endpoints, businesses can significantly enhance their order management capabilities, improve customer satisfaction, and optimize operational efficiency.


# Managing Orders

API Endpoints for Managing Orders

### Overview

The Simplio3D API provides robust capabilities for managing order-related operations. The order endpoints are essential for retrieving and interacting with order data, enhancing the efficiency and functionality of client applications.

### <mark style="color:green;">GET</mark> 'Get Order by ID'

This API endpoint retrieves a specific order using its unique identifier. The client must provide a valid order ID to fetch the order details, which typically include information such as order date, items, quantity, and status.

## Get order by ID

> Get a specific order by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Orders","description":"API Endpoints for managing order"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/orders/{id}":{"get":{"tags":["Orders"],"summary":"Get order by ID","description":"Get a specific order by ID.","operationId":"eb76b24e9cf6682e8eed49c296501063","parameters":[{"name":"id","in":"path","description":"ID of the order","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Order retrieved successfully"},"401":{"description":"Unauthorized"},"404":{"description":"Order not found"},"500":{"description":"Internal Server Error"}}}}}}
```

### <mark style="color:green;">GET</mark> 'Fetch All Orders'

This API endpoint fetches a list of all orders. It allows clients to view existing orders, with optional filtering and pagination parameters to manage the retrieved data efficiently. This endpoint is useful for obtaining an overview of order history or status updates.

The endpoint is designed to retrieve a comprehensive list of all orders available within the system. Clients can leverage this endpoint to access a paginated and optionally filtered dataset of orders. This is particularly useful for applications that need to present an overview of order histories, track order statuses, or analyze order trends over time. Key features include:

* **Pagination**: Retrieve orders in manageable chunks to optimize performance and user experience.
* **Filtering**: Apply criteria such as date ranges, statuses, or customer IDs to narrow down results to relevant data sets.
* **Order Details**: View summary information for each order, including order ID, date, status, and total amount.

This endpoint is an essential tool for applications aimed at providing insights and management capabilities around order data.

## GET /api/open-api/v1/orders

> Fetch all orders

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Orders","description":"API Endpoints for managing order"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/orders":{"get":{"tags":["Orders"],"summary":"Fetch all orders","operationId":"c8f29adea587435e7ae6bc3f61862859","parameters":[{"name":"per_page","in":"query","description":"Number of results per page","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Field to sort orders by","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sort order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"configurator_id","in":"query","description":"Filter orders by specific configurator ID","required":false,"schema":{"type":"integer"}},{"name":"start_date","in":"query","description":"Filter orders created after this date","required":false,"schema":{"type":"string","format":"date"}},{"name":"end_date","in":"query","description":"Filter orders created before this date","required":false,"schema":{"type":"string","format":"date"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"properties":{"configurator":{"properties":{"id":{"type":"integer"},"configurator_name":{"type":"string"}},"type":"object"}},"type":"object"}},"pagination":{"properties":{"current_page":{"type":"integer"},"per_page":{"type":"integer"},"total":{"type":"integer"},"last_page":{"type":"integer"},"next_page_url":{"type":"string","nullable":true},"prev_page_url":{"type":"string","nullable":true}},"type":"object"}},"type":"object"}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## The OrdersResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"OrdersResource":{"title":"Order Resource","description":"Order resource representation","properties":{"id":{"description":"Unique identifier for the order","type":"integer"},"price":{"description":"Total price of the order","type":"number","format":"float"},"status":{"description":"Status of the order","type":"string"},"customer_details":{"description":"Details of the customer","type":"object"},"configurator_summary":{"description":"Summary of the configurator options selected","type":"object"},"configurator_snapshot":{"description":"URL of the configurator snapshot image","type":"string","format":"url"},"configurator_print_map":{"description":"Array of URLs for configurator print maps","type":"array","items":{"type":"string","format":"url"}},"invoice_url":{"description":"URL for downloading the order invoice","type":"string","format":"url"},"order_shopify":{"description":"Shopify order ID if applicable","type":"string"},"created_at":{"description":"Timestamp when the order was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the order was last updated","type":"string","format":"date-time"}},"type":"object"}}}}
```


# Open API

Documentation Overview

## Documentation Overview

The Simplio3D Open API provides a robust and scalable way to access and integrate 3D configuration and customization capabilities into your applications. With this API, developers can easily create seamless, interactive 3D product configurations.

### Core Features

* **3D Model Configuration**: Adjust product features dynamically using simple API calls.
* **Real-time Visualization**: Render changes to 3D models instantly on your platform.
* **3D Product Library**: Access a wide array of 3D models.

### Getting Started

To begin using the Simplio3D Open API, you need to:

1. **Sign Up**: Create an account on the Simplio3D portal.
2. **API Token**: Obtain your unique API key for authentication.
3. **Documentation**: Refer to detailed API documentation for integration guidelines and endpoints.

Explore the official documentation to delve deeper into specific endpoints, parameters, and use cases to make the most out of the API.


# Getting Started

Overview

Welcome to the Simplio3D API! This guide will help you start using our API efficiently with the help of our OpenAPI specification JSON file.

### Prerequisites

Before you begin, ensure you have:

* An API key from Simplio3D. You can obtain one by registering on our [developer portal](https://app.simplio3d.com/admin/profile/edit).

<figure><img src="/files/geYM65BXQx25o28Hh5PO" alt=""><figcaption><p>Generated API token</p></figcaption></figure>

* Familiarity with JSON and RESTful APIs.

### Step 1: Access the OpenAPI Specification

Access the OpenAPI specification JSON file from our [API documentation page](https://app.simplio3d.com/api/documentation/open). This file contains detailed information on all of our API endpoints, request parameters, and response structures.

### Step 2: Set Up Your Environment

1. **Choose a Programming Language**: Use your preferred language's HTTP client libraries (e.g., Python requests, Axios for JavaScript, etc.).

### Step 3: Make Your First API Call

1. **Authenticate**: Include your API key in the header of each request:

   ```http
   Authorization: Bearer YOUR_API_KEY
   ```


# User Authentication

API Endpoints for User Authentication

### <mark style="color:orange;">POST</mark> /create-session

The Simplio3D OpenAPI provides several endpoints for user authentication. These endpoints allow users to securely sign up, log in, and manage their authentication status.

#### Generate Login Token for a User

The 'Generate Login Token for a User' endpoint is a crucial part of the authentication process, as it enables the creation of a secure token that verifies a user's identity. Once a user successfully logs in with valid credentials, such as a username and password, this endpoint is responsible for generating a unique token. This token is essentially a cryptographic string that represents the user's session and is used to authenticate subsequent API requests.

When a request is made to this endpoint, the system validates the provided credentials and, upon successful verification, issues a token. This token should then be stored securely on the client side, typically in a secure location like local storage or a secure cookie, to prevent unauthorized access or exposure. For all future interactions with protected resources within the application, the client must include this token in the authorization header of their API requests.

#### Endpoints

## POST /api/open-api/v1/auth/create-session

> Generate login token for a user

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Authentication","description":"API Endpoints for User Authentication"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"apiKeyAuth":[]}],"components":{"securitySchemes":{"apiKeyAuth":{"type":"apiKey","description":"Enter your Authorization key here.","name":"Authorization","in":"header"}}},"paths":{"/api/open-api/v1/auth/create-session":{"post":{"tags":["Authentication"],"summary":"Generate login token for a user","operationId":"40e023f5f250da13f94e48c808d5560c","requestBody":{"required":true,"content":{"multipart/form-data":{"schema":{"required":["id","domain_name"],"properties":{"id":{"description":"Configurator ID to generate the token. You can find this Configurator Encrypted ID in share module","type":"string"},"domain_name":{"description":"Domain name","type":"string"}},"type":"object"}}}},"responses":{"200":{"description":"Token generated successfully","content":{"application/json":{"schema":{"properties":{"message":{"type":"string"},"token":{"type":"string"}},"type":"object"}}}},"400":{"description":"Validation error"},"403":{"description":"Unauthorized token"},"500":{"description":"Server error"}}}}}}
```

This method largely eliminates the need for users to repeatedly enter their credentials for every request, thereby improving both usability and security. It ensures that only authenticated users can access sensitive data and perform actions that require a verified identity. Furthermore, implementing token expiration policies and revocation capabilities enhances the system's security, as tokens can be invalidated after a certain period or upon user logout, safeguarding against improper use.

{% hint style="warning" %}
**Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.**
{% endhint %}


# 3D Assets

Get a list of configurator 3D asset models.

### <mark style="color:green;">GET</mark> /configurator-assets-models

#### Description

Retrieves a list of configurator asset models. Each model represents the configuration details of a specific asset.

#### URL

`GET /configurator-assets-models`

#### Query Parameters

* **page** (optional): The page number of results to retrieve.
* **limit** (optional): The number of results per page.
* **sort** (optional): The field by which to sort the results.

#### Response

* **200 OK**: A successful response will return a JSON object containing:

  * **models**: An array of configurator asset models.
  * **total**: The total number of available models.
  * **page**: The current page number.
  * **limit**: The number of results per page as requested.

  #### Example Request

  ```http
  GET /configurator-assets-models?page=1&limit=10&sort=name
  ```

  #### Example Response

  ```json
  {
    "models": [
      {
        "id": "123",
        "name": "Model A",
        "description": "Description of Model A"
      },
      {
        "id": "124",
        "name": "Model B",
        "description": "Description of Model B"
      }
    ],
    "total": 25,
    "page": 1,
    "limit": 10
  }
  ```

  #### Error Responses

  * **400 Bad Request**: Invalid request parameters.
  * **500 Internal Server Error**: A server error occurred while processing the request.

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Fetch all configurator 3D asset models

> Get a list of configurator 3D asset models.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator 3D Asset Models","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorAssetsModelsResource":{"title":"Configurator 3D Asset Models Resource","description":"Schema for configurator 3D asset models","properties":{"id":{"type":"integer"},"name":{"type":"string"},"models_url":{"type":"string","format":"url"},"preview_models_url":{"type":"string","format":"url"},"models_orientation":{"type":"string"},"meshes_list":{"type":"array","items":{"type":"string"}},"category_id":{"type":"integer"},"status":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-assets-models":{"get":{"tags":["Configurator 3D Asset Models"],"summary":"Fetch all configurator 3D asset models","description":"Get a list of configurator 3D asset models.","operationId":"1060d0990e589367525ee0d343f607d5","responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorAssetsModelsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized"},"404":{"description":"Configurator not found"},"500":{"description":"Internal Server Error"}}}}}}
```

## The ConfiguratorAssetsModelsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorAssetsModelsResource":{"title":"Configurator 3D Asset Models Resource","description":"Schema for configurator 3D asset models","properties":{"id":{"type":"integer"},"name":{"type":"string"},"models_url":{"type":"string","format":"url"},"preview_models_url":{"type":"string","format":"url"},"models_orientation":{"type":"string"},"meshes_list":{"type":"array","items":{"type":"string"}},"category_id":{"type":"integer"},"status":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}}}
```

## The AssetsModelsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"AssetsModelsResource":{"title":"Assets Models Resource","description":"3D Asset Model Resource","properties":{"id":{"description":"Unique identifier of the asset model","type":"integer"},"name":{"description":"Name of the asset model","type":"string"},"models_url":{"description":"URL to the original 3D model file","type":"string","format":"url"},"preview_models_url":{"description":"URL to the preview version of the 3D model","type":"string","format":"url"},"models_orientation":{"description":"Orientation data for the 3D model","type":"string"},"meshes_list":{"description":"List of meshes included in the 3D model","type":"array","items":{"type":"string"}},"category_id":{"description":"Category ID to which the asset model belongs","type":"integer"},"status":{"description":"Current status of the asset model","type":"string"},"created_at":{"description":"Timestamp when the model was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the model was last updated","type":"string","format":"date-time"},"created_by":{"description":"Full name of the creator of the model","type":"string"}},"type":"object"}}}}
```


# Configurators

Retrieve detailed information about a specific configurator

### <mark style="color:green;">GET</mark> /configurator/{id}

#### Endpoint

`GET /open-api/v1/configurator/{id}`

#### Description

Retrieve detailed information about a specific configurator identified by the unique `id`.

#### Parameters

* `id` (required): A unique identifier for the configurator you want to retrieve.

#### Request Example

```http
GET /api/configurators/12345 HTTP/1.1
Host: api.simplio3d.com
Authorization: Bearer {access_token}
Accept: application/json
```

#### Response

* **200 OK**: The request was successful, and the configurator details are returned.
* **404 Not Found**: No configurator was found with the specified `id`.

#### Response Example

```json
{
  "id": "12345",
  "name": "3D Configurator",
  "description": "A sample 3D product configurator",
  "created_at": "2023-05-12T14:30:00Z"
}
```

#### Error Handling

* Ensure the `id` provided is correct and exists.
* Verify authentication token is valid and has adequate permissions.

#### Notes

* Make sure to replace `{id}` with the actual configurator ID you need.
* Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint.

## Get configurator by ID

> Get a specific configurator by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurators","description":"API Endpoints for managing configurators"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorResource":{"title":"Configurator Resource","description":"Schema for configurator data","properties":{"id":{"type":"integer"},"name":{"type":"string"},"configurator_type":{"type":"string"},"configurator_template":{"type":"string"},"configurator_integration":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator/show":{"get":{"tags":["Configurators"],"summary":"Get configurator by ID","description":"Get a specific configurator by ID.","operationId":"a0d4239a49a2a1d103bef3a09637b420","responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Configurator not found"},"500":{"description":"Internal Server Error"}}}}}}
```


# Contact Form

Endpoints for managing fields and form fields

#### Simplio3D API - Form Fields Endpoints

The Simplio3D API provides several endpoints for managing form fields in a 3D customization environment. These endpoints allow users to retrieve, create and delete form fields, enhancing user interaction and customization options.

* <mark style="color:green;">**GET**</mark>**&#x20;/formfields**: Retrieve a list of all form fields. This endpoint requires authentication and can filter fields based on specific criteria.
* <mark style="color:red;">**\[Dashboard API]**</mark> <mark style="color:orange;">**POST**</mark>**&#x20;/form-fields**: Create a new form field. The request body should include details such as field name, type, and any other necessary attributes.
* <mark style="color:red;">**\[Dashboard API] DELETE**</mark>**&#x20;/form-fields/{id}**: Remove a form field from the system. This operation is irreversible and requires the field's unique identifier.

These endpoints are essential for dynamically managing input forms, enabling a flexible and responsive user experience in customized 3D solutions. Make sure to handle responses and errors effectively as per the API documentation.


# Form Fields

Get a list of configurator form fields.

## <mark style="color:green;">GET</mark> /configurator-form-fields

#### Fetch All Configurator Form Fields

To retrieve all configurator form fields in Simplio3D, use the following GET API endpoint:

```
GET /open-api/v1/configurator-form-fields
```

**Parameters**

* `configurator_id` (required): The unique identifier for the configurator.

**Response**

A successful response returns a JSON object containing:

* `id`: The field ID.
* `name`: The field name.
* `type`: The field type (e.g., first name, last name, email, phone, text, select).
* `options`: Available options for select-type fields (if applicable).
* `default`: The default value for the field.
* `required`: Boolean indicating if the field is mandatory.

**Example**

```json
{
  "fields": [
    {
      "id": "123",
      "name": "Shipping",
      "type": "Dropdown",
      "options": ["UPS", "FedEx", "No shipping"],
      "default": "Red",
      "required": true
    },
    {
      "id": "124",
      "name": "Size",
      "type": "text",
      "default": "Medium",
      "required": false
    }
  ]
}
```

Use this endpoint to programmatically fetch and manage form fields for configurators in your application.

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Fetch all configurator form fields

> Get a list of configurator form fields.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Form Fields","description":"API Endpoints for managing configurator form fields"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorFormFieldsResource":{"title":"Configurator Form Fields Resource","description":"Schema for configurator form fields","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"mandatory_status":{"type":"string"},"description":{"type":"string"},"url":{"type":"string"},"settings":{"type":"string"},"show_title":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-form-fields":{"get":{"tags":["Configurator Form Fields"],"summary":"Fetch all configurator form fields","description":"Get a list of configurator form fields.","operationId":"2aaa572dfccb0767c458102759879129","parameters":[{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorFormFieldsResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## The ConfiguratorFormFieldsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorFormFieldsResource":{"title":"Configurator Form Fields Resource","description":"Schema for configurator form fields","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"mandatory_status":{"type":"string"},"description":{"type":"string"},"url":{"type":"string"},"settings":{"type":"string"},"show_title":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```

## <mark style="color:green;">GET</mark> /configurator/form-fields

#### Simplio3D API: Get Configurator Form Field by ID

The `GET` endpoint allows you to retrieve details about a specific form field used in configurators by providing the field's ID. This is useful for applications needing to dynamically access, display, or modify form fields based on current configuration requirements.

**Endpoint**

```
GET /api/configurator/form-fields/{fieldId}
```

**Parameters**

* `fieldId` (string): The unique identifier of the form field you want to retrieve.

**Response**

The response will contain the details of the form field, including:

* `id`: The ID of the form field.
* `name`: The name of the form field.
* `type`: The type of the form field (e.g., Dropdown, Text).
* `options`: An array of options available for Dropdown types.
* `default`: The default value for the form field.
* `required`: A boolean indicating if the field is required.

**Example Request**

```http
GET /api/configurator/form-fields/123
```

**Example Response**

```json
{
  "id": "123",
  "name": "Shipping",
  "type": "Dropdown",
  "options": ["UPS", "FedEx", "No shipping"],
  "default": "UPS",
  "required": true
}
```

This endpoint is essential for managing and displaying dynamic form fields within your application, ensuring you have up-to-date configurations.

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Get configurator form field by ID

> Get a specific configurator form field by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Form Fields","description":"API Endpoints for managing configurator form fields"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorFormFieldsResource":{"title":"Configurator Form Fields Resource","description":"Schema for configurator form fields","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"mandatory_status":{"type":"string"},"description":{"type":"string"},"url":{"type":"string"},"settings":{"type":"string"},"show_title":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-form-fields/{id}":{"get":{"tags":["Configurator Form Fields"],"summary":"Get configurator form field by ID","description":"Get a specific configurator form field by ID.","operationId":"7d4405f70cfee9b5fba320783a3001f0","parameters":[{"name":"id","in":"path","description":"ID of the configurator form field","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorFormFieldsResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Configurator form field not found"},"500":{"description":"Server error"}}}}}}
```


# Forms

Fetch Configurator Form(s)

## <mark style="color:green;">GET</mark> /configurator-forms/

#### Simplio3D API: Fetch All Configurator Forms

**Endpoint**: `GET /api/v1/configurator-forms`

**Description**: This endpoint retrieves a list of all configurator forms available in the Simplio3D system.

**Request**

* **Method**: `GET`

* **URL Parameters**: None

* **Headers**:

  * `Authorization`: `Bearer <access_token>`

  **Response**

  * **Status Code**: `200 OK`
  * **Content-Type**: `application/json`

  **Response Body**:

  ```json
  [
    {
      "form_id": "123",
      "name": "Configurator Form 1",
      "description": "Description of configurator form 1",
      "created_at": "2023-01-01T12:00:00Z",
      "updated_at": "2023-01-02T12:00:00Z"
    },
    {
      "form_id": "124",
      "name": "Configurator Form 2",
      "description": "Description of configurator form 2",
      "created_at": "2023-01-03T12:00:00Z",
      "updated_at": "2023-01-04T12:00:00Z"
    }
  ]
  ```

* **Notes**
  * Ensure that the API token used in the request is valid and has the required permissions.
  * The response includes metadata about each configurator form, such as creation and last update timestamps.
  * Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Fetch all configurator forms

> Get a list of configurator forms.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Forms","description":"API Endpoints for managing configurator forms"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorFormsResource":{"title":"Configurator Form Resource","description":"Configurator Form details","properties":{"id":{"type":"integer","format":"int64"},"configurator_id":{"type":"integer","format":"int64"},"enable_form":{"type":"boolean"},"created_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-forms":{"get":{"tags":["Configurator Forms"],"summary":"Fetch all configurator forms","description":"Get a list of configurator forms.","operationId":"17d7fc714a3ac9e7c0b92e44131f0365","responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorFormsResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-forms/{id}

#### Fetch a Specific Configurator Form

**Endpoint**: `GET /api/v1/configurator-forms/{form_id}`

**Description**: This endpoint retrieves details of a specific configurator form by its ID in the Simplio3D system.

**Request**

* **Method**: `GET`
* **URL Parameters**: None

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Fetch a specific configurator form

> Get a specific configurator form by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Forms","description":"API Endpoints for managing configurator forms"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorFormsResource":{"title":"Configurator Form Resource","description":"Configurator Form details","properties":{"id":{"type":"integer","format":"int64"},"configurator_id":{"type":"integer","format":"int64"},"enable_form":{"type":"boolean"},"created_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-forms/{id}":{"get":{"tags":["Configurator Forms"],"summary":"Fetch a specific configurator form","description":"Get a specific configurator form by ID.","operationId":"33ee5a0698eb236d16cc84d2db0647d8","parameters":[{"name":"id","in":"path","description":"ID of the configurator form","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorFormsResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Configurator Form not found"},"500":{"description":"Internal Server Error"}}}}}}
```

## The ConfiguratorFormsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorFormsResource":{"title":"Configurator Form Resource","description":"Configurator Form details","properties":{"id":{"type":"integer","format":"int64"},"configurator_id":{"type":"integer","format":"int64"},"enable_form":{"type":"boolean"},"created_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Options

Get detailed information about a specific option

### Simplio3D API - Options Endpoints Overview

Simplio3D API provides a comprehensive set of endpoints to manage product options efficiently. The Options endpoints allow you to:

* **List Options**: Retrieve a list of all available options for a product. This is useful to display configurable options to end-users.
* **Get Option Details**: Access detailed information about a specific option, including prices, dependencies, and restrictions.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;Create an Option**: Add a new option to a product by specifying attributes such as type, values, and pricing details.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;Update an Option**: Modify an existing option's properties, including updating values or changing display settings.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;Delete an Option**: Remove an option from a product, ensuring it is no longer available for selection.

These endpoints ensure that you can manage product customizations dynamically and provide a tailored user experience.


# Options

Managing Configurator Options

## <mark style="color:green;">GET</mark> /configurator-options/types/list

#### Retrieve Available Configurator Option Types

**Endpoint**

`GET /open-api/v1/configurator-options/types/list`

**Description**

This endpoint retrieves the list of available configurator option types supported by Simplio3D.

**Request Headers**

* `Authorization`: Bearer token for authentication

**Response**

* **200 OK**: Returns a JSON object containing an array of available option types.
* **400 Bad Request**: Invalid request parameters.
* **401 Unauthorized**: Invalid or missing authentication token.

**Example Response**

```json
{
  "optionTypes": [
    "color",
    "size",
    "material",
    "custom-text"
  ]
}
```

**Notes**

* Ensure you have valid authentication to access this endpoint.
* Utilize the retrieved option types to understand and configure products efficiently within Simplio3D.
* Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Retrieve available configurator option types

> Get a list of available configurator option types.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Options","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/configurator-options/types/list":{"get":{"tags":["Configurator Options"],"summary":"Retrieve available configurator option types","description":"Get a list of available configurator option types.","operationId":"377d0fed185a7a3f3a39a139d6e02325","responses":{"200":{"description":"List of configurator option types","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"properties":{"default":{"type":"string"},"checkbox":{"type":"string"},"material":{"type":"string"},"numeral":{"type":"string"},"radio":{"type":"string"},"section":{"type":"string"},"select":{"type":"string"},"select_thumb":{"type":"string"},"text":{"type":"string"},"upload":{"type":"string"},"arrows":{"type":"string"},"patterns":{"type":"string"},"canvas":{"type":"string"},"repeat":{"type":"string"},"rotation":{"type":"string"}},"type":"object"}}},"type":"object"}}}},"401":{"description":"Unauthorized request"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-option/{id}

Retrieve details of a specific configurator option using its ID.

#### `GET /configurator-option/{id}`

**Request**

* **Endpoint:** `/configurator-option/{id}`
* **Method:** `GET`
* **Authentication:** Required

**Parameters**

* **id** (string): The unique identifier of the configurator option.

**Response**

A successful request returns a JSON object with details of the configurator option, including:

* **id** (string): The unique identifier of the option.
* **name** (string): The name of the option.
* **description** (string, optional): A description of the option.
* **type** (string): The type of option, e.g., "color", "size".
* **values** (array): The possible values for this option.

**Example Request**

```http
GET /configurator-option/12345 HTTP/1.1
Authorization: Bearer YOUR_ACCESS_TOKEN
Host: api.simplio3d.com
```

**Example Response**

```json
{
  "id": "12345",
  "name": "Color",
  "description": "Select the color for the product",
  "type": "color",
  "values": ["red", "green", "blue"]
}
```

**Notes**

* Ensure proper handling of the authentication token in your API calls.
* Use this endpoint to look up and validate option specifications for product configurators.
* Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Get configurator option by ID

> Get a specific configurator option by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Options","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionsResource":{"title":"Configurator Options Resource","description":"Configurator Options Resource Schema","required":["id","title","option_type","settings","parameter_list","order","created_at","updated_at"],"properties":{"id":{"description":"Unique identifier of the configurator option","type":"integer"},"configurator_id":{"description":"ID of the associated configurator","type":"integer"},"title":{"description":"Title of the configurator option","type":"string"},"option_type":{"description":"Type of the configurator option","type":"string"},"settings":{"description":"Settings of the configurator option in JSON format","type":"string"},"parameter_list":{"description":"List of parameters for the option","type":"string"},"order":{"description":"Order position of the option","type":"integer"},"created_at":{"description":"Timestamp when the option was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the option was last updated","type":"string","format":"date-time"},"created_by":{"description":"User who created the option","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-options/{id}":{"get":{"tags":["Configurator Options"],"summary":"Get configurator option by ID","description":"Get a specific configurator option by ID.","operationId":"ba817dcdd52186f7fefc1b34445b9f98","parameters":[{"name":"id","in":"path","description":"ID of the configurator option","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorOptionsResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Configurator option not found"},"500":{"description":"Server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-options

#### Fetch All Configurator Options

To retrieve all configurator options, use the `GET /configurator-options` endpoint. This endpoint returns a list of options available for product configuration.

**Request**

* **Method:** GET
* **Endpoint:** `/configurator-options`
* **Headers:**

  * `Authorization: Bearer <your_auth_token>`

  **Response**

  A successful response will return a JSON object with details such as option `id`, `name`, `description`, `type`, and `values`.

**Example Response**

```json
[
  {
    "id": "12345",
    "name": "Color",
    "description": "Select the color for the product",
    "type": "color",
    "values": ["red", "green", "blue"]
  },
  {
    "id": "67890",
    "name": "Size",
    "description": "Choose the size for the product",
    "type": "dropdown",
    "values": ["small", "medium", "large"]
  }
]
```

**Notes**

* Ensure that the authentication token is included in the request header to access the endpoint successfully.
* Use this data to validate and check available options for product configurators efficiently.
* Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Fetch all configurator options

> Get a list of configurator 3D assets models.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Options","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionsResource":{"title":"Configurator Options Resource","description":"Configurator Options Resource Schema","required":["id","title","option_type","settings","parameter_list","order","created_at","updated_at"],"properties":{"id":{"description":"Unique identifier of the configurator option","type":"integer"},"configurator_id":{"description":"ID of the associated configurator","type":"integer"},"title":{"description":"Title of the configurator option","type":"string"},"option_type":{"description":"Type of the configurator option","type":"string"},"settings":{"description":"Settings of the configurator option in JSON format","type":"string"},"parameter_list":{"description":"List of parameters for the option","type":"string"},"order":{"description":"Order position of the option","type":"integer"},"created_at":{"description":"Timestamp when the option was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the option was last updated","type":"string","format":"date-time"},"created_by":{"description":"User who created the option","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-options":{"get":{"tags":["Configurator Options"],"summary":"Fetch all configurator options","description":"Get a list of configurator 3D assets models.","operationId":"a0ca20f2e85eed6d6f24a27a651638c5","parameters":[{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"List of configurator options","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-options-variations

#### Retrieve a List of Configurator Option Variations

To retrieve a list of configurator option variations, you will need to make a GET request to the Simplio3D API endpoint designed for this purpose. Below is a brief explanation of how to interact with this endpoint:

**Endpoint:**

`GET /api/configurator-options-variations`

**Headers:**

* `Authorization: Bearer YOUR_AUTH_TOKEN`

**Response Format:**

The endpoint responds with a JSON array where each element contains details about a specific configurator option. Example structure of each item in the array:

* `id`: Unique identifier for the option.
* `name`: Name of the option.
* `description`: Brief description of the option.
* `type`: Type of input field (e.g., "color", "dropdown").
* `values`: An array of possible values.

Ensure to replace `YOUR_AUTH_TOKEN` with your actual authentication token and verify that your request headers are correctly set for successful interaction with the API.

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Retrieve a list of configurator option variations

> Get a list of configurator option variations.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Option Variations","description":"Configurator Option Variations"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionVariationsResource":{"title":"Configurator Option Variations Resource","description":"Schema for configurator option variations","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"title":{"type":"string"},"name":{"type":"string"},"settings":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-option-variations":{"get":{"tags":["Configurator Option Variations"],"summary":"Retrieve a list of configurator option variations","description":"Get a list of configurator option variations.","operationId":"1cad4c90a74d903aa141d4b88cea869b","parameters":[{"name":"configurator_option_id","in":"query","description":"The ID of the configurator option for which to retrieve variations.","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"List of configurator option variations","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionVariationsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"500":{"description":"Internal server error"}}}}}}
```

To set configurator options using a POST request in Simplio3D, ensure you include your Open API token in the request headers for authentication. Your request should contain the configurator option details in JSON format. Here's a sample structure:

```json
{
  "id": "option1",
  "name": "Color Selection",
  "description": "Choose your preferred color",
  "type": "dropdown",
  "values": ["Red", "Green", "Blue"]
}
```

Always verify that your API token is correctly placed in the headers for seamless interaction.

## Set configurator options using Open API token

> Set and save configurator options for a user token.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Options","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/configurator-options/set/new-options":{"post":{"tags":["Configurator Options"],"summary":"Set configurator options using Open API token","description":"Set and save configurator options for a user token.","operationId":"2563c42c83509ba0316ba9a0c4b8ab32","requestBody":{"required":true,"content":{"multipart/form-data":{"schema":{"required":["options"],"properties":{"options":{"description":"JSON formatted Configurator options override data.","type":"string"}},"type":"object"}}}},"responses":{"200":{"description":"Configurator options updated successfully","content":{"application/json":{"schema":{"properties":{"success":{"type":"boolean"},"message":{"type":"string"},"data":{"type":"string"}},"type":"object"}}}},"404":{"description":"Invalid or missing Open API Token ID","content":{"application/json":{"schema":{"properties":{"success":{"type":"boolean"},"message":{"type":"string"}},"type":"object"}}}},"500":{"description":"Unexpected server error","content":{"application/json":{"schema":{"properties":{"success":{"type":"boolean"},"message":{"type":"string"}},"type":"object"}}}}}}}}}
```

#### Using GET for Configurator Option Sets with OpenAPI

To retrieve all configurator option sets in Simplio3D, use a GET request. Ensure your Open API token is included in the headers for authentication. By sending the request to the appropriate endpoint, you will receive a JSON response containing all available configurator options.

## Get all configurator options sets

> Get all configurator options sets for the given configurator ID and user ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Options","description":"API Endpoints for managing configurator 3D asset models"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionsSetResource":{"title":"Configurator Options Set Resource","description":"Configurator Options Resource Schema","required":["id","options","created_at","updated_at"],"properties":{"id":{"description":"Unique identifier of the configurator options set","type":"integer"},"configurator_id":{"description":"ID of the associated configurator","type":"integer"},"options":{"description":"List of options in the set","type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionsSetResource"}},"created_at":{"description":"Timestamp when the options set was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the options set was last updated","type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-options/get/new-options":{"get":{"tags":["Configurator Options"],"summary":"Get all configurator options sets","description":"Get all configurator options sets for the given configurator ID and user ID.","operationId":"4e80518b98140f47a04739dcd81c78e3","responses":{"200":{"description":"List of configurator options sets","content":{"application/json":{"schema":{"properties":{"success":{"type":"boolean"},"message":{"type":"string"},"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionsSetResource"}}},"type":"object"}}}},"404":{"description":"Open API token not found"},"500":{"description":"Unexpected server error"}}}}}}
```

## The ConfiguratorOptionVariationsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorOptionVariationsResource":{"title":"Configurator Option Variations Resource","description":"Schema for configurator option variations","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"title":{"type":"string"},"name":{"type":"string"},"settings":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```

## The ConfiguratorOptionsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorOptionsResource":{"title":"Configurator Options Resource","description":"Configurator Options Resource Schema","required":["id","title","option_type","settings","parameter_list","order","created_at","updated_at"],"properties":{"id":{"description":"Unique identifier of the configurator option","type":"integer"},"configurator_id":{"description":"ID of the associated configurator","type":"integer"},"title":{"description":"Title of the configurator option","type":"string"},"option_type":{"description":"Type of the configurator option","type":"string"},"settings":{"description":"Settings of the configurator option in JSON format","type":"string"},"parameter_list":{"description":"List of parameters for the option","type":"string"},"order":{"description":"Order position of the option","type":"integer"},"created_at":{"description":"Timestamp when the option was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the option was last updated","type":"string","format":"date-time"},"created_by":{"description":"User who created the option","type":"string"}},"type":"object"}}}}
```


# Option Variations

Get a list of configurator option variations

## <mark style="color:green;">GET</mark> /configurator-option-variations

#### Retrieve a List of Configurator Option Variations

**Endpoint:**\
`GET /open-api/v1/configurator-option-variations`

**Description:**\
This endpoint retrieves all available variations for a specific configurator option. It provides detailed information about each variation, including attributes and available customization options.

**Request Parameters:**

* `configurator_id` (required): The unique identifier for the configurator.
* `option_id` (required): The unique identifier for the configurator option.

**Response Format:**\
Returns a JSON object containing an array of option variations.

**Example Response:**

```json
{
  "status": "success",
  "data": [
    {
      "variation_id": "string",
      "name": "string",
      "description": "string",
      "attributes": {
         "color": "string",
         "size": "string"
      },
      "available": true
    }
  ]
}
```

**Notes:**

* Ensure proper authentication headers are included in the request to access the endpoint.
* Check the response for the `status` key to verify if the retrieval was successful.

## Retrieve a list of configurator option variations

> Get a list of configurator option variations.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Option Variations","description":"Configurator Option Variations"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionVariationsResource":{"title":"Configurator Option Variations Resource","description":"Schema for configurator option variations","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"title":{"type":"string"},"name":{"type":"string"},"settings":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-option-variations":{"get":{"tags":["Configurator Option Variations"],"summary":"Retrieve a list of configurator option variations","description":"Get a list of configurator option variations.","operationId":"1cad4c90a74d903aa141d4b88cea869b","parameters":[{"name":"configurator_option_id","in":"query","description":"The ID of the configurator option for which to retrieve variations.","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"List of configurator option variations","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionVariationsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"500":{"description":"Internal server error"}}}}}}
```

## The ConfiguratorOptionVariationsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorOptionVariationsResource":{"title":"Configurator Option Variations Resource","description":"Schema for configurator option variations","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"title":{"type":"string"},"name":{"type":"string"},"settings":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Option Restrictions

Get a list of configurator option restrictions

####

## <mark style="color:green;">GET</mark> /configurator-option-restrictions

#### Simplio3D API: Configurator Option Restrictions (GET Endpoint)

The `configurator option restrictions` GET endpoint allows you to retrieve a list of options and their associated restrictions for product configurations.

**Endpoint**:\
`GET /open-api/v1/configurator-option-restrictions`

**Parameters**:

* `productId` (required): The ID of the product whose configuration options you want to retrieve.

**Response**:\
Returns a JSON object containing:

* `optionId`: The ID of the configuration option.
* `restrictedOptions`: A list of option IDs that are restricted when this option is chosen.

**Example Request**:

```http
GET /open-api/v1/configurator-option-restrictions?productId=12345
```

**Usage**:\
Use this endpoint to ensure that the user's selections adhere to the defined restrictions, providing a seamless and error-free configuration process.

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Retrieve a list of configurator option restrictions

> Get a list of configurator option restrictions.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Option Restrictions","description":"API Endpoints for managing configurator option restriction"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorOptionRestrictionsResource":{"title":"Configurator Option Restrictions Resource","description":"Schema for configurator option restrictions","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"settings":{"type":"string"},"note":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-option-restrictions":{"get":{"tags":["Configurator Option Restrictions"],"summary":"Retrieve a list of configurator option restrictions","description":"Get a list of configurator option restrictions.","operationId":"16a2abcbb8c889a83c3c3c0297449814","parameters":[{"name":"configurator_option_id","in":"query","description":"The ID of the configurator option for which to retrieve restrictions.","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"List of configurator option restrictions","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorOptionRestrictionsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"500":{"description":"Internal server error"}}}}}}
```

## The ConfiguratorOptionRestrictionsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorOptionRestrictionsResource":{"title":"Configurator Option Restrictions Resource","description":"Schema for configurator option restrictions","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"configurator_option_id":{"type":"integer"},"configurator_option_value":{"type":"string"},"settings":{"type":"string"},"note":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Price Groups

Managing configurator price groups

## <mark style="color:green;">GET</mark> /configurator-price-groups

### Retrieve a List of Configurator Price Groups

To retrieve a list of configurator price groups, you can use the following GET endpoint provided by the Simplio3D API:

#### Endpoint

```
GET /api/configurator-price-groups
```

#### Description

This endpoint retrieves a list of all price groups associated with the configurators available in the system. Each price group represents a set of pricing rules applied to a particular configurator.

#### Request

* **Method:** GET
* **URL:** `https://app.simplio3d.com/open-api/v1/configurator-price-groups`
* **Headers:**

  * `Authorization: Bearer <Your_API_Token>`

  #### Response

  A successful response returns a JSON object containing the list of configurator price groups:

  ```json
  {
    "priceGroups": [
      {
        "groupId": "1",
        "name": "Color Pricing",
        "description": "Calculate price by color"
      },
      {
        "groupId": "2",
        "name": "Width x Length Pricing",
        "description": "Calculate price by size"
      }
    ]
  }
  ```

  #### Notes

  * Ensure that you have the correct API token with sufficient permissions to access this endpoint.
  * The returned list will include each price group's unique identifier, name, and description.
  * Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

  For more detailed information, refer to the [Simplio3D API Documentation](https://docs.simplio3d.com).

## Retrieve a list of configurator price groups

> Get a list of configurator price groups.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Price Groups","description":"API Endpoints for managing configurator price groups"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorPriceGroupsResource":{"title":"Configurator Price Groups Resource","description":"Schema for configurator price groups","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"variable_type":{"type":"string"},"settings":{"type":"object"},"prices":{"type":"array","items":{"properties":{"amount":{"type":"number","format":"float"},"currency":{"type":"string"}},"type":"object"}},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-price-groups":{"get":{"tags":["Configurator Price Groups"],"summary":"Retrieve a list of configurator price groups","description":"Get a list of configurator price groups.","operationId":"c9ebc0bd57516a253bcde0870c943810","responses":{"200":{"description":"List of configurator price groups","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorPriceGroupsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have access"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-price-group/{configurator\_price\_group\_id}

#### Retrieve a Specific Configurator Price Group

This endpoint allows you to retrieve detailed information about a specific configurator price group by using its unique identifier. This can be useful for gaining insights into the pricing rules applied to a particular configurator within the system.

**Request**

* **Method:** GET
* **URL:** `https://app.simplio3d.com/open-api/v1/configurator-price-groups/{configurator_price_group_id}`
* **Headers:**
  * `Authorization: Bearer <Your_API_Token>`&#x20;

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Retrieve a specific configurator price group

> Get details of a specific configurator price group.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Price Groups","description":"API Endpoints for managing configurator price groups"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorPriceGroupsResource":{"title":"Configurator Price Groups Resource","description":"Schema for configurator price groups","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"variable_type":{"type":"string"},"settings":{"type":"object"},"prices":{"type":"array","items":{"properties":{"amount":{"type":"number","format":"float"},"currency":{"type":"string"}},"type":"object"}},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-price-groups/{configurator_price_group_id}":{"get":{"tags":["Configurator Price Groups"],"summary":"Retrieve a specific configurator price group","description":"Get details of a specific configurator price group.","operationId":"a9a0fe95223b8d20f666cd676d9fd5f1","parameters":[{"name":"configurator_price_group_id","in":"path","description":"The ID of the configurator price group to retrieve","required":true,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Configurator price group details retrieved successfully","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorPriceGroupsResource"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"404":{"description":"Configurator price group not found"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-price-groups/variables/list

#### Retrieve a List of Configurator Price Group Variables

This endpoint allows you to obtain a list of all the variables associated with a specific configurator price group, which can help in understanding the various dynamic factors affecting pricing.

**Request**

* **Method:** GET
* **URL:** `https://app.simplio3d.com/open-api/v1/configurator-price-groups/variables/list`
* **Headers:**
  * `Authorization: Bearer <Your_API_Token>`

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Retrieve a list of configurator price group variables

> Get a list of configurator price group variables.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Price Groups","description":"API Endpoints for managing configurator price groups"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorPriceGroupsResource":{"title":"Configurator Price Groups Resource","description":"Schema for configurator price groups","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"variable_type":{"type":"string"},"settings":{"type":"object"},"prices":{"type":"array","items":{"properties":{"amount":{"type":"number","format":"float"},"currency":{"type":"string"}},"type":"object"}},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-price-groups/variables/list":{"get":{"tags":["Configurator Price Groups"],"summary":"Retrieve a list of configurator price group variables","description":"Get a list of configurator price group variables.","operationId":"9637e4600514977f837d8dff656f7757","responses":{"200":{"description":"List of configurator price group variables","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorPriceGroupsResource"}}},"type":"object"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"403":{"description":"Forbidden - user does not have permission"},"500":{"description":"Internal server error"}}}}}}
```

## The ConfiguratorPriceGroupsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorPriceGroupsResource":{"title":"Configurator Price Groups Resource","description":"Schema for configurator price groups","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"title":{"type":"string"},"type":{"type":"string"},"variable_type":{"type":"string"},"settings":{"type":"object"},"prices":{"type":"array","items":{"properties":{"amount":{"type":"number","format":"float"},"currency":{"type":"string"}},"type":"object"}},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```

## The ConfiguratorResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorResource":{"title":"Configurator Resource","description":"Schema for configurator data","properties":{"id":{"type":"integer"},"name":{"type":"string"},"configurator_type":{"type":"string"},"configurator_template":{"type":"string"},"configurator_integration":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}}}
```


# Country

API endpoints for countries

To fetch all countries using the GET endpoint in Simplio3D OpenAPI, use the `/countries` endpoint. This request retrieves a list of all available countries in JSON format. Ensure that the request headers include the necessary authentication token if required by the API documentation.

## Fetch all countries

> Get a list of countries.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Country","description":"API Endpoints for countries"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"CountryResource":{"title":"Country Resource","description":"Schema for country data","properties":{"id":{"type":"integer"},"name":{"type":"string"},"iso2":{"type":"string"},"iso3":{"type":"string"},"phone_code":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/countries":{"get":{"tags":["Country"],"summary":"Fetch all countries","description":"Get a list of countries.","operationId":"3dcb1d8be840b49b7b333cccead16813","parameters":[{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/CountryResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```


# Share

Managing configurator share module

## <mark style="color:green;">GET</mark> /configurator-share

### Simplio3D API: Get List of Configurator Shares

#### Endpoint

* **HTTP Method**: `GET`
* **URL**: `/open-api/v1/configurator-share`

#### Description

This endpoint retrieves a list of all configurator shares available to the authenticated user.

#### Request Headers

* `Authorization`: Bearer token for authenticating the API request.

#### Response

* **Status Code**: `200 OK`
* **Response Body**:
  * An array of configurator share objects. Each object contains:

    * `id`: Unique identifier for the configurator share.
    * `name`: Name of the configurator.
    * `created_at`: Timestamp of when the share was created.
    * `updated_at`: Timestamp of the last update.

    #### Example

    **Request**

    ```
    GET /open-api/v1/configurator-share
    Authorization: Bearer <token>
    ```

    **Successful Response**

    ```json
    [
        {
            "id": "12345",
            "name": "Configurator Name",
            "created_at": "2023-05-01T12:00:00Z",
            "updated_at": "2023-06-01T12:00:00Z"
        },
        ...
    ]
    ```

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Get list of configurator shares

> Get all configurator shares.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Shares","description":"API Endpoints for managing configurator share"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorShareResource":{"title":"Configurator Share Resource","description":"Schema for configurator share","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"share_url":{"type":"string"},"enable_sidebar":{"type":"boolean"},"enable_ar":{"type":"boolean"},"dark_theme":{"type":"boolean"},"show_dimensions":{"type":"boolean"},"domain_name":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-share":{"get":{"tags":["Configurator Shares"],"summary":"Get list of configurator shares","description":"Get all configurator shares.","operationId":"5c832085a3eedd58b0d87b1a6e207e64","responses":{"200":{"description":"List of configurator shares retrieved successfully","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/ConfiguratorShareResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:green;">GET</mark> /configurator-share/{id}

#### Get Configurator Share by ID

The Simplio3D API provides a straightforward method to fetch the details of a specific configurator share using its unique identifier. This endpoint is beneficial when you need information on a particular configurator share without retrieving the entire list.

**Endpoint Overview**

**HTTP Method**: `GET`\
**Endpoint**: `/open-api/v1/configurator-share/{id}`

**Headers**

* `Authorization`: Bearer token for authenticating the API request. Ensure that the token has the necessary permissions to access the configurator share data.

**Parameters**

* `id`: The unique identifier of the configurator share you wish to retrieve. This is a path parameter and is required to access the specific share.

**Example Request**

Here's how you can make a request to fetch a configurator share by its ID:

```
GET /open-api/v1/configurator-share/12345
Authorization: Bearer <token>
```

**Response**

Upon successful retrieval, the API will respond with the following:

* **Status Code**: `200 OK`
* **Unauthorized:** 401
* **Configurator share not found:** 404
* **Internal server error:** 500

**NOTE:** Ensure you have the necessary authorization credentials (e.g., Bearer Token) to access this endpoint which is taken from the 'Share' tab encryption token found at the bottom of the page.

## Get configurator share by ID

> Get a specific configurator share by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Configurator Shares","description":"API Endpoints for managing configurator share"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"ConfiguratorShareResource":{"title":"Configurator Share Resource","description":"Schema for configurator share","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"share_url":{"type":"string"},"enable_sidebar":{"type":"boolean"},"enable_ar":{"type":"boolean"},"dark_theme":{"type":"boolean"},"show_dimensions":{"type":"boolean"},"domain_name":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/configurator-share/{id}":{"get":{"tags":["Configurator Shares"],"summary":"Get configurator share by ID","description":"Get a specific configurator share by ID.","operationId":"a2bf0be7592becb317bda462242059d7","parameters":[{"name":"id","in":"path","description":"ID of the configurator share","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Configurator share retrieved successfully","content":{"application/json":{"schema":{"$ref":"#/components/schemas/ConfiguratorShareResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Configurator share not found"},"500":{"description":"Internal Server Error"}}}}}}
```

## The ConfiguratorShareResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"ConfiguratorShareResource":{"title":"Configurator Share Resource","description":"Schema for configurator share","properties":{"id":{"type":"integer"},"configurator_id":{"type":"integer"},"share_url":{"type":"string"},"enable_sidebar":{"type":"boolean"},"enable_ar":{"type":"boolean"},"dark_theme":{"type":"boolean"},"show_dimensions":{"type":"boolean"},"domain_name":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Materials

Materials API Endpoints

### Simplio3D Materials API Endpoints Overview

The Simplio3D Materials API provides several endpoints to interact with material data for 3D models. Below is a summary of the available endpoints:

* **GET /materials**: Fetch a list of all available materials in the database.
* **GET /materials/{id}**: Retrieve details of a specific material by its ID.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;POST /materials**: Add a new material to the repository. Requires material details in JSON format.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;PUT /materials/{id}**: Update the details of an existing material identified by its ID. Requires updated material data in JSON format.
* <mark style="color:red;">**\[Dashboard API]**</mark>**&#x20;DELETE /materials/{id}**: Remove a material from the system by its ID.

These endpoints simplify the management of 3D materials in applications, ensuring seamless integration and customization.


# Materials

API endpoints for managing materials

## <mark style="color:green;">GET</mark> /materials

### Fetch All Materials

#### Endpoint

`GET open-api/v1/materials`

#### Description

This endpoint retrieves a comprehensive list of all available materials in the Simplio3D system.

#### Request

* **Method**: `GET`
* **URL**: `/api/materials`

#### Headers

| Name            | Type   | Description                               |
| --------------- | ------ | ----------------------------------------- |
| `Authorization` | String | Bearer token required for authentication. |

#### Response

* **Status Code**: `200 OK`

**Response Body**

The response will be a JSON object containing the following fields:

| Field       | Type  | Description                   |
| ----------- | ----- | ----------------------------- |
| `materials` | Array | An array of material objects. |

Each material object includes:

| Field  | Type   | Description                         |
| ------ | ------ | ----------------------------------- |
| `id`   | String | Unique identifier for the material. |
| `name` | String | Name of the material.               |

#### Example

```json
{
  "materials": [
  {
    "id": 1,
    "name": "Wood Texture",
    "material_file": "https://example.com/materials/wood.jpg",
    "category_id": 5,
    "texture_id": 2,
    "status": true,
    "material_type": "flat",
    "surface": "smooth",
    "bump": true,
    "color": "#FFFFFF",
    "opacity": 0.8,
    "specular": 0.5,
    "reflection": 0.0,
    "created_at": "2024-02-27T14:23:00Z",
    "updated_at": "2024-02-27T14:23:00Z",
    "created_by": "John Doe"
  }
    },
    {
  {
    "id": 2,
    "name": "Steel",
    "material_file": "https://example.com/materials/steel.jpg",
    "category_id": 5,
    "texture_id": 2,
    "status": true,
    "material_type": "glossy",
    "surface": "smooth",
    "bump": false,
    "color": "#FFFFFF",
    "opacity": 0.8,
    "specular": 0.5,
    "reflection": 0.3,
    "created_at": "2024-02-27T14:23:00Z",
    "updated_at": "2024-02-27T14:23:00Z",
    "created_by": "John Doe"
  }
      }
    }
  ]
}
```

#### Notes

* Ensure the correct authentication token is included in the request header to successfully access the endpoint.
* The properties object can include various attributes specific to the material type.

## Fetch all materials

> Get a list of materials.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Materials","description":"API Endpoints for managing materials"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"MaterialsResource":{"title":"Materials Resource","description":"Material object representation","properties":{"id":{"description":"Material ID","type":"integer"},"name":{"description":"Material name","type":"string"},"material_file":{"description":"Material file URL","type":"string","format":"uri"},"category_id":{"description":"Material category ID","type":"integer"},"texture_id":{"description":"Texture ID","type":"integer"},"status":{"description":"Material status (active/inactive)","type":"boolean"},"material_type":{"description":"Type of material","type":"string"},"surface":{"description":"Material surface type","type":"string"},"bump":{"description":"Bump mapping enabled","type":"boolean"},"color":{"description":"Material color","type":"string"},"opacity":{"description":"Opacity level","type":"number","format":"float"},"specular":{"description":"Specular reflection","type":"number","format":"float"},"reflection":{"description":"Reflection intensity","type":"number","format":"float"},"created_at":{"description":"Creation date","type":"string","format":"date-time"},"updated_at":{"description":"Last update date","type":"string","format":"date-time"},"created_by":{"description":"User who created the material","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/materials":{"get":{"tags":["Materials"],"summary":"Fetch all materials","description":"Get a list of materials.","operationId":"bf812f0e4532259fa82617dd3e020c84","parameters":[{"name":"per_page","in":"query","description":"Number of items per page (-1 for all)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Field to order by","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"category_id","in":"query","description":"Filter materials by category ID","required":false,"schema":{"type":"integer"}},{"name":"texture_id","in":"query","description":"Filter materials by texture ID","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/MaterialsResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:green;">GET</mark> /materials/{id}

#### Get Material by ID Endpoint

The `Get Material by ID` endpoint of the Simplio3D API allows you to retrieve detailed information about a specific material by its unique identifier. This endpoint is ideal for applications requiring precise details about materials used in 3D modeling or rendering.

**Endpoint**

```http
GET /open-api/v1/materials/{id}
```

**Path Parameters**

* `id` (integer): The unique identifier of the material to be retrieved.

**Request Headers**

* `Authorization`: Bearer token required to authenticate the request.

**Response**

The response includes the following attributes specific to the requested material:

* `id`: The unique identifier of the material.
* `name`: The name of the material.
* `material_file`: URL to the material's texture file.
* `category_id`: The ID of the category to which the material belongs.
* `texture_id`: The ID of the texture applied to the material.
* `status`: Boolean indicating whether the material is active.
* `material_type`: The type of material (e.g., flat, glossy).
* `surface`: Description of the material's surface finish.
* `bump`: Boolean indicating if the material has bump mapping.
* `color`: Hex color code representing the material's default color.
* `opacity`: The opacity level of the material.
* `specular`: The specular reflection component of the material.
* `reflection`: The reflection intensity of the material.
* `created_at`: ISO 8601 date and time representing when the material was created.
* `updated_at`: ISO 8601 date and time representing the last update.
* `created_by`: The name of the user who created the material.

**Example Request**

```http
GET /open-api/v1/materials/1
Authorization: Bearer {token}
```

**Example Response**

```json
{
  "id": 1,
  "name": "Wood Texture",
  "material_file": "https://example.com/materials/wood.jpg",
  "category_id": 5,
  "texture_id": 2,
  "status": true,
  "material_type": "flat",
  "surface": "smooth",
  "bump": true,
  "color": "#FFFFFF",
  "opacity": 0.8,
  "specular": 0.5,
  "reflection": 0.0,
  "created_at": "2024-02-27T14:23:00Z",
  "updated_at": "2024-02-27T14:23:00Z",
  "created_by": "John Doe"
}
```

**Notes**

* Ensure that the authentication token is valid and correctly included in the headers to access the endpoint successfully.

## Get material by ID

> Get a specific material by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Materials","description":"API Endpoints for managing materials"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"MaterialsResource":{"title":"Materials Resource","description":"Material object representation","properties":{"id":{"description":"Material ID","type":"integer"},"name":{"description":"Material name","type":"string"},"material_file":{"description":"Material file URL","type":"string","format":"uri"},"category_id":{"description":"Material category ID","type":"integer"},"texture_id":{"description":"Texture ID","type":"integer"},"status":{"description":"Material status (active/inactive)","type":"boolean"},"material_type":{"description":"Type of material","type":"string"},"surface":{"description":"Material surface type","type":"string"},"bump":{"description":"Bump mapping enabled","type":"boolean"},"color":{"description":"Material color","type":"string"},"opacity":{"description":"Opacity level","type":"number","format":"float"},"specular":{"description":"Specular reflection","type":"number","format":"float"},"reflection":{"description":"Reflection intensity","type":"number","format":"float"},"created_at":{"description":"Creation date","type":"string","format":"date-time"},"updated_at":{"description":"Last update date","type":"string","format":"date-time"},"created_by":{"description":"User who created the material","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/materials/{id}":{"get":{"tags":["Materials"],"summary":"Get material by ID","description":"Get a specific material by ID.","operationId":"c74355fb62a78e298fec06865c3e77dd","parameters":[{"name":"id","in":"path","description":"ID of the material","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MaterialsResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Material not found"},"500":{"description":"Internal Server Error"}}}}}}
```

## Get list of materials categories (without pagination)

> Get all materials categories without pagination.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Materials Categories","description":"API Endpoints for managing materials categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"MaterialsCategoriesResource":{"title":"Materials Categories Resource","description":"Materials Categories Model","properties":{"id":{"description":"ID of the material category","type":"integer"},"title":{"description":"Title of the material category","type":"string"},"description":{"description":"Description of the material category","type":"string"},"created_at":{"description":"Timestamp when the material category was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the material category was last updated","type":"string","format":"date-time"},"created_by":{"description":"Name of the creator","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/materials-categories/list":{"get":{"tags":["Materials Categories"],"summary":"Get list of materials categories (without pagination)","description":"Get all materials categories without pagination.","operationId":"ca6213cfd7e44a2b1c3c09e1a397d2eb","parameters":[{"name":"order_by","in":"query","description":"Column to order the results by (default: created_at)","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Order direction (asc or desc, default: desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/MaterialsCategoriesResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## The MaterialsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"MaterialsResource":{"title":"Materials Resource","description":"Material object representation","properties":{"id":{"description":"Material ID","type":"integer"},"name":{"description":"Material name","type":"string"},"material_file":{"description":"Material file URL","type":"string","format":"uri"},"category_id":{"description":"Material category ID","type":"integer"},"texture_id":{"description":"Texture ID","type":"integer"},"status":{"description":"Material status (active/inactive)","type":"boolean"},"material_type":{"description":"Type of material","type":"string"},"surface":{"description":"Material surface type","type":"string"},"bump":{"description":"Bump mapping enabled","type":"boolean"},"color":{"description":"Material color","type":"string"},"opacity":{"description":"Opacity level","type":"number","format":"float"},"specular":{"description":"Specular reflection","type":"number","format":"float"},"reflection":{"description":"Reflection intensity","type":"number","format":"float"},"created_at":{"description":"Creation date","type":"string","format":"date-time"},"updated_at":{"description":"Last update date","type":"string","format":"date-time"},"created_by":{"description":"User who created the material","type":"string"}},"type":"object"}}}}
```


# Material Categories

API endpoints for managing material categories

## <mark style="color:green;">GET</mark> /materials/categories

### Get List of Materials Categories (Without Pagination) Endpoint

**Endpoint**: `GET /open-api/v1/materials/categories`

#### Description

Fetches a complete list of material categories from the Simplio3D API without pagination.

#### Request Headers

* **Authorization**: Bearer token required.

#### Sample Request

```http
GET /open-api/v1/materials/categories HTTP/1.1
Host: api.simplio3d.com
Authorization: Bearer {your_api_token}
```

#### Response

* **Status Code**: `200 OK`
* **Body**: A JSON array containing the material categories available.
* ```json
  [
      {
          "id": "1",
          "name": "Wood"
      },
      {
          "id": "2",
          "name": "Metal"
      }
      // ... other categories
  ]
  ```

  #### Error Handling

  * **401 Unauthorized**: If the authorization token is missing or invalid.
  * **500 Internal Server Error**: For generic server-side errors.

## Get list of materials categories (without pagination)

> Get all materials categories without pagination.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Materials Categories","description":"API Endpoints for managing materials categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"MaterialsCategoriesResource":{"title":"Materials Categories Resource","description":"Materials Categories Model","properties":{"id":{"description":"ID of the material category","type":"integer"},"title":{"description":"Title of the material category","type":"string"},"description":{"description":"Description of the material category","type":"string"},"created_at":{"description":"Timestamp when the material category was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the material category was last updated","type":"string","format":"date-time"},"created_by":{"description":"Name of the creator","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/materials-categories/list":{"get":{"tags":["Materials Categories"],"summary":"Get list of materials categories (without pagination)","description":"Get all materials categories without pagination.","operationId":"ca6213cfd7e44a2b1c3c09e1a397d2eb","parameters":[{"name":"order_by","in":"query","description":"Column to order the results by (default: created_at)","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Order direction (asc or desc, default: desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/MaterialsCategoriesResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:green;">GET</mark> /materials/categories/{id}

#### Get a Specific Material Category by ID

```http
GET /open-api/v1/materials/categories/{id} HTTP/1.1
Host: api.simplio3d.com
Authorization: Bearer {your_api_token}
```

#### Response

* **Status Code**: `200 OK`
* **Materials Not Found:** 404
* **Unauthorized:** 401

## Get materials category by ID

> Get a specific materials category by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Materials Categories","description":"API Endpoints for managing materials categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"MaterialsCategoriesResource":{"title":"Materials Categories Resource","description":"Materials Categories Model","properties":{"id":{"description":"ID of the material category","type":"integer"},"title":{"description":"Title of the material category","type":"string"},"description":{"description":"Description of the material category","type":"string"},"created_at":{"description":"Timestamp when the material category was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the material category was last updated","type":"string","format":"date-time"},"created_by":{"description":"Name of the creator","type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/materials-categories/{id}":{"get":{"tags":["Materials Categories"],"summary":"Get materials category by ID","description":"Get a specific materials category by ID.","operationId":"28760292756b57702f58bdf2d6f6d659","parameters":[{"name":"id","in":"path","description":"ID of the materials category","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/MaterialsCategoriesResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Materials category not found"}}}}}}
```

## The MaterialsCategoriesResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"MaterialsCategoriesResource":{"title":"Materials Categories Resource","description":"Materials Categories Model","properties":{"id":{"description":"ID of the material category","type":"integer"},"title":{"description":"Title of the material category","type":"string"},"description":{"description":"Description of the material category","type":"string"},"created_at":{"description":"Timestamp when the material category was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the material category was last updated","type":"string","format":"date-time"},"created_by":{"description":"Name of the creator","type":"string"}},"type":"object"}}}}
```


# Textures

Managing textures using API endpoints

## Simplio3D Textures API Overview

Simplio3D provides a robust API for managing and manipulating textures in a 3D environment. Below are the key endpoints available in the Textures API:

### Endpoints

#### 1. `GET /textures`

* **Description**: Retrieve a list of all available textures.
* **Parameters**: None
* **Response**: JSON array of texture objects.

#### 2. `GET /textures/{textureId}`

* **Description**: Fetch details of a specific texture.
* **Parameters**:
  * `textureId`: The unique identifier for the texture.
* **Response**: JSON object containing texture details.

#### 3. <mark style="color:red;">\[Dashboard API]</mark> `POST /textures`

* **Description**: Add a new texture to the collection.
* **Parameters**:
  * `name`: String, required
  * `file`: Binary, required (texture image file)
* **Response**: JSON object with status and texture ID.

#### 4. <mark style="color:red;">\[Dashboard API]</mark> `PUT /textures/{textureId}`

* **Description**: Update details of an existing texture.
* **Parameters**:
  * `textureId`: The unique identifier for the texture.
  * Request body with updated texture details.
* **Response**: JSON object reflecting the updated texture.

#### 5. <mark style="color:red;">\[Dashboard API]</mark> `DELETE /textures/{textureId}`

* **Description**: Remove a texture from the system.
* **Parameters**:
  * `textureId`: The unique identifier for the texture.
* **Response**: JSON object confirming deletion.

Ensure to handle authentication and error responses as defined in the API documentation.


# Textures

Fetch texture(s)

## <mark style="color:green;">GET</mark> /textures

#### Fetch All Textures - GET Endpoint

The `Fetch All Textures` endpoint of the Simplio3D API provides a list of all available textures. This endpoint is useful for retrieving texture data that can be applied within the Simplio3D environment.

**URL**

```
GET /open-api/v1/textures
```

**Request Parameters**

* **Headers**:

  * `Authorization` : Bearer token for authentication (required)

  **Response**

  * **Status Code**: `200 OK`
  * **Body**: Returns a JSON array of objects, each representing a texture with the following properties:

    * `id`: Unique identifier for the texture.
    * `name`: Name of the texture.
    * `url`: Direct URL to the texture file.
    * `category`: Category to which the texture belongs.

    **Example Response**

    ```json
    [
      {
        "id": "texture_001",
        "name": "Wooden Texture",
        "url": "https://example.com/textures/wooden.jpg",
        "category": "Wood"
      },
      {
        "id": "texture_002",
        "name": "Metallic Texture",
        "url": "https://example.com/textures/metallic.jpg",
        "category": "Metal"
      }
    ]
    ```

  Use this endpoint to integrate texture data retrieval within your application. Ensure to handle authentication and JSON parsing to access the desired texture details.

## Fetch all textures

> Get a list of textures.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Textures","description":"API Endpoints for managing textures"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"TexturesResource":{"title":"Textures Resource","description":"Textures data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"texture_file":{"type":"string","format":"url"},"texture_thumbnail_50":{"type":"string","format":"url"},"texture_thumbnail_100":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/textures":{"get":{"tags":["Textures"],"summary":"Fetch all textures","description":"Get a list of textures.","operationId":"918768e7b7a9c227b07cd9f0fa25287c","parameters":[{"name":"per_page","in":"query","description":"Number of items per page (-1 for all items)","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Field to order by (default: created_at)","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"category_id","in":"query","description":"Filter by category ID","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/TexturesResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:green;">GET</mark> /textures/{id}

#### Get Texture by ID

```
GET /open-api/v1/textures/{id}
```

**Request Parameters**

* **Path Parameters**:
  * `Id`: The unique identifier of the texture (required).

## Get texture by ID

> Get a specific texture by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Textures","description":"API Endpoints for managing textures"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"TexturesResource":{"title":"Textures Resource","description":"Textures data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"texture_file":{"type":"string","format":"url"},"texture_thumbnail_50":{"type":"string","format":"url"},"texture_thumbnail_100":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/textures/{id}":{"get":{"tags":["Textures"],"summary":"Get texture by ID","description":"Get a specific texture by ID.","operationId":"04a22f530134507d67da2080f59ac6e7","parameters":[{"name":"id","in":"path","description":"ID of the texture","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/TexturesResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Texture not found"}}}}}}
```

## The TexturesResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"TexturesResource":{"title":"Textures Resource","description":"Textures data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"texture_file":{"type":"string","format":"url"},"texture_thumbnail_50":{"type":"string","format":"url"},"texture_thumbnail_100":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Texture Categories

Retrieve texture categories endpoints

## <mark style="color:green;">GET</mark> /textures-categories/list

#### Endpoint: Retrieve All Texture Categories

**HTTP Method:** `GET`

**URL:** `/open-api/v1/textures-categories/list`

**Description:** This endpoint retrieves a list of all texture categories available in the database **without applying pagination filters**. It returns a detailed list ensuring all categories are accessible in a single response.

**Response Format:**

* **Status Code:** `200 OK`
* **Content-Type:** `application/json`

**Response Example:**

```json
[
    {
        "id": "1",
        "name": "Wood"
    },
    {
        "id": "2",
        "name": "Metal"
    },
    {
        "id": "3",
        "name": "Stone"
    }
    // ... more categories
]
```

**Notes:**

* Ensure proper authorization headers are included if necessary.
* The response will include all categories, so handle large datasets appropriately in your application.

## Retrieve all texture categories without pagination

> Get all texture categories without pagination.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Textures Categories","description":"API Endpoints for managing textures categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"TexturesCategoriesResource":{"title":"Textures Categories Resource","description":"Textures category data","properties":{"id":{"type":"integer"},"title":{"type":"string"},"description":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/textures-categories/list":{"get":{"tags":["Textures Categories"],"summary":"Retrieve all texture categories without pagination","description":"Get all texture categories without pagination.","operationId":"fd9aac44d78db7d908bb05a8a968a93a","parameters":[{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/TexturesCategoriesResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /textures-categories/{id}

#### Get Texture Category by ID - GET Endpoint

**Endpoint:**

```
GET open-api/v1/textures-categories/{id}
```

**Description:**

Retrieve detailed information about a specific texture category using its unique ID.

**Authorization:**

Ensure appropriate authorization headers are included in the request.

**Parameters:**

* **id** (path parameter) - The unique identifier of the texture category.

**Response:**

Returns a JSON object containing detailed information about the texture category, such as its name, description, and any related metadata.

**Example Response:**

```json
{
    "id": "2",
    "name": "Metal",
    "description": "A category for all metal-based textures."
}
```

**Notes:**

* Handle any potential errors such as `404 Not Found` for invalid IDs.
* Consider rate limits and implement retry logic as appropriate.

## Get texture category by ID

> Get a specific texture category by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Textures Categories","description":"API Endpoints for managing textures categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"TexturesCategoriesResource":{"title":"Textures Categories Resource","description":"Textures category data","properties":{"id":{"type":"integer"},"title":{"type":"string"},"description":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/textures-categories/{id}":{"get":{"tags":["Textures Categories"],"summary":"Get texture category by ID","description":"Get a specific texture category by ID.","operationId":"8b5635edf89f4fc6e0a4d81bc7c11c29","parameters":[{"name":"id","in":"path","description":"ID of the texture category","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/TexturesCategoriesResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Texture category not found"}}}}}}
```

## <mark style="color:green;">GET</mark> /textures-categories

#### Get List of Texture Categories

The **Get List of Texture Categories** endpoint retrieves a complete list of available texture categories. Each category includes essential details such as the category's ID, name, and description.

**Endpoint**

```
GET /open-api/v1/textures-categories
```

**Example Request**

```http
GET /open-api/v1/texture-categories HTTP/1.1
Host: api.simplio3d.com
Authorization: Bearer YOUR_ACCESS_TOKEN
```

**Example Response**

```json
[
    {
        "id": "1",
        "name": "Wood",
        "description": "A category for all wood-based textures."
    },
    {
        "id": "2",
        "name": "Metal",
        "description": "A category for all metal-based textures."
    }
]
```

**Notes**

* Ensure a valid access token is provided in the request header.
* Handle potential errors, such as `401 Unauthorized` if the token is invalid or expired.
* Implement retry logic to handle rate limit errors if encountered.

## Get list of textures categories

> Get all textures categories.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Textures Categories","description":"API Endpoints for managing textures categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/textures-categories":{"get":{"tags":["Textures Categories"],"summary":"Get list of textures categories","description":"Get all textures categories.","operationId":"17c8efb40642d28b9ed1f52bf7978bca","parameters":[{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Column to sort by","schema":{"type":"string"}},{"name":"order","in":"query","description":"Sort order (asc/desc)","schema":{"type":"string"}}],"responses":{"200":{"description":"Successful response"},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```


# Vectors

API endpoints for managing vectors

#### Managing SVG Files with Simplio3D OpenAPI

Simplio3D OpenAPI provides robust tools for managing vector graphics, such as SVG files, through GET endpoints. This process is analogous to handling Textures, allowing for efficient asset management and seamless integration into your 3D applications.

**Key Endpoints**

* **GET /vectors**: Retrieve a list of all SVG files available in the system. This can be filtered to match specific criteria, improving resource management.
* **GET /vectors/{id}**: Fetch a specific SVG file by its unique identifier. This allows for precise extraction of the required vector asset for your application.

**Benefits**

* **Scalability**: Manage a large number of SVG assets efficiently.
* **Flexibility**: Easily fetch and integrate vectors into 3D scenes.
* **Consistency**: Ensure uniform handling of graphics similar to textures.

For further details, refer to the Simplio3D API documentation to explore additional features and functionalities.


# Vectors

API endpoints for managing vectors

## Fetch all vectors

> Get a list of vectors.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Vectors","description":"API Endpoints for managing vectors"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"VectorsResource":{"title":"Vectors Resource","description":"Vectors data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"vector_file":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"fill_colors":{"description":"Fill colors in JSON format","type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/vectors":{"get":{"tags":["Vectors"],"summary":"Fetch all vectors","description":"Get a list of vectors.","operationId":"a9f66968aa5b09c941d5a88176473c19","parameters":[{"name":"per_page","in":"query","description":"Number of items per page (-1 for all items)","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Field to order by (default: created_at)","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"category_id","in":"query","description":"Filter by category ID","required":false,"schema":{"type":"integer"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/VectorsResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## Get vector by ID

> Get a specific vector by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Vectors","description":"API Endpoints for managing vectors"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"VectorsResource":{"title":"Vectors Resource","description":"Vectors data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"vector_file":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"fill_colors":{"description":"Fill colors in JSON format","type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/vectors/{id}":{"get":{"tags":["Vectors"],"summary":"Get vector by ID","description":"Get a specific vector by ID.","operationId":"ecfb07f97009892e3756b06959b492c1","parameters":[{"name":"id","in":"path","description":"ID of the vector","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/VectorsResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Vector not found"}}}}}}
```

## The VectorsResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"VectorsResource":{"title":"Vectors Resource","description":"Vectors data response","properties":{"id":{"type":"integer"},"name":{"type":"string"},"vector_file":{"type":"string","format":"url"},"bump_file":{"type":"string","format":"url"},"category_id":{"type":"integer"},"fill_colors":{"description":"Fill colors in JSON format","type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}},"type":"object"}}}}
```


# Vector Categories

API endpoints for managing vector categories

## Retrieve all vector categories without pagination

> Get all vector categories without pagination.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Vectors Categories","description":"API Endpoints for managing vectors categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"VectorsCategoriesResource":{"title":"Vectors Categories Resource","description":"Vectors category data","properties":{"id":{"type":"integer"},"title":{"type":"string"},"description":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/vectors-categories/list":{"get":{"tags":["Vectors Categories"],"summary":"Retrieve all vector categories without pagination","description":"Get all vector categories without pagination.","operationId":"df36103be002bcbd0de65c5b880b69b3","parameters":[{"name":"order_by","in":"query","description":"Column to order results by (e.g., 'created_at')","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sorting order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"type":"array","items":{"$ref":"#/components/schemas/VectorsCategoriesResource"}}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal server error"}}}}}}
```

## Get vector category by ID

> Get a specific vector category by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Vectors Categories","description":"API Endpoints for managing vectors categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"VectorsCategoriesResource":{"title":"Vectors Categories Resource","description":"Vectors category data","properties":{"id":{"type":"integer"},"title":{"type":"string"},"description":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}},"paths":{"/api/open-api/v1/vectors-categories/{id}":{"get":{"tags":["Vectors Categories"],"summary":"Get vector category by ID","description":"Get a specific vector category by ID.","operationId":"ed45497a0e12906aba9524f5d8c5b662","parameters":[{"name":"id","in":"path","description":"ID of the vector category","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"$ref":"#/components/schemas/VectorsCategoriesResource"}}}},"401":{"description":"Unauthorized"},"404":{"description":"Vector category not found"}}}}}}
```

## Get list of vectors categories

> Get all vectors categories.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Vectors Categories","description":"API Endpoints for managing vectors categories"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/vectors-categories":{"get":{"tags":["Vectors Categories"],"summary":"Get list of vectors categories","description":"Get all vectors categories.","operationId":"4aa29dbca15964093fafdf79a06cdfef","parameters":[{"name":"per_page","in":"query","description":"Number of records per page (-1 for all records)","schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Column to sort by","schema":{"type":"string"}},{"name":"order","in":"query","description":"Sort order (asc/desc)","schema":{"type":"string"}}],"responses":{"200":{"description":"Successful response"},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## The VectorsCategoriesResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"VectorsCategoriesResource":{"title":"Vectors Categories Resource","description":"Vectors category data","properties":{"id":{"type":"integer"},"title":{"type":"string"},"description":{"type":"string"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"},"created_by":{"type":"string"}},"type":"object"}}}}
```


# Orders

Managing orders using API endpoints

### Overview of Simplio3D API Orders Endpoints

The Simplio3D API provides a set of endpoints that allow users to manage orders efficiently. Among these endpoints, the `GET /orders/{orderId}` endpoint is specifically designed to retrieve detailed information about a particular order by its unique ID. This enables users to monitor and track individual orders, ensuring they have access to up-to-date status and details of their transactions.

For more information on utilizing the Orders endpoints, please refer to the API documentation for additional details and examples.

## <mark style="color:green;">GET</mark> /orders/{orderId}

#### GET Endpoint: Retrieve an Order by ID

**Endpoint URL**

`GET open-api/v1/orders/{orderId}`

**Description**

Retrieve detailed information about a specific order using its unique identifier.

**Path Parameter**

* `orderId`: The unique identifier for the order you wish to retrieve.

**Response**

* `200 OK`: Successfully retrieved the order details.
* `404 Not Found`: No order was found with the provided ID.
* `500 Internal Server Error`: An error occurred on the server.

**Example Request**

```http
GET open-api/v1/orders/12345
```

**Example Response**

```json
{
  "orderId": "12345",
  "customerName": "John Doe",
  "orderDate": "2023-10-05",
  "status": "Shipped",
  "items": [
    {
      "productId": "A100",
      "quantity": 2
    }
  ],
  "totalAmount": 150.00
}
```

## Get order by ID

> Get a specific order by ID.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Orders","description":"API Endpoints for managing order"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/orders/{id}":{"get":{"tags":["Orders"],"summary":"Get order by ID","description":"Get a specific order by ID.","operationId":"eb76b24e9cf6682e8eed49c296501063","parameters":[{"name":"id","in":"path","description":"ID of the order","required":true,"schema":{"type":"integer","format":"int64"}}],"responses":{"200":{"description":"Order retrieved successfully"},"401":{"description":"Unauthorized"},"404":{"description":"Order not found"},"500":{"description":"Internal Server Error"}}}}}}
```

## <mark style="color:orange;">POST</mark> /orders

#### POST Endpoint: Create a New Order

**Endpoint URL**

`POST /orders`

**Description**

This endpoint allows you to create a new order in the system.

**Request Headers**

* `Content-Type: application/json`
* `Authorization: Bearer <token>`

**Request Body**

```json
{
  "customer_id": "string",
  "product_id": "string",
  "quantity": "integer",
  "shipping_address": {
    "street": "string",
    "city": "string",
    "postcode": "string",
    "country": "string"
  }
}
```

**Response**

* **200 OK**: Order created successfully

  ```json
  {
    "order_id": "string",
    "status": "string",
    "created_at": "datetime"
  }
  ```
* **400 Bad Request**: Invalid input data
* **401 Unauthorized**: Missing or invalid authentication token

**Example**

```bash
curl -X POST "https://api.simplio3d.com/orders" \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "customer_id": "12345",
  "product_id": "67890",
  "quantity": 2,
  "shipping_address": {
    "street": "123 Main St",
    "city": "Anytown",
    "postcode": "12345",
    "country": "USA"
  }
}'
```

## Create a new order

> Create a new order.

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Orders","description":"API Endpoints for managing order"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}},"schemas":{"OrdersResource":{"title":"Order Resource","description":"Order resource representation","properties":{"id":{"description":"Unique identifier for the order","type":"integer"},"price":{"description":"Total price of the order","type":"number","format":"float"},"status":{"description":"Status of the order","type":"string"},"customer_details":{"description":"Details of the customer","type":"object"},"configurator_summary":{"description":"Summary of the configurator options selected","type":"object"},"configurator_snapshot":{"description":"URL of the configurator snapshot image","type":"string","format":"url"},"configurator_print_map":{"description":"Array of URLs for configurator print maps","type":"array","items":{"type":"string","format":"url"}},"invoice_url":{"description":"URL for downloading the order invoice","type":"string","format":"url"},"order_shopify":{"description":"Shopify order ID if applicable","type":"string"},"created_at":{"description":"Timestamp when the order was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the order was last updated","type":"string","format":"date-time"}},"type":"object"}}},"paths":{"/api/open-api/v1/orders":{"post":{"tags":["Orders"],"summary":"Create a new order","description":"Create a new order.","operationId":"024b8d6bf20cbccde5a123cc95de147d","requestBody":{"required":true,"content":{"multipart/form-data":{"schema":{"required":["price","customer_details","configurator_summary","configurator_id"],"properties":{"price":{"description":"Configurator total amount","type":"number"},"customer_details":{"description":"Customer details in JSON format","type":"string"},"configurator_summary":{"description":"Configurator summary in JSON format","type":"string"},"configurator_snapshot":{"description":"Configurator snapshot image file","type":"string","format":"binary"},"configurator_print_map":{"description":"Array of print map image files","type":"array","items":{"type":"string","format":"binary"}}},"type":"object"}}}},"responses":{"201":{"description":"Order created successfully","content":{"application/json":{"schema":{"$ref":"#/components/schemas/OrdersResource"}}}},"400":{"description":"Invalid request parameters"},"401":{"description":"Unauthorized request"},"500":{"description":"Internal server error"}}}}}}
```

## <mark style="color:green;">GET</mark> /orders

#### GET Endpoint: Fetch All Orders

**Endpoint URL**

```
GET /open-api/v1/orders
```

**Description**

This endpoint retrieves a comprehensive list of all orders in the system, allowing users to manage and review order details efficiently.

**Query Parameters**

* **status** (optional): Filter orders by their status (e.g., `pending`, `completed`).
* **limit** (optional): Limit the number of orders returned.
* **offset** (optional): Specify the starting point for the list of orders returned.

**Headers**

* **Authorization**: Bearer token required for authentication.

**Response**

* **200 OK**: Successfully retrieved the list of orders.

  * **Content**: JSON array of order objects, each containing:

    * `order_id`: Unique identifier for the order.
    * `customer_name`: Name of the customer.
    * `total_amount`: Total amount of the order.
    * `status`: Current status of the order.
    * `created_at`: Timestamp of order creation.

  **Example Request**

  ```http
  GET /open-api/v1/orders?status=pending&limit=10 HTTP/1.1
  Host: api.simplio3d.com
  Authorization: Bearer your-token-here
  ```

  **Example Response**

  ```json
  [
      {
          "order_id": "12345",
          "customer_name": "John Doe",
          "total_amount": 250.00,
          "status": "pending",
          "created_at": "2023-09-12T10:20:30Z"
      },
      {
          "order_id": "12346",
          "customer_name": "Jane Smith",
          "total_amount": 135.75,
          "status": "completed",
          "created_at": "2023-09-11T08:15:00Z"
      }
  ]
  ```

  **Error Responses**

  * **401 Unauthorized**: Authentication failed; token missing or invalid.
  * **500 Internal Server Error**: An error occurred on the server.

## GET /api/open-api/v1/orders

> Fetch all orders

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"tags":[{"name":"Orders","description":"API Endpoints for managing order"}],"servers":[{"url":"https://app.simplio3d.com","description":"API Open Base URL"},{"url":""}],"security":[{"bearerAuth":[]}],"components":{"securitySchemes":{"bearerAuth":{"type":"http","scheme":"bearer","bearerFormat":"JWT","description":"Enter token in format (Bearer <your_token>)"}}},"paths":{"/api/open-api/v1/orders":{"get":{"tags":["Orders"],"summary":"Fetch all orders","operationId":"c8f29adea587435e7ae6bc3f61862859","parameters":[{"name":"per_page","in":"query","description":"Number of results per page","required":false,"schema":{"type":"integer"}},{"name":"page","in":"query","description":"Number of page","required":false,"schema":{"type":"integer"}},{"name":"order_by","in":"query","description":"Field to sort orders by","required":false,"schema":{"type":"string"}},{"name":"order","in":"query","description":"Sort order (asc or desc)","required":false,"schema":{"type":"string","enum":["asc","desc"]}},{"name":"configurator_id","in":"query","description":"Filter orders by specific configurator ID","required":false,"schema":{"type":"integer"}},{"name":"start_date","in":"query","description":"Filter orders created after this date","required":false,"schema":{"type":"string","format":"date"}},{"name":"end_date","in":"query","description":"Filter orders created before this date","required":false,"schema":{"type":"string","format":"date"}}],"responses":{"200":{"description":"Successful response","content":{"application/json":{"schema":{"properties":{"data":{"type":"array","items":{"properties":{"configurator":{"properties":{"id":{"type":"integer"},"configurator_name":{"type":"string"}},"type":"object"}},"type":"object"}},"pagination":{"properties":{"current_page":{"type":"integer"},"per_page":{"type":"integer"},"total":{"type":"integer"},"last_page":{"type":"integer"},"next_page_url":{"type":"string","nullable":true},"prev_page_url":{"type":"string","nullable":true}},"type":"object"}},"type":"object"}}}},"401":{"description":"Unauthorized"},"500":{"description":"Internal Server Error"}}}}}}
```

## The OrdersResource object

```json
{"openapi":"3.0.0","info":{"title":"Simplio3D-Open REST API","version":"1.0.0"},"components":{"schemas":{"OrdersResource":{"title":"Order Resource","description":"Order resource representation","properties":{"id":{"description":"Unique identifier for the order","type":"integer"},"price":{"description":"Total price of the order","type":"number","format":"float"},"status":{"description":"Status of the order","type":"string"},"customer_details":{"description":"Details of the customer","type":"object"},"configurator_summary":{"description":"Summary of the configurator options selected","type":"object"},"configurator_snapshot":{"description":"URL of the configurator snapshot image","type":"string","format":"url"},"configurator_print_map":{"description":"Array of URLs for configurator print maps","type":"array","items":{"type":"string","format":"url"}},"invoice_url":{"description":"URL for downloading the order invoice","type":"string","format":"url"},"order_shopify":{"description":"Shopify order ID if applicable","type":"string"},"created_at":{"description":"Timestamp when the order was created","type":"string","format":"date-time"},"updated_at":{"description":"Timestamp when the order was last updated","type":"string","format":"date-time"}},"type":"object"}}}}
```


# Configurator Parameter Overrides

Update Logic Documentation

### Purpose

This documentation explains how the system dynamically **overrides parameters** in a configurator’s `parameter_list` based on **API user input**. The logic ensures only the necessary fields are updated without breaking unrelated configuration data.

***

### 🔑 Trigger Conditions

Overrides are applied **only if all** the following are true:

1. `open_api_for_user = true` (passed as request attribute).
2. Matching override data exists in the **options field** of the `open_api_tokens` table.
3. The current configurator option has a **matching ID** in the `parameter_list`.

***

### 📦 Data Source

Override data is stored in the `options` column of the **open\_api\_tokens** table as a JSON object.

**Example structure:**

```json
{
  "1400": {
    "id": -47801593,
    "model_id": 606,
    "material_id": 600,
    "material_category_id": 113
  },
  "1401": {
    "id": -18512702,
    "model_id": 606,
    "material_id": 603,
    "material_category_id": 114
  },
  "1402": {
    "id": -52272568,
    "selected": false
  },
  "1403": {
    "id": -17245477,
    "text_value": "Coffee time",
    "custom_color": true,
    "text_font_size": "52",
    "text_font_family": "Birthstone Bounce",
    "text_color_category_id": -1
  }
}

```

### 🧠 Option-Type-Based Logic

| **Option Type**                                | **Fields Updated**                                                                           | **Notes**                                              |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| select, radio, checkbox, select\_thumb, arrows | `selected`                                                                                   | Set `selected = true` when `option.id == override.id`. |
| material                                       | `model_id`, `material_id`, `material_category_id`                                            | Replaces full material info when IDs match.            |
| text                                           | `text_value`, `custom_color`, `text_font_size`, `text_font_family`, `text_color_category_id` | Used for custom text overrides.                        |
| numeral                                        | `numerical_default`                                                                          | Updates quantity or numeric inputs.                    |
| patterns                                       | *(n/a)*                                                                                      | No updates; reserved for future extension.             |
| default                                        | *(n/a)*                                                                                      | No action taken.                                       |

***

### 📌 Example Use Case

**Overriding configurator options with Open API Token data**

Stored JSON in `options` column:

```json
{
  "1445": {
    "id": -16245477,
    "numerical_default": 3
  },
  "1403": {
    "id": -17245477,
    "text_value": "Coffee time",
    "custom_color": false,
    "text_font_size": "52",
    "text_font_family": "Birthstone Bounce",
    "text_color_category_id": -1
  }
}
```

***

### Override Logic (by Type)

#### 1. Select, Radio, Checkbox, Select\_Thumb, Arrows

```php
$option['selected'] = ($option['id'] === $overrideData['id']);
```

#### 2. Material

```php
if ($option['id'] === $overrideData['id']) {
    $option['model_id']             = $overrideData['model_id'] ?? $option['model_id'];
    $option['material_id']          = $overrideData['material_id'] ?? $option['material_id'];
    $option['material_category_id'] = $overrideData['material_category_id'] ?? $option['material_category_id'];
}
```

#### 3. Text

```php
if ($option['id'] === $overrideData['id']) {
    $option['text_value']             = $overrideData['text_value'] ?? $option['text_value'];
    $option['custom_color']           = $overrideData['custom_color'] ?? $option['custom_color'];
    $option['text_font_size']         = $overrideData['text_font_size'] ?? $option['text_font_size'];
    $option['text_font_family']       = $overrideData['text_font_family'] ?? $option['text_font_family'];
    $option['text_color_category_id'] = $overrideData['text_color_category_id'] ?? $option['text_color_category_id'];
}
```

#### 4. Numeral

```php
if ($option['id'] === $overrideData['id'] && isset($overrideData['numerical_default'])) {
    $option['numerical_default'] = $overrideData['numerical_default'];
}
```

#### 5. Patterns

No override logic is applied.

#### 6. Default

No action is taken.

***

### 📌 Example API Request

**Endpoint:**

```
POST /api/open-api/v1/configurator-options/set/new-options
```

**Body (form-data):**

```
options = {"1436":{"id":-47801593,"model_id":606,"material_id":600,"selected_parts":["Rugby_Ball"]}}
```

***

### 🔄 Example API Response

```json
{
  "data": "http://simp3d.local/configurator/share/fc34308a4984b8d65e9d3dd0538feab4/web/eyJpdiI6Ii9ideCoyRU80ejBLUVJvRjI4U3hxZFE9PSIsInZhbHVlIjoiRzJKTU0...",
  "success": true,
  "message": "Configurator options updated successfully."
}
```

The `data` key contains a **shareable URL** that loads the configurator with the applied overrides.

***

### ✅ Summary

* Override logic is **modular per option\_type**.
* Supports **external control** via API tokens.
* Ensures **data validation** before applying overrides.
* Prevents breaking the structure or overriding unrelated parameters.


# Web SDK

Web SDK API documentation

### Overview

The **Simplio3D Headless Web SDK** is an enterprise-grade integration layer designed to extend the capabilities of the Simplio3D platform into fully customized digital experiences.

**It enables organizations to:**

* Build fully bespoke configuration interfaces
* Implement CPQ-style workflows
* Integrate 3D configuration into complex commerce ecosystems
* Control state, pricing, and user interactions programmatically
* Orchestrate advanced backend-driven configuration logic

**This SDK specification is built on top of publicly documented Simplio3D capabilities, including:**

* Share-based embedding
* Configurator & Viewer products
* Options, restrictions, and pricing systems
* Forms and order workflows
* Open API & Partner API integrations

It provides a structured client-side API layer designed for scalability, available for **Pro** and **Enterprise** deployments.

### Why Simplio3D SDK

Simplio3D provides a powerful visual configuration engine.\
However, enterprise use cases often require:

* Custom UI/UX standards
* Guided selling workflows
* Advanced pricing presentation
* CRM/ERP synchronization
* Multi-step configuration processes
* External validation logic
* Headless commerce integration

This SDK bridges that gap by separating:

**Presentation layer (your UI)**\
from\
**Rendering & configuration engine (Simplio3D)**

### Architectural Model

The SDK follows a layered architecture:

#### 1. Rendering Layer

Simplio3D configurator or viewer embedded via secure iframe.

#### 2. Client API Layer

A standardized JavaScript interface that provides:

* `setOption()`
* `setText()`
* `setMaterial()`
* `setNumeral()`
* `getCurrentState()`
* `takeScreenshot()`
* `submit()`
* event subscriptions (`onChange`, `onPriceChange`, etc.)

#### 3. Backend Integration Layer (Recommended)

Your backend integrates with:

* Simplio3D Open API
* Simplio3D Partner API
* Your own pricing engines
* ERP / CRM systems
* E-commerce platforms

This separation enables enterprise scalability and long-term maintainability.

### Core Capabilities

#### Configuration Control

Programmatically control all option types including:

* Variant selectors
* Materials
* Text inputs
* Numeric inputs
* Upload blocks
* Pattern & canvas blocks

#### State Management

* Retrieve full configuration state
* Persist and restore configurations
* Synchronize UI and renderer

#### Pricing Intelligence

* Subscribe to real-time price changes
* Access pricing breakdown
* Integrate with external pricing engines

#### Order Workflows

* Validate form inputs
* Submit configurations
* Capture structured order receipts

#### Media & Output

* Generate high-resolution screenshots
* Control camera presets
* Trigger AR experiences

#### Commerce Integrations

Designed to integrate cleanly with:

* WooCommerce
* Shopify
* Headless commerce platforms
* Custom checkout flows


# Change Log

Check the documentation change history

**Transperancy Material** - work in progress

**\[Restriction examples] Restriction with toggle option block** - work in progress

**Javascript Software Development Kit** - work in progress

**API Reference Update /patterns** - work in progress

**API Reference Update /canvas** - work in progress

**API Reference Update /SVG** - work in progress

**Material Block - Pick Color Tool Update** - work in progress

**Updates in Text Settings** - work in progress

**Canvas Option Block** - work in progress

**Email Settings/Edit subject line** - work in progress

**Edit 'Total Price'** - work in progress

**Duplicate/Copy Option blocks** - work in progress

**\[Restrictions] Differences between direct and 'dummy' restrictions** - work in progress

**\[Email Settings] App Password for Outlook** - work in progress

**Orders** - work in progress

**Inherit Normal Map in Custom Colors** - work in progress

**AO (Ambient Occlusion) for light and shadows** - work in progress

**Apply watermark** - work in progress

**Use Tail Texture** - work in progress

**Updates on WooCommerce** - <mark style="color:green;">released</mark> 8/10/2025 - [link](/integrations/woocommerce)

**Materials/SVG** - <mark style="color:green;">released</mark> 3/10/2025 - [link](/learning-the-app/materials/svg)

**Load Product Templates** - <mark style="color:green;">released</mark> 3/10/2025 - [link](/learning-the-app/products/load-product)

**'Show dimensions' check button in Share tab** - <mark style="color:green;">released</mark> 3/10/2025 - [link](/learning-the-app/products/share)

**Notes in 'Section' block** - <mark style="color:green;">released</mark> 3/10/2025 - [link](/learning-the-app/products/create-options/sections)

**\[Restrictions] Hide option block** - <mark style="color:green;">released</mark> 2/09/2025 - [link](/learning-the-app/products/create-options/restrictions/how-to-apply-dummy-blocks-for-more-advanced-restrictions)

**Materials - Normal Map - Inherit Update** - <mark style="color:green;">released</mark> 26/08/2025 - [link](/learning-the-app/materials/texture-and-normal-map-limits)

**Patterns Option Block** - <mark style="color:green;">released</mark> 20/08/2025 - [link](/learning-the-app/products/create-options/patterns)

**Shopify Update** - <mark style="color:green;">released</mark> 5/06/2025 - [link](/integrations/shopify)

**Woocommerce Update** - <mark style="color:green;">released</mark> 5/06/2025 - [link](/integrations/woocommerce/redirect-to-checkout)

**3D Model Versions** - <mark style="color:green;">released</mark> 29/05/2025 - [link](/learning-the-app/products/add-3d-models/3d-model-versions)

**Update your payment details** - <mark style="color:green;">released</mark> 22/05/2025 - [link](/learning-the-app/my-account)

**'Show dimensions' in Numeral option block** - <mark style="color:green;">released</mark> 14/05/2025 - [link](/learning-the-app/products/create-options/numeral)

**Tax and Company Name** - <mark style="color:green;">released</mark> 9/05/2025 - [link](/learning-the-app/my-account)

**Save print** - <mark style="color:green;">released</mark> 29/04/2025 - [link](/learning-the-app/products/create-options/upload)

**3D file too large** - <mark style="color:green;">released</mark> 29/04/2025 - [link](/getting-started/prepare-3d-models)

**Documentation release V1.01.00** - <mark style="color:green;">released</mark> 16/04/2025


