> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding the Modal

> Integrate the migration modal in your website

<Warning>This implementation of modal embedding is being deprecated. If you currently use this implementation, it will still maintain backwards compatibility.</Warning>

# Embedding the Anon Migration Modal

The Anon migration modal provides a user interface for your end users to initiate data migrations directly from your website.

To securely isolate Anon's modal from your application, Anon uses `iframe` embedding for UI integration and a simple RESTful API.

This page gives an overview of how your website can integrate with this modal experience.

## Overview

The embedding process involves two main steps:

1. Obtain a dynamic signed URL from Anon
2. Create an iframe that loads this signed URL

## Why use an iframe?

Anon uses iframes for several important reasons:

* **Security**: The iframe creates a secure sandbox that isolates Anon's code from your website, preventing any potential cross-site scripting (XSS) attacks or unauthorized access to your platform's data.

* **Data Protection**: Sensitive migration data and credentials are handled within the iframe's isolated context, ensuring they never directly interact with your website's JavaScript environment.

* **Clean Integration**: The iframe approach allows Anon to deliver a consistent migration UI to your users while seamlessly integrating it into your website's design.

* **Independent Updates**: Anon can update the migration interface without requiring changes to your website's code, ensuring you always have access to the latest features and security improvements.

<Info>Anon's 3rd party login UX employs standard practices across the industry-leading enterprise products, from banking login forms to Google Sign-in.</Info>

## When to Initiate the Anon Migration Modal

There are two common scenarios where you can initiate the migration modal:

* When a user is onboarding onto your platform
* When a user has requested to connect platform data from another provider

<Note>
  Your end user should have **clear intent** of migrating data before launching the modal.
</Note>

<Tip>For the best user experience, we recommend embedding the modal at a point in your workflow where users would naturally want to import their data.</Tip>

## Integration Flow

The diagram below illustrates the high-level flow of the embed modal integration:

```mermaid theme={"system"}
sequenceDiagram
 autonumber
 participant EndUser as End User
 participant YourApp as Your Application
 participant AN as Anon
 EndUser->>YourApp: Request data migration
 YourApp->>AN: POST /api/v1/migration-modal {source_platform, user_id}
 AN-->>YourApp: {url, migration_id}
 YourApp-->>EndUser: Launch iframe
 EndUser->>AN: Interact inside iframe
 Note over AN: Create Migration <br/> Log into Source Provider <br/> Extract Data <br/> Transform Data
 YourApp->>AN: GET /api/v1/migrations/{migration_id}
 AN-->>YourApp: {status}
```

### Getting a Signed URL

To generate a signed URL, make a POST request to Anon's API:

```javascript theme={"system"}
const ANON_API_KEY = process.env.ANON_API_KEY;
const ANON_BASE_URL = "worker.anon.com";

const response = await fetch(`https://${ANON_BASE_URL}/api/v1/migration-modal`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${ANON_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    user_id: 'user_12345', // Usually an email address
  })
});

const { url, migration_id } = await response.json();
console.log('Migration Modal URL:', url);
console.log('Migration ID:', migration_id);
```

### Request Parameters

| Parameter | Type   | Required | Description                                                            |
| --------- | ------ | -------- | ---------------------------------------------------------------------- |
| `user_id` | string | Yes      | Your internal user identifier (uniquely ids a user within your system) |

### Embedding the Modal

Once you have the signed URL, you can embed it in an iframe:

```jsx theme={"system"}
<iframe
  src={url} // e.g. http://dashboard.anon.com/embed?params=1234qwerasdf
  width="100%"
  height="100%"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

### Checking Migration Status

Once a migration is created, you can check its status at any time using the API:

```javascript theme={"system"}
async function getMigrationStatus(migration_id) {
  const response = await fetch(`https://worker.anon.com/api/v1/migrations/${migration_id}`, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${ANON_API_KEY}`,
      'Content-Type': 'application/json'
    }
  });
  
  if (!response.ok) {
    throw new Error(`Error: ${response.status}`);
  }
  
  const anonMigration = await response.json();
  return anonMigration.status; // IN_PROGRESS | COMPLETE | ... 
}
```

<Tip>Implement polling to automatically check migration status at regular intervals until terminated.</Tip>