Add custom overlays (advanced)
To add a custom view you have two options. Either you embed it into our UI which means we add an iframe into our page, or you overlay our UI with your own one. Both options have their reason to exist. The embedding into our UI involves less setup and in contrast the overlay gives you more control but needs more steps to be implemented. Currently, this only works nicely for desktop. We are working hard to improve the mobile experience soon.
Let's start with the overlay solution first
Add custom view as overlay
Assume the following scenario:
You have a Room Designer scene, and you want to show a custom view whenever a user selects a specific item, e.g.: USM Frame. Since we build an overlay this requires that you embed the Roomle UI somewhere on your webpage with our embedding lib.
In our example, we want the custom view to always overlay the drawer on the right-hand side. Additionally, the custom overlay should also animate in and out in the same way as the drawer does.
And last but not least, we want the user to be able to drag-in items from the overlay. As always you find the whole example in our CodeSandboxes. Be aware that this is not a copy & paste tutorial, we rather show the important parts of the code. If you want a copy & paste solution checkout our CodeSandbox. Nevertheless, we think it makes sense to go through this tutorial because there are some small gotchas you can easily overlook when simply copying and pasting. But now let's get started.
Basic setup
At first, we prepare the HTML of our webpage:
It is also important to take a look at the CSS to fully understand what's going on:
Now after we have the DOM setup we need to create an instance of the Rubens Room Designer. We do it like this:
We need special attention for the section at customView
. This is a JavaScript object that consists of the name of the customView
we want to set as key and the options of the customView
. In our case we just set overlay
to true
to indicate the Rubens Room Designer that instead of the regular view during item selection we show a custom overlay.
So far so clear (especially when you already have a Roomle Rubens embedding setup). To make our overlay interactive we need to glue some code together. First we implement a logic to show and hide it. Therefore, we add the following code before loadObject
: