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.CollectionViewState
        • 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
      • June 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
  • Setup the room designer container in the html
  • Import the RoomleConfigurator instance
  • URL Parameters
  • Loading the item
  • Start scenarios for embedding the Room Designer into your website
  • Relevant parameters
  • Conclusion
  1. Rubens Products
  2. Rubens Room Designer
  3. Integration

Setup Room Designer

Setup the room designer container in the html

For knowing where our script has to place the iframe we need a container (html <div> element) which has an unique id. In our case we call it rd-container and set the width and length in the css style sheet to 100vw and 80vw.

<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #configurator-container {
        width: 100vw;
        height: 80vw;
      }
    </style>
  </head>

  <body>
    <!-- setup the configurator container -->
    <div id="configurator-container"></div>
    
    <!-- link to the script file -->
    <script src="./index.js" type="module"></script>
  </body>
</html>

Import the RoomleConfigurator instance

We import the RoomleConfiguratorAPI via npm in this example, if you want to import it with a script tag please have a look here.

If you have not imported the RoomleConfiguratorAPI yet, please do this as described here.

If you are using the embedding library you have to call createPlanner instead of create or createConfigurator to load a Room Designer scene.

import RoomleConfiguratorApi from "@roomle/embedding-lib/roomle-configurator-api.es.min.js";
(async () => {
  const configuratorId = "demoConfigurator";
  const domElement = document.getElementById("configurator-container");
  const configurator = await RoomleConfiguratorApi.createPlanner(
    configuratorId, // your configurator id which you got
    domElement, // the specified domElement id
    {} // custom parameter for UI customisation
  );  
  // load an item
  await configurator.ui.loadObject("usm:frame");
})

URL Parameters

To embed or integrate the Room Designer, the following parameters must be included in the URL

  • configuratorId: The configurator ID of the tenant where you enabled the Room Designer

  • catalogRootTag: The tag of the catalog where you stored the products you want to show in the Room Designer, Alternatively you could also set the root-tag ID as catalogRootTag in your Rubens settings.

  • moc: Enable the Room Designer feature in the Rubens settings or via integration.

Loading the item

We provide now two convenient ways to load a product into the configurator. Either you instantiate the Room Designer without a product and use loadObject later or you pass in the Roomle unique product ID as init-option. Both ways have their pros and cons. Let's review them quickly.

When you have a detail-page of a product in your webshop or website it makes sense to pass the Roomle unique product ID as init-option (because you know which product your customer wants to see). This makes it possible that everything is loaded in parallel, the code of the Room Designer, and the content of your product. This speeds up the loading process. On the other hand, it makes no sense if you load some product when you do not know which product your customer wants to see in the Room Designer. This could be the case if the Room Designer is opened on a list-view page where several products are listed. Here it makes sense to only instantiate the configurator. This only loads the code of the configurator. When the user then selects a product you can use the loadObject method to load this specific product.

const objectToLoadId = 'usm:frame:BB3BB3E7951BC15109B1FF86D78C95DE3FB46E9F78714C46FFA2DE91866A2C2B';
const configurator1 = await RoomleConfiguratorApi.createConfigurator(configuratorId, domElement1, {id: objectToLoadId, ...overrideServerOptions});
// instantiate the second configurator, because you can now :-) and wait with the load of the object
// until the user clicks on a specific product
const configurator2 = await RoomleConfiguratorApi.createConfigurator(configuratorId, domElement2, overrideServerOptions);
// load the object into the second configurator when the user clicks on a specific button
document.getElementById('button-to-load-product-x').addEventListener('click', () => {
  configurator2.ui.loadObject(objectToLoadId);
});

Start scenarios for embedding the Room Designer into your website

Overall there are 2 possibilities to start with:

  • An already existing plan -> Example

  • An item (static item or configuration) -> Example

You can pass the item id or plan id using the id parameter.

Relevant parameters

startInDetail Types.UiInitData

  • The startInDetail parameter controls in the user will start in configurator or in planner mode for a given item id.

  • Example for startInDetail=true (opens new window)-> User starts in the configurator

  • Example for startInDetail=false (opens new window)-> User start in the planner/scene

state.mode Types.UiState

  • The mode parameter defines the initial mode of the planner.

  • Example for state.mode=room -> User starts in the room/drawing mode

  • Example for state.mode=catalog -> User starts in the catalog mode

    • Important: A catalogRootTag (see above) visible to the current configuratorId has to be provided

Conclusion

After you did the above mentioned steps it should be possible to load your first Room Designer.

In the following guides we will show you how to use our callbacks which are listening to events in our 3D scene and call api functions through our sdk.

Have also a look in this Code Sandbox which contains the above example code.

PreviousIntegrationNextListen to events

Last updated 11 months ago