Embed Sculpteo Tools onto your website

The goal of this tutorial is to allow you to embed windows from the Sculpteo site directly onto yours to allow you to give the option of 3D printing to your customers. The tools are given with a 'White Label' so that they can better integrate with your company's inherent brand. There's no need to be a professional developer in order to follow this guide, these tutorials were created to allow you to quickly and easily place our tools onto your site.

There are different solutions available, depending on what you're looking to accomplish:


Embedding a 3D Gallery

Embedding Sculpteo's 3D gallery on your site allows users to visualize and choose from a multitude of models on the same page before making their choice of purchase.

Embedding a 3D Gallery or a shop from Sculpteo

Sculpteo's gallery of 3D models easily integrates to your site using an iFrame (an HTML element which can be copy-pasted into any site). The only development necessary is generating the iFrame and placing it into the code of your website where you see fit.

The following section will generate the code and a visualization of the iFrame you can then copy-paste into your site:

Generate the code for your iFrame in just a few clicks Fenêtre embarquée






Several parameters are modifiable:

Designer

In order to limit the number of 3D models that will be displayed, you have the option of choosing the 3D models created by a single designer.

If you're looking to display all of the models in your public gallery, simply place your username where it says "designer". In the previous example, the iFrame was created using the designs from designers "Particule14" and "Sculpteo_designs". Contrarily, if you would not like to choose a particular designer, place "All" in the designer category and all of the public 3D designs on Sculpteo.com will be loaded by default.

If you're interested in using the 3D models of another designer shop, the name and URL of your iFrame change only slightly. You are able to create a link directly to the designer shop of your choice by following the interactive tool in the menu on the right, which is illustrated in the image below (click on it for more details).

embed shop

Height and Width

You are able to modify the size of your embedded gallery in order to adapt it to your website. The height and width parameters can be changed according to a pixel (px) size or a percentage (%).

More 3D models will be loaded per line as the width of your viewer is increased. If your boutique includes more 3D models than can be included in a single viewer, a scroll bar will be included to allow the viewer to see all of the designs.

Action after Click

There are a couple different windows that can be opened when a customer clicks on an item in your gallery. You can decide to do nothing, to open the model in our 3D viewer, or to open a product page window, as described in the next paragraph, with no need to do the described development.

Theme

If the default colors don't match your webdesign scheme, you are able to create your own themes in order to customize your gallery before embedding it on your site.

In the previous example, "Theme 1" was using "coek5mZHYRsJ68B2" as its theme identifier and "Theme 2" was using "c7PghdDYHnunbsSh". If a theme is not identified, the default Sculpteo theme will be chosen.

Sorting

If you would like to sort the 3D models in your embedded gallery in a particular fashion, add the parameter "order_by" and one of the following commands: "timestamp" (to sort by upload date) or "rate" (to sort by rating).

Keep in mind that if a parameter is not given, the user will have a choice as to how the models are sorted.

Consult the technical documentation on embedded galleries for more information.

Embed a 3D gallery from 3DPCase

You are also able to embed a "White Label" version of the 3DPCase shop on your site. Just like the Sculpteo gallery, you do not need to know how to code any more than adding a line of HTML code into that of your website. Though you may need a second line of Javascript in order to open an overlaying window.

To create the embed code for your 3DPCase boutique, consult our interactive tool on the 3DPCase site. You'll be able to generate the embed code depending on the choices you make within that section of the site. The code can then be tested in order to visualize the result before embedding on your site.

For more control over the personalization of your 3DPCase boutique, you have the option of creating a graphic theme and curating the list of cases.

Embed a product window

In many cases you do not need to load a plethora of cases if there is only one that you're interested in including on your site. Embedding a product window allows you to include one model in particular for both purchase and embedding.

Embedding the product window on your webpage

Just like the boutique embed process, embedding a product window utilizes an iFrame (an HTML element destined for simple insertion on a webpage).

The following box will allow you to quickly generate the iFrame code which you will then be able to directly integrate into your site:

Create a product window iFrame Fenêtre embarquée






The following parameters are modifiable:

UUID

It is important to specify the correct UUID (Universal Unique IDentifier) associated with your desired 3D model on Sculpteo. The UUID is what allow the iFrame to display the correct model on our site.

How do you find the UUID of a 3D model? Head over to the product page of the 3D model you're interested in and take a look at the URL of the page. That object's UUID is the 8 letters and numbers situated between the name of the design and the question mark (?). Here's an example:
//www.sculpteo.com/en/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Height and Width

You are able to modify the size of your embedded gallery in order to adapt it to your website. The height and width parameters can be changed according to a pixel (px) size or a percentage (%).

More 3D models will be loaded per line as the width of your viewer is increased. If your boutique includes more 3D models than can be included in a single viewer, a scroll bar will be included to allow the viewer to see all of the designs.

Saving

The 'Save' button allows you to save your personalized 3D model on a Sculpteo account for later purchase. If you're embedding a "White Label" version of the page, you'll probably want to remove the save function. To accomplish that, add the parameter "no_save" in the code of the iFrame and give it a value of "1".

The default setting allows the saving of your designs, thus no additional parameter will need to be added.

Scrolling

If the height of the embed window is not large enough to show the entire product page, a scrolling bar will be automatically included. This bar can be hidden by adding the parameter "scrolling" with a value of "no".

The default setting will automatically include scrolling bars on windows which are too small.

Consult the technical documentation for Embedded product windows for more information.


Once the user will click on order button, it will be added to Sculpteo cart and the page described in the third section will appear, with no need to do the described development.

Embed an Overlaying Product Window on your page

Instead of loading an iFrame which is inserted into your page, you have the option of an iFrame which will hover above your page using an overlay box (an HTML element which allows objects to be superimposed above a given webpage). This is particularly interesting for those who do not want to worry about the size of the embedded page, though the final rendering is often slightly different given this method.

