Embarquer les outils de Sculpteo dans votre site internet

Le but de ce tutoriel est de vous permettre d'embarquer certaines fenêtres du site de Sculpteo directement dans votre site internet afin de proposer notre service d'impression 3D à vos clients, le tout en marque blanche. Nul besoin d'être un développeur confirmé pour utiliser nos outils embarqués, ce tutoriel est là pour vous faciliter la tâche afin que vous obteniez rapidement le code à insérer dans votre page web.

Différentes solutions sont disponibles en fonction de ce que vous souhaitez faire :


Embarquer une galerie 3D

Embarquer la galerie 3D de Sculpteo vous permet d'afficher plusieurs modèles 3D sur la même page afin que l'utilisateur puisse en choisir un pour le visualiser et le commander.

Embarquer une galerie 3D ou une boutique de Sculpteo

La galerie de modèles 3D de Sculpteo s'intègre facilement à votre site à l'aide d'un iFrame, élément HTML dont le but est l'insertion d'une page web dans une autre. Le seul développement nécessaire est de générer le code de l'iFrame pour le placer ensuite dans le code de votre page, à l'endroit où vous voulez que la fenêtre soit affichée.

Le cadre suivant vous permet de générer rapidement ce code et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'iFrame à intégrer dans votre site internet Fenêtre embarquée






Plusieurs paramètres sont modulables :

Designer

Afin de limiter le nombre de modèles 3D affichés, vous avez la possibilité de sélectionner les modèles 3D d'un seul designer.

Si vous voulez afficher tous les modèles 3D présents dans votre galerie publique, il vous suffit de placer votre nom d'utilisateur dans le paramètre "designer". Dans l'exemple précédent, ce sont les designs publiques de "Particule14" et de "Sculpteo_designs" qui sont ainsi sélectionnables. En revanche, si vous choisissez "Tous" alors le paramètre n'est pas renseigné et tous les modèles 3D publiques du site sont affichés par défaut.

Si ce sont les modèles 3D présents dans la boutique d'un autre designer qui vous intéressent, le nom du paramètre et l'URL changent légèrement. Vous pouvez vous rendre sur la page du designer en question afin de visualiser directement le code de l'iFrame à embarquer dans votre site grâce à notre outil interactif situé dans le menu de droite, illustré par l'image suivante (cliquez dessus pour plus de détails) :

embarquer une boutique

Hauteur et largeur

Il vous est possible de régler la taille de la boutique embarquée afin de l'adapter au mieux à votre page. Vous pouvez ainsi définir les paramètres "width" et "height" de façon complètement libre, avec une valeur en pixel (px) ou en pourcent (%).

Plus la largeur est importante et plus le nombre de modèles 3D affichés par ligne est élevé. Quant à la hauteur, si elle n'est pas suffisante pour afficher tous les designs alors une barre de défilement permet à l'utilisateur de parcourir la boutique.

Action lors du clic

Différentes ouvertures de fenêtres sont disponibles lorsque l'utilisateur clique sur un élément de la boutique. Vous pouvez choisir de ne rien faire lors du clic mais vous pouvez également choisir d'afficher le design dans notre viewer 3D ou encore d'ouvrir la fenêtre produit afin que l'utilisateur puisse continuer le processus de commande. Dans ce cas, il arrive directement sur la fenêtre produit décrite en seconde partie, sans qu'il n'y ait besoin de mettre en place le développement qui y est décrit.

Thème

Si le thème de Sculpteo ne vous convient pas, vous pouvez créer vos propres thèmes afin de personnaliser votre boutique embarquée et de l'intégrer le mieux possible au design de votre site.

Dans l'exemple précédent, le "Thème 1" a ainsi pour identifiant "coek5mZHYRsJ68B2" et le "Thème 2" a pour identifiant "c7PghdDYHnunbsSh". Si le paramètre "theme" n'est pas renseigné alors le thème de Sculpteo est choisi par défaut.

Tri

Si vous souhaitez trier les modèles 3D de la boutique selon un ordre donné, vous pouvez ajouter un paramètre "order_by" et lui donner l'une des deux valeurs possibles : "timestamp" pour un tri par date et "rate" pour un tri par note.

