To embed Roomle Rubens as an iframe in your website or webshop it is enough to create a link and use this link as a
src in an iframe. It is important to note that we recommend this typ of integration for static items or very simple use cases. This is due to the fact that this simplistic iframe integration does not communicate anything to your website or webshop. This could become problematic when you want to hand over customized products to the shopping cart. If you need deeper integration you can use our embedding integration or even the Web Sdk (in case you want to heavily modify our user interface).
If you have troubles with your integration, feel free to ask us on Stackoverflow (opens new window).
Just make sure you are using the tag
roomle so we get a notification.
# Embedding vs Embedding Integration
As described above the
simple embedding makes most sense for static items or when you do not need an integration into your website or webshop. You can imagine the simple embed like a YouTube embedding code. In contrast to that we also offer
# How to get those links
Basically you can copy&paste the iframe codes from Roomle Rubens Admin platform. But let's have a quick look on how those links are constructed:
<iframe src="https://www.roomle.com/t/cp/?configuratorId=demoConfigurator&id=roomle_content_demo:kitchenware003&api=false" width="1024" height="768"></iframe>
Let's have a look on the certain parts:
- iframe: to embed the Rubens Configurator we use an HTML iframe tag. This is similar to what all the big platforms like YouTube are doing. In the example above we also added some
height. You are free to use any width and height which fit your needs. To display the correct content in the iframe we use the property
srcand add the link to roomle.com. More information about iframe you can read here (opens new window).
- the link itself: before you copy & paste the link into the HTML iframe you can always try if it opens in the browser. If this works you only need to watch out that you added the query params you want (for details about query params please read along here (opens new window)). It is important that you add the
api=falsequery param because otherwise the Rubens Configurator waits for your website or webshop to. Also use the correct configuratorId with the query param
configuratorId=demoConfiguratorand replace demoConfigurator with your configuratorId.