Embedding API Reference / Modules / types / UiInitData

# Interface: UiInitData

types.UiInitData

# Hierarchy

  • InitDataDefinition

  • GlobalInitDataDefinition

    UiInitData

# Table of contents

# Properties

# 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)


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)