Notez que si le paramètre n'est pas renseigné alors l'utilisateur a la possibilité de sélectionner lui-même une forme de tri dans la fenêtre embarquée.

Consultez la documentation technique sur les boutiques embarquées pour plus d'informations.

Embarquer une galerie 3D de 3dpcase

La boutique de 3dpcase est également intégrable en marque blanche dans votre site internet. Comme pour la boutique de Sculpteo, il ne s'agit la plupart du temps que d'une ligne de code HTML à intégrer à votre site afin d'embarquer l'iFrame correspondant. Une seconde ligne peut également s'avérer nécessaire dans certains cas afin d'inclure le code javascript nécessaire à l'ouverture des fenêtres en superposition.

Afin de trouver le code à insérer dans votre site internet, vous pouvez consulter notre outil interactif sur le site de 3dpcase, dans la partie "Devenez Vendeur". Le code est automatiquement généré en fonction des options que vous choisissez et un bouton "Tester" vous permet de visualiser le résultat.

Pour une personnalisation plus poussée, vous pouvez au préalable configurer un thème graphique et une liste de coques à embarquer grâce aux pages correspondantes.

Embarquer la fenêtre produit

Dans de nombreux cas, vous n'avez pas besoin d'afficher plusieurs modèles 3D car un seul vous intéresse en particulier. Embarquer la fenêtre produit vous permet d'afficher directement ce modèle 3D sur votre site internet afin que l'utilisateur puisse le visualiser et le commander.

Embarquer la fenêtre produit dans votre page

Tout comme la boutique, la fenêtre produit s'embarque à l'aide d'un iFrame, un élément HTML dont le but est l'insertion d'une page web dans une autre.

Le cadre suivant vous permet de générer rapidement le code de l'iFrame à intégrer à votre site et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'iFrame à intégrer dans votre site internet Fenêtre embarquée






Plusieurs paramètres sont modulables :

UUID

Il est bien sûr indispensable de spécifier l'UUID (Universal Unique IDentifier) du modèle 3D à afficher, c'est-à-dire l'identifiant unique qui permet de le repérer parmi les designs présents sur le site de Sculpteo.

Comment trouver l'UUID d'un design ? Rendez-vous sur la page produit du modèle 3D et étudiez le lien de la page. L'UUID est le mot de 8 lettres situé entre le nom du design et le point d'interrogation, comme sur l'exemple suivant :
//www.sculpteo.com/fr/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Hauteur et largeur

Il vous est possible de régler la taille de la fenêtre produit embarquée afin de l'adapter au mieux à votre page. Vous pouvez ainsi définir les paramètres "width" et "height" de façon complètement libre, avec une valeur en pixel (px) ou en pourcent (%).

Si la taille choisie n'est pas suffisante pour afficher toute la fenêtre produit alors des barres de défilement permettent à l'utilisateur de la parcourir.

Sauvegarde

Le bouton "Sauver" permet de sauvegarder un modèle 3D personnalisé sur son compte Sculpteo afin de le commander plus tard. Dans le cas d'une intégration en marque blanche, vous aurez probablement envie d'enlever cette option. Pour cela, il suffit d'ajouter un paramètre "no_save" dans le code de l'iFrame à embarquer et de lui donner la valeur "1".

Si en revanche vous souhaitez conserver la possibilité de sauvegarder les designs, alors aucun paramètre n'a besoin d'être ajouté.

Défilement

Si la hauteur de la fenêtre embarquée n'est pas suffisante, une barre de défilement s'affiche automatiquement sur le côté afin de permettre à l'utilisateur de visualiser toute la page embarquée. Cette barre peut éventuellement être masquée en ajoutant un paramètre "scrolling" de valeur "no".

Si aucun paramètre n'est renseigné et que la hauteur de la fenêtre embarquée n'est pas assez grande, alors la barre est affichée par défaut.

Consultez la documentation technique sur les fenêtres produit embarquées pour plus d'informations.


