# Getting started

## Install the roomle embedding library

As stated in the [section before](https://roomle.gitbook.io/roomle-1/documentation/rubens-products/rubens-configurator) the communication happens with the help of a JavaScript library. Therefore you need to integrate the library into your project. This can either happen via a package manager (e.g. npm, yarn...) or a simple HTML script tag.

### Install with npm package manager

All the needed files can be found here: [https://www.npmjs.com/package/@roomle/embedding-lib(opens new window)](https://www.npmjs.com/package/@roomle/embedding-lib)

You can either download the `tar.gz` or if you use `npm` you could do the following:

```sh
npm install @roomle/embedding-lib --save
```

Always specify the correct `configuratorId` in the init options (more details on that later). The `configuratorId` is handed over to you by your Roomle Contact Person. The correct `configuratorId` prevents attackers from simply copying your code and use the configurator on their website. The only thing you have to do is, to specify the domains on which the Roomle Configurator should be available. For example: [www.roomle.com](http://www.roomle.com). You can do this either in Rubens Admin or by telling your Roomle Contact Person. If something is wrongly configured you will see a message on the screen and further information in the JavaScript error console. If you can not figure out what is wrong please contact your Roomle Contact Person.

For having a example you can have a look in this Code Sandbox:[ ![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/youthful-visvesvaraya-rvrd7f)

### Copy & Paste without package manager <a href="#copy-paste-without-package-manager" id="copy-paste-without-package-manager"></a>

This section shows a simple quick start. We always recommend using a package manager and a good built step but to quickly illustrate the idea of the Roomle Configurator these examples should be sufficient.

```html
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #configurator-container {
        width: 1200px;
        height: 675px;
      }
    </style>
  </head>

  <body>
    <div id="configurator-container"></div>
    <script src="./roomle-configurator-api.es.min.js" type="module"></script>
    <script type="module">
      import RoomleConfiguratorApi from './roomle-configurator-api.es.min.js';

      (async () => {
        const options = {
          id: 'usm:frame',
        };
        const configurator = await RoomleConfiguratorApi.createConfigurator(
          'demoConfigurator',
          document.getElementById('configurator-container'),
          options,
        );
      })();
    </script>
  </body>
</html>
```

To try it out just copy\&paste the HTML snippet from above into a file called `index.html` and serve it from a web server. For quick experiments, the npm package [http-server (opens new window)](https://www.npmjs.com/package/http-server)is very nice.

### Continue with setting up the configurator

When you installed the Roomle Configurator API you can continue setting up the configurator in the [setup Configurator section](https://roomle.gitbook.io/roomle-1/documentation/rubens-products/rubens-configurator/integration/setup-configurator).

\\
