Aperçu
Intégrer en quelques secondes à l'aide d'une simple ligne de code
Les visuels 3D interactifs Emersya plongent vos clients dans une expérience au plus proche de celle qu'ils pourraient vivre en boutique, tout en l'enrichissant et en plaçant le produit au cœur de l'expérience d'achat.
Ils permettent aux internautes d'interagir pleinement avec les produits, ce qui les rend ainsi acteurs de l'expérience et non plus spectateurs des visuels qui leur sont proposés. Au cours de l'expérience, ils auront la possibilité d'observer les produits sous tous leurs angles, de zoomer sur les moindres détails, de les animer, d'explorer leur composition interne à l'aide de vues éclatées et de découvrir les différentes versions et coloris disponibles. Vos clients se sentiront ainsi plus confiants et impliqués dans leur achat, ce qui aura pour effet d'accélérer l'acte d'achat, d'augmenter la satisfaction client et de réduire le taux de retours.
Les visionneuses peuvent être intégrées dans tout site web et toute plateforme sans nécessité de plug-in.
Prêt à donner une nouvelle dimension à vos pages produit ?
L'intégration des modeles 3D interactifs Emersya fournis par vos partenaires ne prendra que quelques secondes. La technique est similaire à celle d'une intégration de vidéos à l'aide d'une simple ligne de code. Suivez simplement les étapes suivantes:
Intégrer à l'aide d'une iframe
Insérez le code HTML de la visionneuse 3D
Voici un exemple de code permettant d'embarquer une visionneuse Emersya. "PRODUCT_CODE" devra être remplacé par le code qui vous aura été fourni.
<iframe
src="https://emersya.com/showcase/PRODUCT_CODE"
webkitallowfullscreen
allow='camera; gyroscope; accelerometer; magnetometer; fullscreen;' >
</iframe>
Intégrer à l'aide d'un script
Insérez le script de la visionneuse 3D
Voici un exemple de code permettant d'inclure une visionneuse Emersya.
“PRODUCT_CODE” devra être remplacé par le code qui vous aura été fourni
“VIEWER_CONTAINER_ID” devra être remplacé par l'id du conteneur qui acceuillera la visionneuse.
Il suffit de copier le code qui vous est fourni et de le coller sur votre site web.
<script
type="text/javascript"
src="https://cdn.emersya.com/f/emersyaLoader.js"
id="emersya"
routing="PRODUCT_CODE"
containerId="VIEWER_CONTAINER_ID" >
</script>
Intégrer à l'aide de tags
1 ligne de code, c'est déjà trop ? Utilisez un tag !
Si vous le souhaitez, les tags peuvent être utilisés pour injecter la technologie Emersya directement dans votre site.
Ajuster la taille
Définir la taille de la visionneuse
Utiliser une iframe
Vous pouvez ajuster les paramètres de largeur (width) et hauteur (height) de l'iframe ainsi que les autres paramètres de style de votre choix. La hauteur et la largeur peuvent être définies avec des valeurs fixes ou en pourcentage de l'espace disponible.
<iframe
src="https://emersya.com/showcase/PRODUCT_CODE"
width="90%"
height="500px"
webkitallowfullscreen
allow='camera; gyroscope; accelerometer; magnetometer; fullscreen;' >
</iframe>
Utiliser un script
Vous pouvez ajuster le style de la visionneuse emersya comme vous le feriez pour n'importe quel tag HTML. Il suffit simplement de cibler la classe que vous désirez modifier avec votre CSS.
Forcer le choix de la langue
Choisir les préférences de langage
Par défaut, la langue de la visionneuse 3D est déterminée par les préférences du navigateur web de l'utilisateur.
Utiliser une iframe
Vous pouvez forcer une langue en ajoutant le code correspondant dans l'URL, comme dans l'exemple suivant :
https://emersya.com/en-US/showcase/PRODUCT_CODE
Utiliser un script
Vous pouvez forcer la langue en ajoutant le tag lang dans le script.
<script
type="text/javascript"
src="https://cdn.emersya.com/f/emersyaLoader.js"
id="emersya"
routing="PRODUCT_CODE"
containerId="VIEWER_CONTAINER_ID"
lang="en-US" >
</script>
Les langues disponibles sont :
| Anglais | en-US |
| Français | fr-FR |
| Espagnol | es-ES |
| Italien | it-IT |
| Russe | ru-RU |
| Finnois | fi |
| Hollandais | nl-NL |
| Turc | tr-TR |
| Polonais | pl |
| Portugais | pt-PT |
| Taiwanais | zh-TW |
| Chinois | zh-CN |
| Roumain | ro-RO |
| Allemand | de-DE |
| Tchèque | cs-CZ |
| Japonais | ja-JP |
| Norvégien | no-NO |
| Hébreu | he-HE |
| Coréen | ko-ko |
Si vous souhaitez une langue supplémentaire,
Cacher/afficher une visionneuse
Démarrer avec la visionneuse cachée
Pour intégrer la visionneuse 3D sans qu'elle ne soit visible, la seule bonne manière de procéder est de déplacer la visionneuse en dehors de l'espace visible de la page.
C'est la seule solution qui fonctionne sur tous les navigateurs web.
Veuillez ne pas utiliser de styles css comme opacity:0, display:none ou width/height:0.
Sélection de variantes/presets
Choisir la version de démarrage
Il est possible de démarrer sur la version catalogue de votre choix, comme le montre l'exemple suivant :
Utiliser une iframe
https://emersya.com/en/showcase/PRODUCT_CODE/PRESET_CODE
Utiliser un script
<script
type="text/javascript"
src="https://cdn.emersya.com/f/emersyaLoader.js"
id="emersya"
routing="PRODUCT_CODE"
containerId="VIEWER_CONTAINER_ID"
preset="PRESET_CODE" >
</script>
Compatibilité
Si nécessaire, autoriser l'utilisation des iframes
La technologie Emersya est basée sur le HTML5. Elle peut être embarquée sur n'importe quel site internet en utilisant une iframe.
Certains CMS comme Magento, Shopify ou Wordpress bloquent parfois l'utilisation d'iframes par défaut. Activez les iframes depuis votre module d'administration afin de permettre l'intégration des vues 3D Emersya.
La technologie de Emersya a été utilisée avec succès par plusieurs marques gérant leur site avec les CMS suivants :