En validant l'ajout au panier de votre objet 3D dans cette fenêtre produit, vous arrivez directement sur la fenêtre décrite en troisième partie, sans avoir besoin de mettre en place le développement qui y est décrit.

Embarquer la fenêtre produit par-dessus votre page

Plutôt que d'afficher la fenêtre produit via un iFrame inséré directement dans votre page, vous avez la possibilité de l'afficher en superposition de celle-ci grâce à un Overlay Box, un élément HTML dont le but est justement l'insertion d'une page web par-dessus une autre. L'intérêt principal de cette méthode est qu'il n'y a pas de taille de fenêtre à gérer, en revanche le rendu final est sensiblement différent de celui obtenu dans le premier cas.

Le cadre suivant vous permet de générer rapidement le code de l'Overlay Box à intégrer à votre site et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'Overlay à intégrer dans votre site internet Fenêtre embarquée






Plusieurs paramètres sont modulables :

UUID

Il est bien sûr indispensable de spécifier l'UUID (Universal Unique IDentifier) du modèle 3D à afficher, c'est-à-dire l'identifiant unique qui permet de le repérer parmi les designs présents sur le site de Sculpteo.

Comment trouver l'UUID d'un design ? Rendez-vous sur la page produit du modèle 3D et étudiez le lien de la page. L'UUID est le mot de 8 lettres situé entre le nom du design et le point d'interrogation, comme sur l'exemple suivant :
//www.sculpteo.com/fr/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Onsave, onorder, onclose

Trois paramètres non mentionnés dans l'exemple ci-dessus peuvent également être ajoutés :
- "onsave" vous permet de définir en javascript une action à effectuer lors de la sauvegarde du modèle 3D
- "onorder" vous permet de définir en javascript une action à effectuer lors de la commande de l'objet 3D
- "onclose" vous permet de définir en javascript une action à effectuer lors de la fermeture de la fenêtre

Ces paramètres sont facultatifs.

Consultez la documentation technique sur les Overlay Box pour plus d'informations.

Embarquer le module de commande

Dans certains cas, notamment pour des applications mobiles, vous ne souhaitez pas embarquer d'outils Sculpteo pour afficher le produit mais seulement une fenêtre pour le commander. Embarquer le module de commande permet à l'utilisateur de payer et de commander l'objet 3D auprès de Sculpteo tout en restant sur votre site internet ou votre application.

Embarquer le module de commande dans votre page

Le module de commande de Sculpteo peut lui aussi s'embarquer directement dans votre page à l'aide d'un iFrame, un élément HTML dont le but est l'insertion d'une page web dans une autre.

Le cadre suivant vous permet de générer rapidement le code de l'iFrame à intégrer à votre site et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'iFrame à intégrer dans votre site internet Fenêtre embarquée






Plusieurs paramètres sont modulables :

UUID

Il est indispensable de spécifier l'UUID (Universal Unique IDentifier) du modèle 3D à commander, c'est-à-dire l'identifiant unique qui va permettre de le repérer parmi les designs présents sur le site de Sculpteo.

Comment trouver l'UUID d'un design ? Rendez-vous sur la page produit du modèle 3D et étudiez le lien de la page. L'UUID est le mot de 8 lettres situé entre le nom du design et le point d'interrogation, comme sur l'exemple suivant :
//www.sculpteo.com/fr/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Hauteur et largeur

Il vous est possible de régler la taille du module de commande embarqué afin de l'adapter au mieux à votre page. Vous pouvez ainsi définir les paramètres "width" et "height" de façon complètement libre, avec une valeur en pixel (px) ou en pourcent (%).

Si la taille choisie n'est pas suffisante pour afficher tout le module de commande alors des barres de défilement permettent à l'utilisateur de le parcourir.

Version

Dans le cas où vous développez une application mobile, vous avez la possibilité d'embarquer la version mobile du module de commande plutôt que la version classique, plus adaptée pour un site internet.

Seule l'URL est à changer dans ce cas, passant de "www.sculpteo.com/..." à "m.sculpteo.com/...".

Embarquer le module de commande par-dessus votre page

