colormass Docs
Github Examplescolormass.com
Development
Development
  • Welcome
  • Configurator
    • Introduction
    • Web Components
      • Getting Started
      • Advanced Integration
      • Styling
      • Setting Parameters
      • SDK API Reference
      • Examples
        • Custom Menu
        • Overlay Material Color
    • Iframe Integration
      • Getting Started
      • Advanced Integration
      • API Reference
        • Default Configurations
  • Data Exporter
    • Generating Exports
    • Integration
    • API Access
Powered by GitBook
On this page
  1. Configurator
  2. Iframe Integration

Getting Started

PreviousIframe IntegrationNextAdvanced Integration

Last updated 4 months ago

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 . 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):

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  page.

Advanced Integration
iframe