Skip to main content
This implementation of modal embedding is being deprecated. If you currently use this implementation, it will still maintain backwards compatibility.

​
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.
Anon’s 3rd party login UX employs standard practices across the industry-leading enterprise products, from banking login forms to Google Sign-in.

​
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
Your end user should have clear intent of migrating data before launching the modal.
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.

​
Integration Flow

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

​
Getting a Signed URL

To generate a signed URL, make a POST request to Anon’s API: 
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

ParameterTypeRequiredDescription
user_idstringYesYour 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: 
<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: 
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 | ... 
}
Implement polling to automatically check migration status at regular intervals until terminated.