Plutôt que d'afficher le module de commande via un iFrame inséré directement dans votre page, vous avez la possibilité de l'afficher en superposition de celle-ci grâce à un Overlay Box, un élément HTML dont le but est justement l'insertion d'une page web par-dessus une autre. L'intérêt principal de cette méthode est qu'il n'y a pas de taille de fenêtre à gérer, en revanche le rendu final est sensiblement différent de celui obtenu dans le premier cas.

Le cadre suivant vous permet de générer rapidement le code de l'Overlay Box à intégrer à votre site et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'Overlay à intégrer dans votre site internet Fenêtre embarquée






Seul un paramètre a besoin d'être défini ici :

UUID

Il est indispensable de spécifier l'UUID (Universal Unique IDentifier) du modèle 3D à commander, c'est-à-dire l'identifiant unique qui va permettre de le repérer parmi les designs présents sur le site de Sculpteo.

Comment trouver l'UUID d'un design ? Rendez-vous sur la page produit du modèle 3D et étudiez le lien de la page. L'UUID est le mot de 8 lettres situé entre le nom du design et le point d'interrogation, comme sur l'exemple suivant :
//www.sculpteo.com/fr/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Embarquer la visionneuse 3D

La visionneuse 3D de Sculpteo est une fenêtre qui permet d'afficher la représentation 3D d'un design en particulier. Présent dans la fenêtre produit, cet élément peut également être embarqué seul afin que vos clients puissent visualiser les modèles 3D avant de les commander.

Le cadre suivant vous permet de générer rapidement le code de l'iFrame à intégrer à votre site et de visualiser la fenêtre qu'il crée :

Trouvez en quelques clics le code de l'iFrame à intégrer dans votre site internet Fenêtre embarquée






Plusieurs paramètres sont modulables :

UUID

Il est indispensable de spécifier l'UUID (Universal Unique IDentifier) du modèle 3D à afficher, c'est-à-dire l'identifiant unique qui va permettre de le repérer parmi les designs présents sur le site de Sculpteo.

Comment trouver l'UUID d'un design ? Rendez-vous sur la page produit du modèle 3D et étudiez le lien de la page. L'UUID est le mot de 8 lettres situé entre le nom du design et le point d'interrogation, comme sur l'exemple suivant :
//www.sculpteo.com/fr/print/coque-citrouille-iphone-5-159/PpAK2tcc?uuid=Ni49MqVeYrHIo1BxrYFU2e.

Hauteur et largeur

Il vous est possible de régler la taille du viewer 3D afin de l'adapter au mieux à votre page. Vous pouvez ainsi définir les paramètres "width" et "height" de façon complètement libre, avec une valeur en pixel (px) ou en pourcent (%).

Action lors du clic

Différentes ouvertures de fenêtres sont disponibles lorsque l'utilisateur clique sur le viewer 3D. Vous pouvez choisir de ne rien faire lors du clic mais vous pouvez également choisir d'ouvrir la fenêtre produit ou la boutique du designer.

Barre d'outils

La barre d'outils présente sous le viewer 3D permet d'effectuer des rotations précises et de choisir la technologie 3D d'affichage du design. Dans le cas d'une intégration en marque blanche, vous pouvez être amené à vouloir supprimer cette barre. Pour cela, il suffit d'ajouter un paramètre "panel" dans le code de l'iFrame à embarquer et de lui donner la valeur "0".

Arrière-plan

Vous avez la possibilité de modifier la couleur de fond du viewer 3D afin de l'adapter à votre site internet et au modèle 3D représenté. Pour cela, vous devez ajouter un paramètre "bgcolor" et lui donner comme valeur les 6 caractères du code hexadécimal de la couleur souhaitée.

Consultez la documentation technique sur le Viewer 3D pour plus d'informations, notamment sur l'intégration avancée.


Il est également possible de retrouver le code de l'iFrame à intégrer directement sur la page Sculpteo du produit. Il suffit de cliquer sur le bouton Partager du viewer 3D pour obtenir la balise à placer dans le code de votre site, comme illustré sur l'image suivante (cliquez dessus pour plus de détails) :

Générer code viewer 3D



Documentation technique

Développeur confirmé ?
Parcourez la documentation technique de nos APIs

×