# Advanced: Iframe Integration

## 1. Prerequisites

{% content-ref url="/pages/-Maik5UzyXcg3vXEZfsw" %}
[What is my authentication token?](/integration-guides/api/what-is-my-authentication-token.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MaipfZiqQ-k\_tX-0y5U" %}
[Which API URL should I use?](/integration-guides/api/which-api-url-should-i-use.md)
{% endcontent-ref %}

## 2. Create iframe url

### Example request

```bash
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":"david@fant.io",
      "phone":"+46701234567",
      "personNumber":"196904201337"
    }
  }'
```

### Example response

```javascript
{
  "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

```markup
<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`](https://github.com/davidjbradshaw/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`:

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

{% hint style="warning" %}
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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.movello.se/integration-guides/iframe-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.