Advanced: Iframe Integration

Integrating Movello through an iframe makes sure that the Movello platform is fully sandboxed. At the end of this guide you will have an iframe session url that you can add to your website.

1. Prerequisites

What is my authentication token?Which API URL should I use?

2. Create iframe url

Example request

curl -X POST \
  "https://api.movello.se/rest/v1/auth/session" \
  -H "authorization: Basic ${AUTH_TOKEN}" \
  -H "content-type: application/json" \
  -d '{
    "type": "IFRAME",
    "move": {
      "type": "MOVE_IN",
      "externalId": "your-own-id-to-connect-people-moving-together",
      "moveInDate": "2021-02-18T00:00:00.000Z",
      "originAddress": {
        "street": "Strandvägen 2",
        "apartmentNumber": "2345",
        "zip": "11452",
        "city": "Stockholm",
        "residenceType": "APARTMENT",
        "residenceSize": 321,
        "numResidents": 4
      },
      "destinationAddress":{
        "street": "Strandvägen 1",
        "apartmentNumber": "1234",
        "zip": "11451",
        "city": "Stockholm",
        "residenceType": "APARTMENT",
        "residenceSize": 123,
        "numResidents": 4
      }
    },
    "user": {
      "firstName":"David",
      "lastName":"Fant",
      "email":"[email protected]",
      "phone":"[phone]",
      "personNumber":"196904201337"
    }
  }'

Example response

{
  "data": {
    "session": {
      "id": "46a5f584-61f0-4817-adac-cf0b8c9d1fe9",
      "url": "https://demo.movello.se/iframe/46a5f584-61f0-4817-adac-cf0b8c9d1fe9",
      "user": {
        "id": "1b725c86-ef1c-4669-b7df-e90ab8ac2fc8"
      }
    }
  }
}

3. Integrate iframe on website

Add the iframe

<iframe id="movello" src="{{data.session.url}}" style="width: 100%; border: none;" />

Helper scripts

To properly integrate the iframe on the website, the host website needs to add some helper functionality to:

1. Resize the iframe's size to its content size to make Flyttkoll feel fully integrated on the website. We use iframe-resizer for this.

2. Enable the iframe to scroll to the top of the page. When users navigate and scroll in the Flyttkoll platform, it's important that we can go to the top of the page when they go to another page.

Add the following script to your website head:

<script src="https://js.movello.se/iframe.js"></script>

It is not recommended to download and host the script yourself as that removes the option for us to provide you with updated features and bug fixes.