Overview
Embed in seconds using a simple line of code
Emersya’s Interactive 3D Viewers make your online customers feel like they are in a real store, putting your products at the heart of the user experience.
This new way to showcase products turns your customers from passive to active, allowing them to directly interact with the product. They’ll have the power to observe products from any angle, zoom in on every detail, animate the product, explore the internal design structure through exploded views and discover the different color and design options available. Empowered consumers feel more confident and involved in their online purchase, which accelerates the purchasing act, increases customer satisfaction and reduces return rate.
The 3D players can be embedded into any website or platform, no plugin required.
Ready to give a new dimension to your product pages?
Embedding Emersya’s Interactive 3D Viewers provided by your partners takes a few seconds. It’s the same process as for embedding videos using a single line of code. Simply follow the following steps.
Embed using an iframe
Insert HTML code of the 3D viewer
Here is an example of HTML code to be embedded. “PRODUCT_CODE” has to be replaced by the codes provided to you. Simply copy the code provided to you and paste it into your website.
<iframe
src="https://emersya.com/showcase/PRODUCT_CODE"
webkitallowfullscreen
allow='camera; gyroscope; accelerometer; magnetometer; fullscreen;' >
</iframe>
Embed using a script
Insert script code of the 3D viewer
Here is an example of the script tag to include in your page.
“PRODUCT_CODE” has to be replaced by the codes provided to you.
“VIEWER_CONTAINER_ID” has to be replaced by the id of the container which will welcome the viewer.
Simply copy the code provided to you and paste it into your website.
<script
type="text/javascript"
src="https://cdn.emersya.com/f/emersyaLoader.js"
id="emersya"
routing="PRODUCT_CODE"
containerId="VIEWER_CONTAINER_ID" >
</script>
Embed using tags
1 line of code too much? Use a tag
Tags can be used to inject Emersya’s technology directly into your website.
Adjust size
Define the size of the embedded viewer
Using an iframe
You can adjust the width and height of the iframe as well as other usual style parameters of your choice. Width and height can be defined as a percentage of the available space or with a fixed value in pixels.
<iframe
src="https://emersya.com/showcase/PRODUCT_CODE"
width="90%"
height="500px"
webkitallowfullscreen
allow='camera; gyroscope; accelerometer; magnetometer; fullscreen;' >
</iframe>
Using a script
You can adjust the style of the emersya viewer as well as other HTML container. You simply have to target it in CSS.
Force language
Choose language preferences
By default, the language for the 3D viewer is determined by the user’s web browser preferences.
Using an iframe
You can force a language by adding the locale code in the URL as in the following example:
https://emersya.com/en-US/showcase/PRODUCT_CODE
Using a script
You can force a language by adding the lang tag in the 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>
Supported languages are:
| English | en-US |
| French | fr-FR |
| Spanish | es-ES |
| Italian | it-IT |
| Russian | ru-RU |
| Finnish | fi |
| Dutch | nl-NL |
| Turkish | tr-TR |
| Polish | pl |
| Portuguese | pt-PT |
| Taiwanese | zh-TW |
| Chinese | zh-CN |
| Romanian | ro-RO |
| German | de-DE |
| Czech | cs-CZ |
| Japanese | ja-JP |
| Norwegian | no-NO |
| Hebrew | he-HE |
| Korean | ko-ko |
Should you need any other languages
Hide then display a viewer
Start with viewer hidden
The correct way to embed the 3D viewer in a web page without it being visible is to position the viewer outside of the visible area of the page.
This is the only solution that will work on all web browsers.
Please do not use css style such as opacity:0, display:none or width/height:0, as this could cause errors.
Variants/Presets selection
Choose the version to start with
You can set the viewer to start with your choice of the preset color/design options.
Using an iframe
https://emersya.com/en/showcase/PRODUCT_CODE/PRESET_CODE
Using a 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>
Compatibility
Allow the use of iframes if needed
Emersya’s technology is based on HTML5 standard and it can be embedded in any website using an iframe.
Some Content Management Systems (CMS) like Magento, Shopify or WordPress sometime block “iframe” by default. Activate “iframe” from your administration panel to allow Emersya’s 3D viewers to be embedded.
Emersya’s technology has successfully been used by brands running their website on:
