Website integration

What is the Polyte Player?

The Polite Player is an optimized 3D viewer for eCommerce and web applications to deliver interactive product experiences right where your customers should make an informed purchasing decision.

The concept of the Polyte Player is to work without its own UI so that the integration into the existing website or shop can be carried out as seamlessly as possible.

In order to be able to control your virtual product - such as changing cameras, switching variants or triggering animations - the Polyte Player provides a simple but powerful API.

<graphic - simple integration>

Here is a minimal example of how to implement Polyte Player on your website:

  1. Import the Polyte Player script module in the header or body of your website:
<script type='module'>
    import 'https://cdn.polyte.cloud/PolytePlayer.js'
</script>
  1. Now add the Polyte Player itself by adding the following HTML markup where you want the 3D visualization to appear:
<polyte-player app-key=eyJjIjoyLCJpIjoxLCJzIjoiMFJUTjA0In1A ></polyte-player>

Make sure that the <div> ... </div> element in which the player is placed has CSS size specifications - width and height

  1. You should now be able to see the 3D model on your site.

The Polyte player is a web component and can be encapsulated in any other HTML element - e.g. <div> ... </div>. The Player then automatically adapts to the size of the container.

What is an app key?

The app key is a reference to the 3D experience you want to load.
The key for a specific experience will be provided to you after deployment from the Polyte Editor.

The app key remains the same for a particular product. You can simply deploy new versions and set them live when it's time.

If you don't have an app key yet, try one of these:

  • eyJjIjoyLCJpIjoxLCJzIjoiMFJUTjA0In1A
  • eyJjIjoyLCJpIjoxLCJzIjoiTjBLVFlBIn1A

What can I view in Polyte Player?

The Polyte Player consumes the experiences created in the Polyte Editor after the deployment progress.

Depolying the models and asset data helps to logically separate work data and consumption data and to ensure a consistent pipeline.

In the depolyment process, the asset data is combined, simplified and compressed to ensure optimized loading performance on your website.
See Deployment