# Iframe integration process

This section explains how to embed Spotnana as an iframe within your application using OAuth 2.0 token exchange authentication.

## Overview

The integration consists of two parts:

- **Backend:** Your server authenticates with Spotnana on behalf of your users. It sends a user token to Spotnana, and our system returns an access token and a refresh token. These tokens allow the iframe to load an authenticated session for that user.
- **Frontend:** Your application loads the Spotnana iframe and handles a token exchange. When the iframe loads, Spotnana automatically sends your page a message requesting tokens. Your page responds with the tokens your backend obtained from Spotnana. This communication happens through the browser's `postMessage` API, which is the standard way for a parent page and an iframe on different domains to exchange data securely.


### Spotnana URLs

The following are the base URLs to access the Spotnana platform:

| Environment  | API URL  | Embed URL  |
|  --- | --- | --- |
| Sandbox | [https://api-ext-sboxmeta.partners.spotnana.com](https://api-ext-sboxmeta.partners.spotnana.com) | [https://sboxmeta-embed-app.partners.spotnana.com](https://sboxmeta-embed-app.partners.spotnana.com) |
| Production | [https://api.spotnana.com](https://api.spotnana.com) | [https://embed.spotnana.com](https://embed.spotnana.com) |


### Sequence diagram

The sequence diagram below explains the token exchange flow between Spotnana and your application in an iframe integration:



```mermaid
%%{init: {'theme': 'base', 'themeVariables': {'actorLineColor': '#000000'}}}%%
sequenceDiagram
    participant PF as Your frontend <br>application
    participant PB as Your backend <br>system
    participant SA as Spotnana API
    participant PU as Your <br>user detail API

    PF->>PB: 1. Request Spotnana tokens
    PB->>SA: 2. Token exchange request </br>(using the subject_token)
    SA->>PU: 3. GET user detail </br>(using the subject_token as auth header)
    PU-->>SA: 4. User email
    SA-->>PB: 5. Tokens </br>(i.e., access_token and refresh_token)
    PB-->>PF: 6. Return tokens
    PF->>PF: 7. Render Spotnana iframe <br>on your application.
```

## Setup process

The information provided below explain the complete iframe setup process:

1. Backend setup
2. Frontend setup
3. Customize the appearance