Roomle Documentation
  • Overview
  • Quick Start Guides
    • Create you first 3D Viewer & AR
      • Sign up & upgrade your license plan in Rubens Admin
      • Create a product for the Rubens 3D Viewer
      • Batch upload products into your catalogue
    • Convert your static product into a material configurator
  • Rubens Products
    • Overview
    • Architectural overview
    • Rubens Products vs. Rubens SDK
    • Rubens 3D Viewer & AR
      • Getting started
    • Rubens Configurator
      • Getting started
      • Integration
        • Setup the configurator
        • Listen to events
          • Request a product
          • Parts list changes
          • Analytic events
          • Button clicks
        • Trigger API functions
          • Implement custom buttons
        • How to use prices in Rubens Configurator?
          • Use the parts list for calculating prices
          • Use Rubens Price Service
          • Use your own backend for calculating prices
        • Analytics Event
          • Rubens Configurator + Google Analytics (GDPR)
        • Customise shareable links
        • Handle CORS
      • Customisation
        • Hide Bottom Bar
        • Custom parts list print
        • Enable / Disable buttons
        • Override labels
        • Skinning options
          • Colors
          • Font
        • Localization
        • Change floor material
        • Highlighting in the configurator
      • Recipes
        • Implement custom AR button
        • Add product variants
        • Parameter outside of the configurator
        • Load different products into the configurator
    • Rubens Room Designer
      • Getting started
      • Integration
        • Setup Room Designer
        • Listen to events
          • onSavePlan
        • Call 3D Scene functions
          • Trigger request plan button
        • How to use prices in Room Designer?
          • Use Rubens Price Service
          • Use your own backend for calculating prices
        • Handle CORS
      • Customisation
        • Hide Bottom Bar
        • Enable / Disable buttons
        • Override labels
        • Skinning options
          • Colors
          • Font
        • Add products from an external catalog
        • Add custom overlays (advanced)
        • Localization
      • Recipes
        • Load different plans into the scene
        • Adding items to the scene
    • Rubens Products Reference
      • Classes
        • ExposedAnalyticsCallbacks.ExposedAnalyticsCallbacks
        • ExposedApi.ExposedApi
        • ExposedApi.Internal.Connector
        • ExposedApi.Internal.ExposedApiDragGhost
        • ExposedApi.Internal.ExposedApiDragHandler
        • ExposedApi.Internal.Libs
        • ExposedApi.Internal.MessageHandler
        • ExposedApi.Internal.RoomleSdkWrapper
        • ExposedApi.Internal.SdkConnector
        • ExposedApi.Internal.SdkConnectorConfigurator
        • ExposedApi.Internal.SdkConnectorPlanner
        • ExposedApi.Internal.SdkConnectorViewer
        • ExposedApi.Internal.UiCallbacks
        • ExposedApi.Internal.default-1
        • ExposedApi.Internal.default-2
        • ExposedApi.Internal.default
        • ExposedCallbacks.ExposedCallbacks
        • RoomleConfiguratorApi.default
      • Enums
        • ExposedApi.Internal.BUTTONACTIONS
        • ExposedApi.Internal.GACATEGORY
        • ExposedApi.Internal.GACUSTOM
        • ExposedApi.Internal.SDKMODULES
        • Types.UIBUTTON
        • Types.UIELEMENTS
      • Interfaces
        • ExposedApi.Internal.Analytics
        • ExposedApi.Internal.CollectionViewComponentIcon
        • ExposedApi.Internal.CollectionViewElement
        • ExposedApi.Internal.CollectionViewUiState
        • ExposedApi.Internal.CommonUiState
        • ExposedApi.Internal.CoreData
        • ExposedApi.Internal.CoreState
        • ExposedApi.Internal.DragGhostOptions
        • ExposedApi.Internal.DragInOptions
        • ExposedApi.Internal.DragInSettings
        • ExposedApi.Internal.EmbeddingCommand
        • ExposedApi.Internal.EmbeddingResponse
        • ExposedApi.Internal.GridViewElement
        • ExposedApi.Internal.GridViewUiState
        • ExposedApi.Internal.GridViewVariantElement
        • ExposedApi.Internal.IncomingMessageBus
        • ExposedApi.Internal.KernelBoundsFormatted
        • ExposedApi.Internal.OutgoingMessageBus
        • ExposedApi.Internal.OverlayState
        • ExposedApi.Internal.ParameterGroup
        • ExposedApi.Internal.PartlistResponse
        • ExposedApi.Internal.PlannerCoreData
        • ExposedApi.Internal.PlannerUiState
        • ExposedApi.Internal.PointRect
        • ExposedApi.Internal.SampleRoom
        • ExposedApi.Internal.SceneSelection
        • ExposedApi.Internal.SharedUiState
        • ExposedApi.Internal.StoreState
        • ExposedApi.Internal.TabCategory
        • ExposedApi.Internal.Translator
        • ExposedApi.Internal.UiLabels
        • ExposedApi.Internal.UiPossibleChildTagWithKey
        • ExposedApi.Internal.UiState
        • ExposedApi.Internal.WrapLines
        • ExposedCallbacks.Labels
        • ExposedCallbacks.Price
        • ExposedCallbacks.Internal.SaveDraftPayload
        • RoomleConfiguratorApi.RoomleEmbeddingApiKeys
        • Types.ConfiguratorSettings
        • Types.CustomViewSettingsForIframe
        • Types.CustomViewSettingsForOverlay
        • Types.CustomViews
        • Types.CustomViewsCallbacks
        • Types.EmbeddingSkin
        • Types.HelpCenterSetting
        • Types.ThumbnailsSettings
        • Types.UiInitData
        • Types.UiState
        • Types.VariantsMap
        • Types.Internal.CustomTutorialTranslation
        • Types.Internal.CustomViewSettingsBase
        • Types.Internal.PartlistPrintPayload
        • Types.Internal.SidebarEventTypes
        • Types.Internal.UiFeatureFlags
      • Modules
        • ExposedAnalyticsCallbacks
        • ExposedApi.Internal
        • ExposedApi
        • ExposedCallbacks.Internal
        • ExposedCallbacks
        • RoomleConfiguratorApi
        • Types.Internal
        • Types
      • Translate-labels
  • Rubens SDK
    • Overview
    • Getting Started
    • Rubens Modules
    • Rubens GLB Viewer
      • Getting started
      • Scene Customisation
        • Environment
        • Transparent Background
    • Rubens Configurator
      • Getting Started
      • Configurator Concepts
      • Listen to events
      • Control 3D Scene
      • Scene Customisation
        • Environment
        • Transparent Background
      • Different types of configurations
      • How to change a configuration
    • Rubens Planner (Room Designer)
      • Getting started
      • Listen to events
      • Control 3D Scene
      • Scene Customisation
        • Environment
        • Transparent Background
    • Rubens SDK Reference
      • Classes
        • EnvironmentDynamicEnvironmentSettingLoader.default
        • LightsettingDynamicLightSettingLoader.default
        • SceneSettingsLoader.default
        • Configurator.Configurator
        • Configurator.Internal.CommunicationInterface
        • Configurator.Internal.GlobalCallback
        • Configurator.Internal.MainThreadToWorker
        • Configurator.Internal.RoomleError
        • Configurator.Internal.UiCallback
        • Configurator.Internal.default-1
        • Configurator.Internal.default-2
        • Configurator.Internal.default-3
        • Configurator.Internal.default-4
        • Configurator.Internal.default-5
        • Configurator.Internal.default-6
        • Configurator.Internal.default-7
        • Configurator.Internal.default-8
        • Configurator.Internal.default-9
        • Configurator.Internal.default
        • RoomleConfigurator.Internal.AORenderPass
        • RoomleConfigurator.Internal.AbstractModel
        • RoomleConfigurator.Internal.AbstractModelWrapper
        • RoomleConfigurator.Internal.BakedGroundContactShadowPass
        • RoomleConfigurator.Internal.BaseMaterial
        • RoomleConfigurator.Internal.BlendAoAndAShadowMaterial
        • RoomleConfigurator.Internal.BlendAoPassDepthMaterial
        • RoomleConfigurator.Internal.BlurPass
        • RoomleConfigurator.Internal.CameraUpdate
        • RoomleConfigurator.Internal.CopyTransformMaterial
        • RoomleConfigurator.Internal.DebugPass
        • RoomleConfigurator.Internal.EMSConstant
        • RoomleConfigurator.Internal.EmsArray
        • RoomleConfigurator.Internal.EmsList
        • RoomleConfigurator.Internal.EnvironmentMapDecodeMaterial
        • RoomleConfigurator.Internal.GBufferMaterialCache
        • RoomleConfigurator.Internal.GBufferRenderPass
        • RoomleConfigurator.Internal.GroundContactCamera
        • RoomleConfigurator.Internal.GroundReflectionIntensityMaterial
        • RoomleConfigurator.Internal.GroundReflectionPass
        • RoomleConfigurator.Internal.InputEvent
        • RoomleConfigurator.Internal.KernelAtticArray
        • RoomleConfigurator.Internal.KernelObjectConfigurationArray
        • RoomleConfigurator.Internal.KernelPlanObjectList
        • RoomleConfigurator.Internal.LightSample
        • RoomleConfigurator.Internal.LightSource
        • RoomleConfigurator.Internal.LinearDepthRenderMaterial
        • RoomleConfigurator.Internal.NormalAndDepthRenderMaterial
        • RoomleConfigurator.Internal.ObjectRenderCache
        • RoomleConfigurator.Internal.ObjectToWallLineArray
        • RoomleConfigurator.Internal.OccurrenceMap
        • RoomleConfigurator.Internal.OutlinePass
        • RoomleConfigurator.Internal.OutlineRenderer
        • RoomleConfigurator.Internal.Panel
        • RoomleConfigurator.Internal.PassRenderer
        • RoomleConfigurator.Internal.PlanObjectList
        • RoomleConfigurator.Internal.PlanObjectPtr
        • RoomleConfigurator.Internal.PointArray
        • RoomleConfigurator.Internal.PoissonDenoiseRenderPass
        • RoomleConfigurator.Internal.PostProcessingMaterialPlugin
        • RoomleConfigurator.Internal.PromiseQueue
        • RoomleConfigurator.Internal.RenderCacheManager
        • RoomleConfigurator.Internal.RenderCacheMapItem
        • RoomleConfigurator.Internal.RenderPass
        • RoomleConfigurator.Internal.RenderPassManager
        • RoomleConfigurator.Internal.RoomLightSourceDistributionArray
        • RoomleConfigurator.Internal.RoomleWebGLRenderer
        • RoomleConfigurator.Internal.SceneEventInfo
        • RoomleConfigurator.Internal.SceneRenderPass
        • RoomleConfigurator.Internal.SceneRenderer
        • RoomleConfigurator.Internal.SceneRendererGUI
        • RoomleConfigurator.Internal.SceneVolume
        • RoomleConfigurator.Internal.ScreenSpaceShadowMapPass
        • RoomleConfigurator.Internal.SelectionHandlerEvent
        • RoomleConfigurator.Internal.ShadowAndAoPass
        • RoomleConfigurator.Internal.ShadowGroundPlane
        • RoomleConfigurator.Internal.ShadowMapPassOverrideMaterialCache
        • RoomleConfigurator.Internal.ShadowTypeConfiguration
        • RoomleConfigurator.Internal.default-1
        • RoomleConfigurator.Internal.default-10
        • RoomleConfigurator.Internal.default-11
        • RoomleConfigurator.Internal.default-12
        • RoomleConfigurator.Internal.default-13
        • RoomleConfigurator.Internal.default-14
        • RoomleConfigurator.Internal.default-15
        • RoomleConfigurator.Internal.default-16
        • RoomleConfigurator.Internal.default-17
        • RoomleConfigurator.Internal.default-18
        • RoomleConfigurator.Internal.default-19
        • RoomleConfigurator.Internal.default-2
        • RoomleConfigurator.Internal.default-20
        • RoomleConfigurator.Internal.default-21
        • RoomleConfigurator.Internal.default-22
        • RoomleConfigurator.Internal.default-23
        • RoomleConfigurator.Internal.default-24
        • RoomleConfigurator.Internal.default-25
        • RoomleConfigurator.Internal.default-26
        • RoomleConfigurator.Internal.default-27
        • RoomleConfigurator.Internal.default-28
        • RoomleConfigurator.Internal.default-29
        • RoomleConfigurator.Internal.default-3
        • RoomleConfigurator.Internal.default-30
        • RoomleConfigurator.Internal.default-31
        • RoomleConfigurator.Internal.default-32
        • RoomleConfigurator.Internal.default-33
        • RoomleConfigurator.Internal.default-34
        • RoomleConfigurator.Internal.default-35
        • RoomleConfigurator.Internal.default-36
        • RoomleConfigurator.Internal.default-37
        • RoomleConfigurator.Internal.default-38
        • RoomleConfigurator.Internal.default-39
        • RoomleConfigurator.Internal.default-4
        • RoomleConfigurator.Internal.default-40
        • RoomleConfigurator.Internal.default-41
        • RoomleConfigurator.Internal.default-42
        • RoomleConfigurator.Internal.default-43
        • RoomleConfigurator.Internal.default-44
        • RoomleConfigurator.Internal.default-45
        • RoomleConfigurator.Internal.default-46
        • RoomleConfigurator.Internal.default-47
        • RoomleConfigurator.Internal.default-48
        • RoomleConfigurator.Internal.default-49
        • RoomleConfigurator.Internal.default-5
        • RoomleConfigurator.Internal.default-50
        • RoomleConfigurator.Internal.default-51
        • RoomleConfigurator.Internal.default-52
        • RoomleConfigurator.Internal.default-53
        • RoomleConfigurator.Internal.default-54
        • RoomleConfigurator.Internal.default-55
        • RoomleConfigurator.Internal.default-6
        • RoomleConfigurator.Internal.default-7
        • RoomleConfigurator.Internal.default-8
        • RoomleConfigurator.Internal.default-9
        • RoomleConfigurator.Internal.default
        • RoomleConfigurator.default
        • ServicesConfiguratorUiCallback.Internal.AddOnSpotArray-1
        • ServicesConfiguratorUiCallback.Internal.AddOnSpotArray
        • ServicesConfiguratorUiCallback.Internal.CatalogItem
        • ServicesConfiguratorUiCallback.Internal.CatalogItemPtrList
        • ServicesConfiguratorUiCallback.Internal.ComponentArray-1
        • ServicesConfiguratorUiCallback.Internal.ComponentArray
        • ServicesConfiguratorUiCallback.Internal.ConfigurationArray-1
        • ServicesConfiguratorUiCallback.Internal.ConfigurationArray
        • ServicesConfiguratorUiCallback.Internal.ConstructionObject
        • ServicesConfiguratorUiCallback.Internal.ConstructionObjectSet
        • ServicesConfiguratorUiCallback.Internal.DockPairToLineArray-1
        • ServicesConfiguratorUiCallback.Internal.DockPairToLineArray
        • ServicesConfiguratorUiCallback.Internal.DockPairToPointArray-1
        • ServicesConfiguratorUiCallback.Internal.DockPairToPointArray
        • ServicesConfiguratorUiCallback.Internal.EMSReference
        • ServicesConfiguratorUiCallback.Internal.EmsSet
        • ServicesConfiguratorUiCallback.Internal.ExternalReference
        • ServicesConfiguratorUiCallback.Internal.Floor
        • ServicesConfiguratorUiCallback.Internal.FloorMaterial
        • ServicesConfiguratorUiCallback.Internal.IntArray-1
        • ServicesConfiguratorUiCallback.Internal.IntArray
        • ServicesConfiguratorUiCallback.Internal.LongArray
        • ServicesConfiguratorUiCallback.Internal.Node
        • ServicesConfiguratorUiCallback.Internal.ObjectGroup
        • ServicesConfiguratorUiCallback.Internal.ParamKeyValuePairArray-1
        • ServicesConfiguratorUiCallback.Internal.ParamKeyValuePairArray
        • ServicesConfiguratorUiCallback.Internal.ParameterArray-1
        • ServicesConfiguratorUiCallback.Internal.ParameterArray
        • ServicesConfiguratorUiCallback.Internal.ParameterGroupArray-1
        • ServicesConfiguratorUiCallback.Internal.ParameterGroupArray
        • ServicesConfiguratorUiCallback.Internal.ParameterValueArray-1
        • ServicesConfiguratorUiCallback.Internal.ParameterValueArray
        • ServicesConfiguratorUiCallback.Internal.PartArray-1
        • ServicesConfiguratorUiCallback.Internal.PartArray
        • ServicesConfiguratorUiCallback.Internal.PartListParameterArray-1
        • ServicesConfiguratorUiCallback.Internal.PartListParameterArray
        • ServicesConfiguratorUiCallback.Internal.Plan
        • ServicesConfiguratorUiCallback.Internal.PlanElement
        • ServicesConfiguratorUiCallback.Internal.PlanImage
        • ServicesConfiguratorUiCallback.Internal.PlanMeasure
        • ServicesConfiguratorUiCallback.Internal.PlanModelViewHelper
        • ServicesConfiguratorUiCallback.Internal.PlanObjectObjectSet
        • ServicesConfiguratorUiCallback.Internal.PlanObjectPtrList
        • ServicesConfiguratorUiCallback.Internal.PlanObjectPtrVector
        • ServicesConfiguratorUiCallback.Internal.PlanText
        • ServicesConfiguratorUiCallback.Internal.PointArray
        • ServicesConfiguratorUiCallback.Internal.PossibleChildArray-1
        • ServicesConfiguratorUiCallback.Internal.PossibleChildArray
        • ServicesConfiguratorUiCallback.Internal.RangeArray-1
        • ServicesConfiguratorUiCallback.Internal.RangeArray
        • ServicesConfiguratorUiCallback.Internal.SizeTArray
        • ServicesConfiguratorUiCallback.Internal.StringArray
        • ServicesConfiguratorUiCallback.Internal.UnitMeasureFormatter-1
        • ServicesConfiguratorUiCallback.Internal.UnitMeasureFormatter
        • ServicesConfiguratorUiCallback.Internal.VariableArray-1
        • ServicesConfiguratorUiCallback.Internal.VariableArray
        • ServicesConfiguratorUiCallback.Internal.VariantArray-1
        • ServicesConfiguratorUiCallback.Internal.VariantArray
        • ServicesConfiguratorUiCallback.Internal.Vector2fArray
        • ServicesConfiguratorUiCallback.Internal.Wall
        • ServicesConfiguratorUiCallback.Internal.WallMaterial
        • ServicesConfiguratorUiCallback.default
        • GlbViewer.GlbViewer
        • RoomleGlbViewer.GlbViewerUiCallbacks
        • RoomleGlbViewer.Internal.default-1
        • RoomleGlbViewer.Internal.default-2
        • RoomleGlbViewer.Internal.default-3
        • RoomleGlbViewer.Internal.default
        • RoomleGlbViewer.default
        • Planner.Planner
        • RoomlePlanner.Internal.PlannerSelectionHandlerEvent
        • RoomlePlanner.Internal.SceneEventInfo
        • RoomlePlanner.Internal.default-1
        • RoomlePlanner.Internal.default-10
        • RoomlePlanner.Internal.default-11
        • RoomlePlanner.Internal.default-12
        • RoomlePlanner.Internal.default-13
        • RoomlePlanner.Internal.default-14
        • RoomlePlanner.Internal.default-15
        • RoomlePlanner.Internal.default-16
        • RoomlePlanner.Internal.default-17
        • RoomlePlanner.Internal.default-18
        • RoomlePlanner.Internal.default-19
        • RoomlePlanner.Internal.default-2
        • RoomlePlanner.Internal.default-20
        • RoomlePlanner.Internal.default-21
        • RoomlePlanner.Internal.default-22
        • RoomlePlanner.Internal.default-23
        • RoomlePlanner.Internal.default-24
        • RoomlePlanner.Internal.default-3
        • RoomlePlanner.Internal.default-4
        • RoomlePlanner.Internal.default-5
        • RoomlePlanner.Internal.default-6
        • RoomlePlanner.Internal.default-7
        • RoomlePlanner.Internal.default-8
        • RoomlePlanner.Internal.default-9
        • RoomlePlanner.Internal.default
        • RoomlePlanner.default
        • RoomlePlannerUiCallback.default
        • TypingsKernel.Internal.BindingError
        • TypingsKernel.Internal.InternalError
        • TypingsKernel.Internal.UnboundTypeError
      • Enums
        • UtilsShims.WINDOWEVENT
        • Configurator.Internal.ASSETKEYS
        • Configurator.Internal.ERRORCODES
        • Configurator.Internal.PROMISECATEGORY
        • Configurator.Internal.RAPIPATHS
        • Configurator.Internal.SHORTTYPES
        • Configurator.Internal.WORKERMESSAGE
        • RoomleConfigurator.PARAMETERUPDATETYPE
        • RoomleConfigurator.Internal.BASECONTEXT
        • RoomleConfigurator.Internal.DrawingType
        • RoomleConfigurator.Internal.INPUTEVENTTYPE
        • RoomleConfigurator.Internal.INTERSECTIONMODE
        • RoomleConfigurator.Internal.KERNELTYPE
        • RoomleConfigurator.Internal.PARAMETERKERNELTYPE
        • RoomleConfigurator.Internal.RenderMode
        • RoomleConfigurator.Internal.ResizingAnchor
        • RoomleConfigurator.Internal.SELECTIONMODE
        • RoomleConfigurator.Internal.STATE-1
        • RoomleConfigurator.Internal.STATE-2
        • RoomleConfigurator.Internal.STATE
        • RoomleConfigurator.Internal.SnapMode
        • ServicesConfiguratorUiCallback.Internal.MaterialSourceType
        • ServicesConfiguratorUiCallback.Internal.PlanElementType
        • ServicesConfiguratorUiCallback.Internal.PlanObjectSide
        • ServicesConfiguratorUiCallback.Internal.Type-1
        • ServicesConfiguratorUiCallback.Internal.Type
        • ServicesConfiguratorUiCallback.Internal.Unit-1
        • ServicesConfiguratorUiCallback.Internal.Unit
        • ServicesConfiguratorUiCallback.Internal.UnitStringType-1
        • ServicesConfiguratorUiCallback.Internal.UnitStringType
        • ServicesConfiguratorUiCallback.Internal.UnitType-1
        • ServicesConfiguratorUiCallback.Internal.UnitType
        • RoomlePlanner.Internal.MODE
        • RoomlePlanner.Internal.PLANNERSCENEEVENTSTATE
        • TypingsKernel.DIMENSIONINGTYPE
        • TypingsKernel.ExportType
        • TypingsKernel.Internal.PARAMETERUNITTYPES
        • TypingsRapiTypes.MAILTYPE
        • TypingsRapiTypes.RAPIADDITIONALCONTENTS
        • TypingsRapiTypes.RAPITEXTURETYPE
        • TypingsRapiTypes.RapiFavoriteType
      • Interfaces
        • CommonInterfaces.Base64Image
        • CommonInterfaces.CanvasOffset
        • CommonInterfaces.Position2
        • CommonInterfaces.Position3
        • EnvironmentDynamicEnvironmentSettingLoader.EnvironmentDetails
        • EnvironmentDynamicEnvironmentSettingLoader.EnvironmentSetting
        • LightsettingDynamicLightSettingLoader.DynamicLight
        • LightsettingDynamicLightSettingLoader.DynamicLightSettingSource
        • SceneSettingsLoader.SceneSettings
        • UtilsShims.CommonInitData
        • UtilsShims.ConfiguratorInitData
        • UtilsShims.FeatureFlags
        • UtilsShims.GlobalInitDataDefinition
        • UtilsShims.InitDataDefinition
        • UtilsShims.PlannerInitData
        • Configurator.Internal.AppState
        • Configurator.Internal.CommunicationInterfaceCallback
        • Configurator.Internal.Context
        • Configurator.Internal.CustomShadingParameters
        • Configurator.Internal.ExternalEmbeddable
        • Configurator.Internal.ExternalObjectApiConfiguration
        • Configurator.Internal.ExternalObjectDebugConfiguration
        • Configurator.Internal.ExternalObjectMaterialConfiguration
        • Configurator.Internal.ExternalObjectUiConfiguration
        • Configurator.Internal.ExternalObjectUiSliderRange
        • Configurator.Internal.FetchOptions
        • Configurator.Internal.KernelMessageMetaInfo
        • Configurator.Internal.LifeCycleCallbacks
        • Configurator.Internal.ListenersMap
        • Configurator.Internal.NetworkRequestValidations
        • Configurator.Internal.QueuedElement
        • Configurator.Internal.RapiError
        • Configurator.Internal.RapiRelationDefinition
        • Configurator.Internal.SaveOptions
        • RoomleConfigurator.Internal.AOPassParameters
        • RoomleConfigurator.Internal.AORenderPassParameters
        • RoomleConfigurator.Internal.ActiveShadowLight
        • RoomleConfigurator.Internal.Anchor
        • RoomleConfigurator.Internal.AtticDimension
        • RoomleConfigurator.Internal.BakedGroundContactShadowConstructorParameters
        • RoomleConfigurator.Internal.BakedGroundContactShadowParameters
        • RoomleConfigurator.Internal.BlendAoAndAShadowMaterialParameters
        • RoomleConfigurator.Internal.BlendAoPassDepthMaterialParameters
        • RoomleConfigurator.Internal.CameraParameter
        • RoomleConfigurator.Internal.CameraTarget
        • RoomleConfigurator.Internal.ChildEntityMode
        • RoomleConfigurator.Internal.CleanupOptions
        • RoomleConfigurator.Internal.CommonConfiguratorKernelCallbackI
        • RoomleConfigurator.Internal.ComponentEventInfo
        • RoomleConfigurator.Internal.ConfigurationLoadedResponse
        • RoomleConfigurator.Internal.ConfiguratorDebugAPI
        • RoomleConfigurator.Internal.ConfiguratorKernelAccessCallbackI
        • RoomleConfigurator.Internal.ConfiguratorKernelCallbackI
        • RoomleConfigurator.Internal.ConfiguratorViewModelCallbackI
        • RoomleConfigurator.Internal.ContinuousDrawingManager
        • RoomleConfigurator.Internal.CopyTransformMaterialParameters
        • RoomleConfigurator.Internal.DenoisePass
        • RoomleConfigurator.Internal.DimensionDefinition
        • RoomleConfigurator.Internal.DynamicPassUpdateRequirements
        • RoomleConfigurator.Internal.EMSReference
        • RoomleConfigurator.Internal.EnvMapParams
        • RoomleConfigurator.Internal.EnvironmentMapResult
        • RoomleConfigurator.Internal.ExternalElement
        • RoomleConfigurator.Internal.ExternalMeta
        • RoomleConfigurator.Internal.ExternalObjectContour
        • RoomleConfigurator.Internal.ExternalObjectGroup
        • RoomleConfigurator.Internal.ExternalObjectGroupPosition
        • RoomleConfigurator.Internal.ExternalObjectLoadConfiguration
        • RoomleConfigurator.Internal.ExternalObjectRootModule
        • RoomleConfigurator.Internal.ExternalObjectSegment
        • RoomleConfigurator.Internal.GBufferNormalDepthMaterialParameters
        • RoomleConfigurator.Internal.GBufferParameters
        • RoomleConfigurator.Internal.GBufferRenderTargetsParameters
        • RoomleConfigurator.Internal.GBufferTextures
        • RoomleConfigurator.Internal.GLTFScene
        • RoomleConfigurator.Internal.GlobalAPI
        • RoomleConfigurator.Internal.GroundReflectionConstructorParameters
        • RoomleConfigurator.Internal.GroundReflectionIntensityMaterialParameters
        • RoomleConfigurator.Internal.GroundReflectionParameters
        • RoomleConfigurator.Internal.HomagIxArticleParams
        • RoomleConfigurator.Internal.HomagIxHeaderParams
        • RoomleConfigurator.Internal.HomagIxOrderParams
        • RoomleConfigurator.Internal.InputEventAttatchment
        • RoomleConfigurator.Internal.KernelAccessCallbackI
        • RoomleConfigurator.Internal.KernelAttic
        • RoomleConfigurator.Internal.KernelFloor
        • RoomleConfigurator.Internal.KernelFloorMaterial
        • RoomleConfigurator.Internal.KernelObject
        • RoomleConfigurator.Internal.KernelObjectConfiguration
        • RoomleConfigurator.Internal.KernelRoomWall
        • RoomleConfigurator.Internal.KernelUnitFormatter
        • RoomleConfigurator.Internal.KernelUtilityForUi
        • RoomleConfigurator.Internal.KernelWall
        • RoomleConfigurator.Internal.KernelWallMaterial
        • RoomleConfigurator.Internal.LightSourceConfiguration
        • RoomleConfigurator.Internal.Listener
        • RoomleConfigurator.Internal.ListenerCallback
        • RoomleConfigurator.Internal.ListenersMap
        • RoomleConfigurator.Internal.LutImageDefinition
        • RoomleConfigurator.Internal.LutPassParameters
        • RoomleConfigurator.Internal.MeasurementBase
        • RoomleConfigurator.Internal.MessageObject
        • RoomleConfigurator.Internal.NodePlanObject
        • RoomleConfigurator.Internal.Object3DRoomleEventMap
        • RoomleConfigurator.Internal.ObjectCacheData
        • RoomleConfigurator.Internal.ObjectCacheEntry
        • RoomleConfigurator.Internal.ObjectMeasurements
        • RoomleConfigurator.Internal.ObjectToWallLine
        • RoomleConfigurator.Internal.OffsetCamera
        • RoomleConfigurator.Internal.OrthographicOffsetCamera
        • RoomleConfigurator.Internal.OutlineParameters
        • RoomleConfigurator.Internal.OutlinePassParameters
        • RoomleConfigurator.Internal.OutlineRendererParameters
        • RoomleConfigurator.Internal.PerspectiveOffsetCamera
        • RoomleConfigurator.Internal.Plan
        • RoomleConfigurator.Internal.PlanElement
        • RoomleConfigurator.Internal.PlanInteractionHandler
        • RoomleConfigurator.Internal.PlanMeasure
        • RoomleConfigurator.Internal.PlanModelViewHelper
        • RoomleConfigurator.Internal.PlanNode
        • RoomleConfigurator.Internal.PlanObject
        • RoomleConfigurator.Internal.PlanOverview
        • RoomleConfigurator.Internal.PlannerKernelCallbackI
        • RoomleConfigurator.Internal.PluginConfigMap
        • RoomleConfigurator.Internal.PoissonDenoiseParameters
        • RoomleConfigurator.Internal.PoissonDenoisePassParameters
        • RoomleConfigurator.Internal.PrepareImageOptions
        • RoomleConfigurator.Internal.PreviewComponent
        • RoomleConfigurator.Internal.PreviewLineComponent
        • RoomleConfigurator.Internal.PreviewLineSegment
        • RoomleConfigurator.Internal.PromiseExecutor
        • RoomleConfigurator.Internal.Rectangle
        • RoomleConfigurator.Internal.RectangleReferencePoints
        • RoomleConfigurator.Internal.RenderCache
        • RoomleConfigurator.Internal.RoomLightSourceDistribution
        • RoomleConfigurator.Internal.RoomleComponent
        • RoomleConfigurator.Internal.RoomleComponentFactory
        • RoomleConfigurator.Internal.RoomleToolsCoreUICallback
        • RoomleConfigurator.Internal.RubensAPI
        • RoomleConfigurator.Internal.SavedIdbData
        • RoomleConfigurator.Internal.ScenePlugin
        • RoomleConfigurator.Internal.ScenePluginHooks
        • RoomleConfigurator.Internal.SceneRendererChangeParameters
        • RoomleConfigurator.Internal.SceneRendererParameters
        • RoomleConfigurator.Internal.ScreenSpaceShadowMapConstructorParameters
        • RoomleConfigurator.Internal.ScreenSpaceShadowMapParameters
        • RoomleConfigurator.Internal.ScriptData
        • RoomleConfigurator.Internal.ShadowAndAoPassConstructorParameters
        • RoomleConfigurator.Internal.ShadowAndAoPassParameters
        • RoomleConfigurator.Internal.ShadowAndAoPassSettings
        • RoomleConfigurator.Internal.ShadowGroundPlaneParameters
        • RoomleConfigurator.Internal.ShadowLightSource
        • RoomleConfigurator.Internal.ShadowParameters
        • RoomleConfigurator.Internal.ShadowTypeParameters
        • RoomleConfigurator.Internal.StaticComponent
        • RoomleConfigurator.Internal.SubComponentWaiter
        • RoomleConfigurator.Internal.ToolsCoreContextCallback
        • RoomleConfigurator.Internal.ToolsCoreInterface
        • RoomleConfigurator.Internal.WallSide
        • RoomleConfigurator.Internal.PassUpdateStates
        • ServicesConfiguratorUiCallback.UIComponentInfo
        • ServicesConfiguratorUiCallback.Internal.ConfiguratorDebugCallbacks
        • ServicesConfiguratorUiCallback.Internal.ConfiguratorKernelContainer
        • ServicesConfiguratorUiCallback.Internal.KernelCube
        • ServicesConfiguratorUiCallback.Internal.PlannerKernelContainer
        • ServicesConfiguratorUiCallback.Internal.WallExtensionType
        • RoomleGlbViewer.RenderEntry
        • RoomleGlbViewer.Internal.GLBRenderWorkerListener
        • RoomleGlbViewer.Internal.RenderCameraInformation
        • RoomlePlanner.BatchPaintMaterial
        • RoomlePlanner.InteractionOptions
        • RoomlePlanner.RoomlePlannerCallback
        • RoomlePlanner.SceneEvents
        • RoomlePlanner.WallDefinition
        • RoomlePlanner.Internal.ConstructionMeasurements
        • RoomlePlanner.Internal.ConstructionPlanObject
        • RoomlePlanner.Internal.ExternalObjectAPI
        • RoomlePlanner.Internal.FloorAreaData
        • RoomlePlanner.Internal.LeftOrRightWallSide
        • RoomlePlanner.Internal.LocalStorageEntry
        • RoomlePlanner.Internal.PlanObjectEventInfo
        • RoomlePlanner.Internal.PrepareImageOptionsPlanner
        • RoomlePlanner.Internal.Store
        • RoomlePlanner.Internal.WallPlanObject
        • RoomlePlannerUiCallback.SelectionPayload
        • RoomlePlannerUiCallback.Internal.ConstructionMeasurementsTransferable
        • RoomlePlannerUiCallback.Internal.ExternalObjectUiCallback
        • RoomlePlannerUiCallback.Internal.ObjectMeasurementsTransferable
        • RoomlePlannerUiCallback.Internal.PlanObjectPosition
        • TypingsKernel.AddOnSpot
        • TypingsKernel.AssetRequest
        • TypingsKernel.AssetResponse
        • TypingsKernel.AssetType
        • TypingsKernel.ConfigurationExporter
        • TypingsKernel.ConfigurationObject
        • TypingsKernel.ConfiguratorKernelClass
        • TypingsKernel.DebugClient
        • TypingsKernel.DebugValueMapChange
        • TypingsKernel.DebugValueMapDump
        • TypingsKernel.Dimensioning
        • TypingsKernel.DockLine
        • TypingsKernel.DockPair
        • TypingsKernel.DockingLineSegment
        • TypingsKernel.EmscriptenList
        • TypingsKernel.EmscriptenMap
        • TypingsKernel.ExternalAttributeInformation
        • TypingsKernel.ExternalModuleInformation
        • TypingsKernel.HomagIxArticleData
        • TypingsKernel.KernelActionValue
        • TypingsKernel.KernelAddOnSpot
        • TypingsKernel.KernelAnimation
        • TypingsKernel.KernelAnimationAction
        • TypingsKernel.KernelCatalogItem
        • TypingsKernel.KernelComponent
        • TypingsKernel.KernelComponentTypeDto
        • TypingsKernel.KernelConfiguration
        • TypingsKernel.KernelConfigurationLoadedData
        • TypingsKernel.KernelContainer
        • TypingsKernel.KernelCube
        • TypingsKernel.KernelDockPairToLine
        • TypingsKernel.KernelDockPairToPoint
        • TypingsKernel.KernelEnum
        • TypingsKernel.KernelExternalObjectDocking
        • TypingsKernel.KernelMatrix4
        • TypingsKernel.KernelMeshAnimation
        • TypingsKernel.KernelMeshAttributes
        • TypingsKernel.KernelMeshBuffer
        • TypingsKernel.KernelObjectInformation
        • TypingsKernel.KernelObjectPtrList
        • TypingsKernel.KernelParamKeyValuePair
        • TypingsKernel.KernelParameter
        • TypingsKernel.KernelParameterGroup
        • TypingsKernel.KernelParameterValue
        • TypingsKernel.KernelPart
        • TypingsKernel.KernelPartList
        • TypingsKernel.KernelPartListParameter
        • TypingsKernel.KernelPartListPrice
        • TypingsKernel.KernelPlanObject
        • TypingsKernel.KernelPlanObjectBase
        • TypingsKernel.KernelPlanObjectComponent
        • TypingsKernel.KernelPossibleChild
        • TypingsKernel.KernelRange
        • TypingsKernel.KernelValue
        • TypingsKernel.KernelVariable
        • TypingsKernel.KernelVariant
        • TypingsKernel.KernelVector2f
        • TypingsKernel.KernelVector3
        • TypingsKernel.KernelVector3f
        • TypingsKernel.KernelViewType
        • TypingsKernel.ObjectConfigurationType
        • TypingsKernel.ObjectGroupPtr
        • TypingsKernel.ParamterKeyValue
        • TypingsKernel.PlanObject
        • TypingsKernel.UiKernelParameter
        • TypingsKernel.UiKernelRange
        • TypingsKernel.UiPlanObject
        • TypingsKernel.UiPossibleChild
        • TypingsKernel.UiPossibleChildTag
        • TypingsKernel.VariantsList
        • TypingsKernel.WasmDbEntry
        • TypingsRapiTypes.AdditionalInfo
        • TypingsRapiTypes.Asset
        • TypingsRapiTypes.AssetItem
        • TypingsRapiTypes.Element
        • TypingsRapiTypes.LinksCollection
        • TypingsRapiTypes.RapiAdditionalContent
        • TypingsRapiTypes.RapiAuth
        • TypingsRapiTypes.RapiBaseColor
        • TypingsRapiTypes.RapiCatalog
        • TypingsRapiTypes.RapiComponent
        • TypingsRapiTypes.RapiConfiguration
        • TypingsRapiTypes.RapiConfigurationEnhanced
        • TypingsRapiTypes.RapiConfiguratorSettings
        • TypingsRapiTypes.RapiElement
        • TypingsRapiTypes.RapiFavorite
        • TypingsRapiTypes.RapiItem
        • TypingsRapiTypes.RapiJson
        • TypingsRapiTypes.RapiJsonBox
        • TypingsRapiTypes.RapiMaterial
        • TypingsRapiTypes.RapiMaterialGroup
        • TypingsRapiTypes.RapiMaterialShading
        • TypingsRapiTypes.RapiMesh
        • TypingsRapiTypes.RapiMeshData
        • TypingsRapiTypes.RapiMeta
        • TypingsRapiTypes.RapiPackage
        • TypingsRapiTypes.RapiPlan
        • TypingsRapiTypes.RapiPlanAsset
        • TypingsRapiTypes.RapiPlanSetting
        • TypingsRapiTypes.RapiPlanSnapshotGetData
        • TypingsRapiTypes.RapiPlanSnapshotGetDataWith3dUrls
        • TypingsRapiTypes.RapiPlanSnapshotPostData
        • TypingsRapiTypes.RapiPrice
        • TypingsRapiTypes.RapiRetailer
        • TypingsRapiTypes.RapiRole
        • TypingsRapiTypes.RapiShortId
        • TypingsRapiTypes.RapiSkin
        • TypingsRapiTypes.RapiTag
        • TypingsRapiTypes.RapiTagForUi
        • TypingsRapiTypes.RapiTagGeneric
        • TypingsRapiTypes.RapiTenant
        • TypingsRapiTypes.RapiTexture
        • TypingsRapiTypes.RapiUser
        • TypingsRapiTypes.RapiUserSetting
        • TypingsRapiTypes.RoomleSortable
        • TypingsRapiTypes.UserAction
      • Modules
        • CommonInterfaces
        • EnvironmentDynamicEnvironmentSettingLoader
        • LightsettingDynamicLightSettingLoader.Internal
        • LightsettingDynamicLightSettingLoader
        • SceneSettingsLoader
        • UtilsShims.Internal
        • UtilsShims
        • Configurator.Internal
        • Configurator
        • RoomleConfigurator.Internal
        • RoomleConfigurator
        • ServicesConfiguratorUiCallback.Internal
        • ServicesConfiguratorUiCallback
        • GlbViewer
        • RoomleGlbViewer.Internal
        • RoomleGlbViewer
        • Planner
        • RoomlePlanner.Internal
        • RoomlePlanner
        • RoomlePlannerUiCallback.Internal
        • RoomlePlannerUiCallback
        • TypingsKernel.Internal
        • TypingsKernel
        • TypingsRapiTypes
  • Rubens admin
    • Rubens Admin Help
      • Getting started
      • Dashboard
      • Catalogs
      • Tags
      • Products
      • Components
      • Meshes
      • Materials
      • Import/Export
      • Administration
    • Requirements & Sample products
      • 3D Assets Requirements
      • Material & Textures Requirements
      • Sample products and files
  • Content Creation
    • Overview
    • Material Definition
      • Ideas
      • References
      • Resources
    • Blender Addon
    • Scripting Resources
      • Environment Setup for Making Roomle Content
      • Hello World Example for Roomle Component Scripting
      • Rubens CLI Setup and Usage Tutorial
      • Using Code Snippets to Instantly Load Offline Component Definitions
      • How to Debug Content
      • Introduction to Making Level 2 Material Configurators
      • Meshes Conversion and Upload
      • Set Up Materials
      • Level 2 Component Definition
      • Set Up Product Entries
      • Level 2-4 Content Requirements for 3D Data
      • 3D Models & Meshes
      • Prerequisities for Roomle Content Scripters
      • Level 3 Component Definition Basics
      • Parameters
      • Roomle Script Language Reference
      • Example: Scripting a Table from Primitives
      • Example: Parameterized Shelf System
      • SubComponents
      • Basic Docking Topics
      • Global Parameters and Parameter Context
      • Advanced Part List Topics
      • Dimensioning
      • Pricing
      • Advanced Docking Logic
      • Using GetMaterialPropery Function
      • Tenant Settings
      • Roomle Content Project Data Structure
      • Roomle Content Naming Conventions
      • Processes and Good Practices
      • Real Configurator Examples - Chairs, Armchairs, Footstools
      • Simple Colour Changing Product Scripting Example
      • 4-Post Shelving System Example
      • Office Table System Example
      • Scripting Template: Complex Sofa
      • Scripting Template: Two-Part Sofa System
      • Scripting Template: Simple Sofa System
      • Scripting Template: Wardrobe
      • Processing Meshes with Blender
    • Importer
    • IDM
      • About IDM
      • Data format
      • Extension files
      • Conversion
      • Docking logic
      • Part lists
      • Price logic
    • RoomleScript Reference
      • Configurationformat
      • Configuration and Plan
      • Error code list
      • Configurator Features
      • Configurator Script
      • Coordinate Systems
  • WHATS NEW?
    • 2025
      • May 2025
      • April 2025
      • March 2025
      • February 2025
      • January 2025
    • 2024
      • December 2024
      • November 2024
      • October 2024
      • September 2024
      • August 2024
      • July 2024
      • June 2024
      • May 2024
      • April 2024
      • March 2024
  • REST API
    • REST API Reference
      • RAPI Documentation
      • Webhook
      • Endpoints
        • AssetController
        • Authentication
        • CatalogController
        • CatalogElementAdditionalInfo
        • ComponentController
        • ConfigurationController
        • ConfiguratorController
        • Item
        • MaterialController
        • MeshController
        • PlanController
        • PlanSnapshotController
        • PriceController
        • PriceServiceController
        • ShortIdController
        • Skin
        • Statistics
        • TagController
        • Tenant
        • TextureController
        • User
        • UserSettings
    • Product Matching
  • Changelogs
    • Rubens Configurator Changelog
    • Rubens SDK Changelog
    • Rubens Admin Changelog
    • Material Definition Changelog
