Skip to main content

Curator

You can remotely configure your viewers without having to touch code or redeploying your application. You can modify the following through the CMS:

  • Change displayed resources without touching code
    • 360° images
    • 3D model viewer
    • Dimension shots
    • Material swatches
  • Create multiple configurations for different environments
  • Use different configurations for AB testing

Creating viewer groups​

You can create multiple viewer groups to organize your viewers. This is useful if you have multiple products and want to create different configurations for each product.

Publishing​

Publish a viewer group by clicking the Publish button in the top right corner.

Once published, the remote configuration will immediately be available for all viewers that points to it with their remote-config attribute.

Using a viewer group​

You can use a viewer group's configuration by setting the attribute remote-config on a <cylindo-viewer> element.

Related example

info

If this is your first time setting up <cylindo-viewer>, then you can use the CMS curator page to generate a best practice code snippet for your product.

Preloading with remote configuration​

As explained in getting-started, you can preload the initial image of a viewer, even before the viewer is initialized. This is done by adding a img element with the slot="placeholder" attribute.

When using remote configuration, the initial image may change at any point. However, you can still preload the initial image by setting the src to a special endpoint that will return the initial image of the current remote configuration.

<cylindo-viewer>
  <img
    slot="placeholder"
    src="https://content.cylindo.com/api/v2/CUSTOMER_ID/products/PRODUCT_CODE/default/CURATOR_CODE/placeholder.webp"
    width="720"
    height="540"
  />
</cylindo-viewer>

Replace the following attributes with your own:

  • CURATOR_CODE is the code of the curator you want to display. This should match what you set in remote-config on the <cylindo-viewer>.
  • CUSTOMER_ID is your Cylindo customer ID
  • PRODUCT_CODE is the product's code
  • width and height are the dimensions of your product. It's important that these match the aspect-ratio of your product and that the width is approximately the width of the container you want to display the viewer in.