Embedding API Reference / Modules / types / UiInitData

# Interface: UiInitData

types.UiInitData

# Hierarchy

InitDataDefinition
GlobalInitDataDefinition

↳ UiInitData

# Table of contents

# Properties

# api

• Optional api: boolean

Description

if set to true you can load the configurator in an iframe.src but without any embedding lib This is needed if you do not want to interact with the configurator and only want to use it to view 3d content. Imagine it then as a tag for 3d content

# Defined in

src/configurator/embedding/types.ts:173 (opens new window)

# applyCurrentGlobalParameters

• Optional applyCurrentGlobalParameters: boolean

Description

set this flag to false and global parameters are not applied when switching variants

# Overrides

InitDataDefinition.applyCurrentGlobalParameters

# Defined in

src/configurator/embedding/types.ts:226 (opens new window)

# autoStart

• Optional autoStart: boolean

Description

when the configurator/Room Designer is embedded into a too small space we start it in view only mode, then the user has to click the "start" button and the configurator/Room Designer expands over the whole window. This is great for UX but it's not always ideal in every use case. Therefore you can turn on/off this behavior now with this toggle.

# Defined in

src/configurator/embedding/types.ts:436 (opens new window)

# buttons

• Optional buttons: Object

Description

show and hide certain buttons

# Index signature

▪ [key: string]: boolean | undefined

# Type declaration

Name	Type
`2dview?`	`boolean`
`3dview?`	`boolean`
`add_room?`	`boolean`
`addons?`	`boolean`
`ar?`	`boolean`
`configure_in_room?`	`boolean`
`dimensions?`	`boolean`
`export3d?`	`boolean`
`firstperson?`	`boolean`
`fullscreen?`	`boolean`
`load_product?`	`boolean`
`multiselect?`	`boolean`
`partlist?`	`boolean`
`partlist_planner?`	`boolean`
`pauseconfigure?`	`boolean`
`redo?`	`boolean`
`renderimage?`	`boolean`
`requestproduct?`	`boolean`
`resetcamera?`	`boolean`
`savedraft?`	`boolean`
`snapping?`	`boolean`
`startPlanner?`	`boolean`
`startconfigure?`	`boolean`
`undo?`	`boolean`

# Defined in

src/configurator/embedding/types.ts:86 (opens new window)

# catalogRootTag

• Optional catalogRootTag: string | string[]

Description

define the root tag of your catalog you can define multiple root tags by using [] e.g.: catalogRootTag[]=123&catalogRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:251 (opens new window)

# configureInRoom

• Optional configureInRoom: boolean

Description

For use with planner only, if set to true the room will be shown while configuring a configurable object.

# Defined in

src/configurator/embedding/types.ts:447 (opens new window)

# constructionRootTag

• Optional constructionRootTag: string | string[]

Description

define the root tag of the construction elements, default is "construction_moc" when moc=true and null otherwise you can define multiple root tags by using [] e.g.: constructionRootTag[]=123&constructionRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:259 (opens new window)

# customTutorials

• Optional customTutorials: TutorialData[]

Description

