Types.UiInitData
Last updated
Last updated
/ / / UiInitData
.UiInitData
InitDataDefinition
GlobalInitDataDefinition
↳ UiInitData
• 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
• Optional applyCurrentGlobalParameters: boolean
Description
set this flag to false and global parameters are not applied when switching variants
Overrides
InitDataDefinition.applyCurrentGlobalParameters
• 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 force either behaviour by setting autoStart to true or false.
default: true if screen with is bigger than 1024px otherwise false
• Optional buttons: Object
Description
show and hide certain buttons
Index signature
â–ª [key: string]: boolean | undefined
Type declaration
2dview?
boolean
3dview?
boolean
add_measurement_line?
boolean
add_room?
boolean
add_to_basket?
boolean
addons?
boolean
ar?
boolean
close_view?
boolean
configure_in_room?
boolean
dimensions?
boolean
export3d?
boolean
firstperson?
boolean
fullscreen?
boolean
help_center?
boolean
load_product?
boolean
multiselect?
boolean
partlist?
boolean
partlist_planner?
boolean
partlist_print?
boolean
pauseconfigure?
boolean
productlist?
boolean
redo?
boolean
renderimage?
boolean
requestplan?
boolean
requestproduct?
boolean
resetcamera?
boolean
rotate?
boolean
savedraft?
boolean
snapping?
boolean
startPlanner?
boolean
startconfigure?
boolean
swap_product?
boolean
undo?
boolean
view_mode?
boolean
• 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
• Optional configureInRoom: boolean
Description
For use with planner only, if set to true the room will be shown while configuring a configurable object.
• 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
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 }]
Description
specify an url which can be used as src for an iframe
• 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#
• 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
• Optional elements: Object
Description
show and hide certain elements
Index signature
â–ª [key: string]: boolean | undefined
Type declaration
bottom_bar?
boolean
interaction_notes?
boolean
partlist_bounds?
boolean
• Optional emails: boolean
Description
if this is set to true the "save draft" will be done by sending an e-mail
• Optional extCatalog: string
Description
use an external catalog (deprecated, use customView.extCatalog instead)
Deprecated
Groups
room-designer
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
• Optional firstPersonView: boolean
Description
Shows or hides the first person mode toggle button in the sidebar menu
Groups
room-designer
• 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
• 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
family?
string
source?
string
• Optional gaConsent: boolean
Description
set this flag to false if the user did not give the consent to Analytics
• Optional groupPartList: boolean
Description
set this flag to true if you want to group the part list by main components
Description
Specify which context (i.e room designer or configurator or neither) to show the tutorial/helpcenter button in the sidebar.
• Optional interactionsCollapsed: boolean
Description
Keeps the interaction container collapsed. This is only used if the room designer is embedded in the technical configurator. (BO PoC 2)
Description
if set to true the coords of the clicks on the canvas will be logged to the console
• Optional materialMultiSelect: boolean
Description
set this flag to true if you want that a user can select more than one material category at once
• 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
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
• 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
• Optional notifications: Object
Description
show and hide certain notifications
Type declaration
first-person-controls?
boolean
interaction?
{ add-element?: boolean ; confirm-ghosts?: boolean ; parameters-changed?: boolean ; root-element?: boolean }
interaction.add-element?
boolean
interaction.confirm-ghosts?
boolean
interaction.parameters-changed?
boolean
interaction.root-element?
boolean
load-idb-config?
boolean
stop-configure-hint?
boolean
• 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
• Optional overrideServerUrl: string
Description
use another server url for the embedding
• Optional rotationSnapDegrees: number
Description
Sets the rotation indicator to snap a plan object to the nearest supplied degree value while being rotated, default is 10 degrees. Supplying 0 will allow the rotation indicator to rotate plan object freely.
• 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.
• Optional searchThreshold: string
Description
define when you want to show the search bar, currently we hide the search bar until there are more than 10 elements. since it is a query param the value is a string. Please only provide a string that can be parseInt(x,10) otherwise it will be undefined behavior
• Optional shareUrl: string
Deprecated
Description
for details see deeplink, the only change is that the placeholder is <CONF_ID> here instead of #CONFIGURATIONID#
Description
skin the embedding instance
• 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
Description
use this param to initialize the configurator ui state, like opening certain views, camera modes, etc
Groups
room-designer
Description
the query param thumbnails will be converted to the following object:
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
• Optional translations: any
Description
override translations to change labels for some or all languages. Example:
Description
sets the measurement unit to be displayed in the planner and configurator UI.
Overrides
InitDataDefinition.unit
• Optional useLocalRoomle: boolean
Description
use a local version of the embedding
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
• Optional viewer: boolean
Description
start embedding instance only as viewer
• 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
• 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
• Optional zIndex: number
Description
set the z-index of the embedding instance
• Optional customTutorials: []
• Optional customView:
• Optional featureFlags:
• Optional helpcenter:
• Optional logCanvasCoords:
• Optional measurementSystem: <{ IMPERIAL: "imperial" = 'imperial'; METRIC: "metric" = 'metric' }>
• Optional skin:
• Optional state:
• Optional thumbnails:
You can find all labels here:
• Optional unit: <{ CM: "cm" = 'cm'; FEET: "feet" = 'feet'; INCH: "inch" = 'inch'; INCH_FEET: "inchfeet" = 'inchfeet'; MM: "mm" = 'mm' }>
• Optional variants: