Getting Started

The colormass Configurator is very easy to integrate regardless of the content management system (CMS) or e-commerce solution of your choice. The following example should be up and running on your website in less than 2 minutes!

The integration of the 3D configurator works the same way as embedding a YouTube video in a webpage. If you are familiar with that workflow, you know that it can be done without any programming experience. It uses an inline frame element, also called  iframe . To give it a quick try, copy/paste the following code snippet into your webpage:
<iframe
  src="https://configurator.colormass.com/?apiVersion=2&sceneId=955"
  style="width: 100%; height:100%; border:0"
  allowfullscreen="">
</iframe>

After reloading the page you should see the following interactive configurator (below you can see a screenshot only):

https://slite.com/api/files/dlDgfZ4SP/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiUE1BcV9kbkFzIiwiaWF0IjoxNzE0ODIzMTM5LCJpc3MiOiJodHRwczovL3NsaXRlLmNvbSIsImp0aSI6Ilo0a00xakhFUU1MVGZqIiwiZXhwIjoxNzE3NDE1MTM5fQ.HnhLOPqqlltIQNp3aY-tFpfGP8tMCJPLn7qJQO7ELXI

The only thing you'll have to change now in order to show your own content is the  sceneId  query parameter in the  src  attribute of the iframe. We'll make sure to share it with you once we finished preparing your configurator.
Please mind that using the iframe technology, all the data is directly loaded from the colormass hosting infrastructure, so other than being able to copy/paste the iframe snippet into you page, there are no further requirements.

The above quick-start guide covered a very basic integration of a configurator to get you started. If you would like to learn more about customizing the user interface or programmatically controlling the configurator, visit the  ⁠⁠Advanced Integration⁠  page.