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

Contact us

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

Contact us
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