Specify custom tutorials to be shown in the tutorial/helpcenter. Should be of the following format: [{ "en": { // mandatory "link": "SOME_LINK", "label": "first step", "desc": "some description", }, "de": { // optional "link": "SOME_LINK", "label": "first step", "desc": "some description", }, "SOME_OTHER_LOCALE": { // optional --> SOME_OTHER_LOCALE should be a valid locale from: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes "link": "SOME_LINK", "label": "first step", "desc": "some description", }, "scope": "room-designer", // optional "platform": "desktop" // optional }]

# Defined in

src/configurator/embedding/types.ts:410 (opens new window)

# deeplink

• Optional deeplink: string

Description

Set this parameter to use your custom share url. The provided url has to contain a configuration id parameter (#CONFIGURATIONID#) which will be replaced with the real configuration id. default: not set -> use Roomle short url service (linking to roomle.com domain) usage: http://www.example.com/configurator?id=#CONFIGURATIONID#

# Defined in

src/configurator/embedding/types.ts:159 (opens new window)

# doorMaterialRootTag

• Optional doorMaterialRootTag: string | string[]

Description

define the root tag of the materials that can be used for doors you can define multiple root tags by using [] e.g.: doorMaterialRootTag[]=123&doorMaterialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:283 (opens new window)

# elements

• Optional elements: Object

Description

show and hide certain elements

# Index signature

▪ [key: string]: boolean | undefined

# Type declaration

Name	Type
`bottom_bar?`	`boolean`

# Defined in

src/configurator/embedding/types.ts:117 (opens new window)

# emails

• Optional emails: boolean

Description

if this is set to true the "save draft" will be done by sending an e-mail

# Defined in

src/configurator/embedding/types.ts:179 (opens new window)

# extCatalog

• Optional extCatalog: string

Description

use an external catalog

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:357 (opens new window)

# featureFlags

• Optional featureFlags: UiFeatureFlags

Description

this is an object which is for Roomle internal usage, we can set feature flags so that we can ensure a smooth transition between different versions of our configurator

# Overrides

InitDataDefinition.featureFlags

# Defined in

src/configurator/embedding/types.ts:198 (opens new window)

# firstPersonView

• Optional firstPersonView: boolean

Description

Shows or hides the first person mode toggle button in the sidebar menu

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:379 (opens new window)

# floorMaterialRootTag

• Optional floorMaterialRootTag: string | string[]

Description

define the root tag of the materials that can be used for floors you can define multiple root tags by using [] e.g.: floorMaterialRootTag[]=123&floorMaterialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:267 (opens new window)

# fonts

• Optional fonts: Object

Description

specify a custom font to be used. When using a custom font make sure you understand the legal implications. For example: copyrigth law, data protection law, etc.

source needs to be a valid url to a font file CSS. Similar to what Google Fonts provides. For an example see: https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap&subset=latin-ext The font should provide the following weights: 300, 400, 700 If you use the URL as a query param make sure to use encodeURIComponent
family needs to be a valid CSS font family name. If you use font family as a query param make sure to use encodeURIComponent

# Type declaration

Name	Type
`family?`	`string`
`source?`	`string`

# Defined in

src/configurator/embedding/types.ts:370 (opens new window)

# gaConsent

• Optional gaConsent: boolean

Description

set this flag to false if the user did not give the consent to Analytics

# Defined in

src/configurator/embedding/types.ts:203 (opens new window)

# groupPartList

• Optional groupPartList: boolean

Description

set this flag to true if you want to group the part list by main components

# Defined in

src/configurator/embedding/types.ts:191 (opens new window)

# helpcenter

• Optional helpcenter: HelpCenterSetting

Description

Specify which context (i.e room designer or configurator or neither) to show the tutorial/helpcenter button in the sidebar.

# Defined in

src/configurator/embedding/types.ts:385 (opens new window)

# logCanvasCoords

• Optional logCanvasCoords: LogLevelCanvasCoords

Description

if set to true the coords of the clicks on the canvas will be logged to the console

# Defined in

src/configurator/embedding/types.ts:442 (opens new window)

# materialMultiSelect

• Optional materialMultiSelect: boolean

Description

set this flag to true if you want that a user can select more than one material category at once

# Defined in

src/configurator/embedding/types.ts:231 (opens new window)

# materialRootTag

• Optional materialRootTag: string | string[]

Description

define the root tag of the materials that can be used, this sets floorMaterialRootTag, wallMaterialRootTag, doorMaterialRootTag, windowMaterialRootTag, objectMaterialRootTag if they are not set you can define multiple root tags by using [] e.g.: materialRootTag[]=123&materialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:310 (opens new window)

# measurementSystem

• Optional measurementSystem: Enumify<{ IMPERIAL: "imperial" = 'imperial'; METRIC: "metric" = 'metric' }>

Description

sets the measurement unit to be displayed in the planner and configurator UI. imperial sets measurementUnit to inches if no unit is passed metric sets measurementUnit to cm if no unit is passed if unit is not a metric unit (i.e. inch) but unitType=metric it will default to a metric unit (CM) and vice-versa

# Defined in

src/configurator/embedding/types.ts:324 (opens new window)

# mobileLandscape

• Optional mobileLandscape: boolean

Description

set this flag to true if you want to configure on small devices in landscape as well this is relevant for things like Rubens Admin, where the configurator is embedded into a very small div

# Defined in

src/configurator/embedding/types.ts:186 (opens new window)

# objectMaterialRootTag

• Optional objectMaterialRootTag: string | string[]

Description

define the root tag of the materials that can be used for objects you can define multiple root tags by using [] e.g.: objectMaterialRootTag[]=123&objectMaterialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:299 (opens new window)

# overrideServerUrl

• Optional overrideServerUrl: string

Description

use another server url for the embedding

# Defined in

src/configurator/embedding/types.ts:142 (opens new window)

# saveToIdb

• Optional saveToIdb: boolean

Description

Enables saving changes to the current configuration and or plan to indexedDB storage locally in the browser, reloading the page will prompt the user to restore the saved configuration/plan.

The data saved in indexedDB is stored in a key-value pair under the database 'rml-idb' and the table named 'rml-config-store' where the key consists of the current hostname (if inside an iframe it will be 'window.referrer'), the configurator ID and the plan or configurator ID separated by underscores (_).
This key format allows saved data to be scoped by the aforementioned IDs and hostname.
The data stored in 'rml-config-store' follows the following format: { "id": "example.com_exampleConfiguratorId_examplePlanOrConfigurationId", "data": "<...configurationOrPlanDataString...>", "lastModified": "2024-04-16T04:54:48.825Z" "referrer": "example.com" }
Any data in the 'rml-idb' database older than 30 days is removed automatically when the app loads.

# Defined in

src/configurator/embedding/types.ts:428 (opens new window)

# shareUrl

• Optional shareUrl: string

Deprecated

Description

for details see deeplink, the only change is that the placeholder is <CONF_ID> here instead of #CONFIGURATIONID#

# Defined in

src/configurator/embedding/types.ts:150 (opens new window)

# skin

• Optional skin: EmbeddingSkin

Description

skin the embedding instance

# Defined in

src/configurator/embedding/types.ts:125 (opens new window)

# startInDetail

• Optional startInDetail: boolean

Description

set this flag to true if you want to start the moc in configuring mode if there is only one object in the scene

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:237 (opens new window)

# state

• Optional state: UiState

Description

use this param to initialize the configurator ui state, like opening certain views, camera modes, etc

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:243 (opens new window)

# thumbnails

• Optional thumbnails: ThumbnailsSettings

Description

the query param thumbnails will be converted to the following object:

{
  collapsed: { desktop: ViewTypeState; mobile: ViewTypeState };
  expanded: { desktop: ViewTypeState; mobile: ViewTypeState };
}

You have separate options to specify the settings for the thumbnails e.g.: ?thumbnails=big this sets all the values to "big" or you do: ?thumbnails.collapsed=big&thumbnails.expanded=list this sets the collapsed state to "big" and the expanded state to "list". Or you can specify the full object like: ?thumbnails.collapsed.desktop=big&thumbnails.collapsed.mobile=small&thumbnails.expanded.desktop=list&thumbnails.expanded.mobile=big

the following values for ViewTypeState are valid: list | small | big for the collapsed state list will have no effect and just be rendered like small. On mobile collapsed will only use small

# Defined in

src/configurator/embedding/types.ts:346 (opens new window)

# translations

• Optional translations: any

Description

override translations to change labels for some or all languages. Example:

  "translations": {
    "en": {
      "params": {
        "request-product": "Add to cart",
      }
    }
  }

You can find all labels here: Base.json

# Defined in

src/configurator/embedding/types.ts:221 (opens new window)

# unit

• Optional unit: Enumify<{ CM: "cm" = 'cm'; FEET: "feet" = 'feet'; INCH: "inch" = 'inch'; INCH_FEET: "inchfeet" = 'inchfeet'; MM: "mm" = 'mm' }>

Description

sets the measurement unit to be displayed in the planner and configurator UI.

# Overrides

InitDataDefinition.unit

# Defined in

src/configurator/embedding/types.ts:315 (opens new window)

# useLocalRoomle

• Optional useLocalRoomle: boolean

Description

use a local version of the embedding

# Defined in

src/configurator/embedding/types.ts:136 (opens new window)

# variants

• Optional variants: VariantsMap

Description

Define to which variants you can switch from which root component id. This is a simple JS object which is used like a map, e.g.: '"usm:frame": "DB_Start_ohne_Element"' now if a configuration with root component usm:frame is loaded all the items from the tag "DB_Start_ohne_Element" are now shown as variants

# Defined in

src/configurator/embedding/types.ts:166 (opens new window)

# viewer

• Optional viewer: boolean

Description

start embedding instance only as viewer

# Defined in

src/configurator/embedding/types.ts:351 (opens new window)

# wallMaterialRootTag

• Optional wallMaterialRootTag: string | string[]

Description

define the root tag of the materials that can be used for walls you can define multiple root tags by using [] e.g.: wallMaterialRootTag[]=123&wallMaterialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:275 (opens new window)

# windowMaterialRootTag

• Optional windowMaterialRootTag: string | string[]

Description

define the root tag of the materials that can be used for windows you can define multiple root tags by using [] e.g.: windowMaterialRootTag[]=123&windowMaterialRootTag[]=456

Groups

room-designer

# Defined in

src/configurator/embedding/types.ts:291 (opens new window)

# zIndex

• Optional zIndex: number

Description

set the z-index of the embedding instance

# Defined in

src/configurator/embedding/types.ts:130 (opens new window)