The following box will quickly generate the HTML code and a visual for an overlaying product window that you can embed on your webpage:

Generate the code for a Product Overlay window Fenêtre embarquée






The following parameters are modifiable:

UUID

It is important to specify the correct UUID (Universal Unique IDentifier) associated with your desired 3D model on Sculpteo. The UUID is what allow the iFrame to display the correct model on our site.

How do you find the UUID of a 3D model? Head over to the product page of the 3D model you're interested in and take a look at the URL of the page. That object's UUID is the 8 letters and numbers situated between the name of the design and the question mark (?). Here's an example:
//www.sculpteo.com/en/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Onsave, onorder, onclose

Three parameters which were not in the example can also be added:
- "onsave" allows you to modify the save function (in javascript)
- "onorder" allows you to modify the order function (again, in javascript)
- "onclose" allows you to modify what happens after the overlay is closed (in javascript)

Adding each/any of these parameters is optional.

Consult our technical documentation for Overlay Boxes for more information.

Embedding the Purchase Module

In some cases, particularly for mobile applications, you may not want to allow the user to utilize each of Sculpteo's customization tools - it may be more advantageous to open the order and payment page directly. Embedding the purchase module allows your customers to purchase and pay for the objects without ever leaving your website.

Embed the Purchase Module on your page

Sculpteo's purchase module can be embedded directly into your site using an iFrame (an HTML element specifically designed for easy webpage insertion).

The following box will allow you to quickly generate the iFrame code which you will then be able to directly integrate into your site:

Generate a Purchase Module iFrame Fenêtre embarquée






The following parameters are modifiable:

UUID

It is important to specify the correct UUID (Universal Unique IDentifier) associated with your desired 3D model on Sculpteo. The UUID is what allow the iFrame to display the correct model on our site.

How do you find the UUID of a 3D model? Head over to the product page of the 3D model you're interested in and take a look at the URL of the page. That object's UUID is the 8 letters and numbers situated between the name of the design and the question mark (?). Here's an example:
//www.sculpteo.com/en/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Height and Width

You are able to modify the size of your embedded gallery to your liking. The height and width parameters can be changed according to a pixel (px) size or a percentage (%).

If the size of your viewer is not large enough to show the whole checkout page, a set of scrolling bars will be included in the viewer.

Version

If you're developing a mobile application, you have the possibility of embedding the mobile version of the purchase module, which is better adapted for mobile than the 'Classic' setting.

To do so, you just need to change the URL from "www.sculpteo.com/..." to "m.sculpteo.com/...".

Embed an overlaying purchase module on your site

Instead of loading an iFrame which is inserted into your page, you have the option of a window which will hover above your page using an overlay box (an HTML element which allows objects to be superimposed above a given webpage). This is particularly interesting for those who don't want to worry about the size of the viewer they will be embedding, though the final rendering is often slightly different given this method.

The following box will quickly generate the HTML code and a visual for an overlaying purchase module that you can embed on your webpage:

Generate the code for an overlaying purchase module Fenêtre embarquée






Only one parameter can be changed for overlaying product modules:

UUID

It is important to specify the correct UUID (Universal Unique IDentifier) associated with your desired 3D model on Sculpteo. The UUID is what allow the iFrame to display the correct model on our site.

How do you find the UUID of a 3D model? Head over to the product page of the 3D model you're interested in and take a look at the URL of the page. That object's UUID is the 8 letters and numbers situated between the name of the design and the question mark (?). Here's an example:
//www.sculpteo.com/en/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Embed our 3D viewer

Sculpteo's 3D viewer is a window which allow to display a 3D rendering of any 3D design uploaded on our website. It is available by default in the product window, though the viewer can also be embedded separately to allow customers the ability to visualize the 3D designs before ordering them in physical form.

The following box will allow you to quickly generate the iFrame code for our 3D viewer which you will then be able to directly integrate into your site:

Generate the code for an embeddable 3D viewer Fenêtre embarquée






The following parameters are modifiable:

UUID

It is important to specify the correct UUID (Universal Unique IDentifier) associated with your desired 3D model on Sculpteo. The UUID is what allow the iFrame to display the correct model on our site.

How do you find the UUID of a 3D model? Head over to the product page of the 3D model you're interested in and take a look at the URL of the page. That object's UUID is the 8 letters and numbers situated between the name of the design and the question mark (?). Here's an example:
//www.sculpteo.com/en/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Height and Width

You are able to modify the size of your embedded boutique to your liking. The height and width parameters can be changed according to a pixel (px) size or a percentage (%).

Action after Click

There are a couple different windows that can be opened when a customer clicks on the 3D viewer. You can decide to do nothing, but you can also decide to open a product page window or the designer shop.

Toolbar

The toolbar which will appear at the bottom of the 3D viewer will allow for precise rotation and control over the computer language the user prefers for the 3D design. However for a "White Label" integration of the viewer, you'll likely want to remove this bar. To remove the bar simply add the parameter "panel" and give it a value of "0".

Background

You are able to change the background color of the 3D viewer to the color of your choice to better integrate it with the background of your site (for example). To accomplish this, add the parameter "bgcolor" and give it the hexadecimal value of the color you want (for example, if you're looking for a seafoam bubble color, go for "41A4D9").

Consult the technical documentation for 3D viewers for more information, particularly if you're looking for a more advanced integration.


This is also possible to find the iFrame code directly on product page. You just need to click on 3D viewer button Partager to get the code to add on your website, as it is shown bellow (click on the picture for more details).

Générer code viewer 3D



Technical Documentation

Are you an Experienced Developer?
Explore the technical documentation for our APIs





×