# Landing page

We think that it makes sense to create a landing page which can load several configurations (consider the difference between configuration, configurable item and configuration string). This is useful if a user stops the configuration process and wants to continue later. Also a landing page can help to share a certain configuration because it is available under a specific URL .

The easiest way to achieve this is to parameterize the page we created throughout the tutorial by a query param. To be flexible it makes sense to support configurable items and configurations.

In code we add the following to our Scene.vue component:

    const count = initialId.split(':').length;
    if(count === 2) {
    await rubensConfiguratorApi.loadConfigurableItemById(initialId);
    } else {
    await rubensConfiguratorApi.loadConfigurationById(initialId);

And in the setup method of our App.vue component we retrieve the query param id and pass it down to Scene.vue. This could be done like the following code:

  setup(props) {
    const objectId = ref("");
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get("id");
    // try to append ?id=roomle_content_demo:electronics003 to
    // the URL and see what's happening
    if (id) {
      objectId.value = id;
    return {

# Code Sandbox

To see the results of this chapter in code checkout the Code Sandbox.

https://codesandbox.io/s/roomlewebsdkconfiguratorstep05-oq7gw?file=/src/components/Scene.vue (opens new window)

To try loading a different configuration just add id=usm:frame:F02D5FAC33D9128429E1E2A3F03431543C27DD4BB5FADA181FAE434D8B4BCC42 as a query param to the URL.