Powered by GitBook
On this page
  1. Rubens Products
  2. Rubens Configurator
  3. Recipes

Add product variants

PreviousImplement custom AR buttonNextParameter outside of the configurator

Last updated 10 months ago

If you have different variants of your product and want to show them to your webshop users it makes sense to activate the variants feature. Variants could be products with different materials but we advise to use the variants feature for structural different product configurations, e.g.: the customer can start with a L-sofa but you have various different types of sofas or you start with a lowboard shelf but the same collection also has a highboard.

In other words, the variants feature should help the user of your webshop to explore the collection of a product. Of course the user could configer from on variation to the next variation but this is time consuming and reduces the chance that the user discovers all meaningful options.

To enable the variation feature some steps are necessary:

The first thing involves data-setup in .

  • you need to create different variants of your base product

  • you need to assign the variants to a tag

After that you can create a "variants map", which is basically a JSON key/value pair. The key is the ID of the root component and the value is the ID of the tag, an example could look like:

Copy

const options = {
  variants: {
    'usm:frame': 'tag_id_usm',
    'vitra:chair': 'tag_id_vitra'
  }
};

Now everytime a configuration which is based on the root component usm:frame the variants from the tag tag_id_usm are loaded and displayed in the configurator. If you change to something which is based on vitra:chair the variants from tag_id_vitra are loaded. If you load something which is not based on one of them no variants are loaded.

This behaviour is needed that the configurator only shows relevant variants which have something in common with the initial loaded configuration.

Copy

const configurator = await RoomleConfiguratorApi.createConfigurator(
  'demoConfigurator',
  document.getElementById('configurator-container'), {
    ...options,
    variants: {
      'usm:frame': 'tag_id_usm',
      'vitra:chair': 'tag_id_vitra'
    }
  },
);

When changing a variation the global parameters are applied to the newly loaded variaton. You can try this out in the CodeSandbox below. Just set the color of the shelf to yellow and switch the variant. You will see that the loaded variant is also yellow.

You can achieve the same behavior when you add the option {applyCurrentGlobalParameters: true} to extended.loadConfigurableItemById, extended.loadConfigurationById or extended.loadConfiguration

You can test and play around with those settings in .

Rubens Admin
this CodeSandbox