UI/iFrame integrations

Getting started

iFrame integrations

You can develop your own integration that is injected into Missive with an iframe that can interact with our application via a JavaScript library.

Library

Include this script in your integration page. Check out the JavaScript API.

<script src="https://integrations.missiveapp.com/missive.js"></script>

Styles

For your convenience, we also provide a stylesheet for you to include if you want your integration to match our styles. Not only does it accelerate development, it will also make your integration support all of our themes by default. Check out our CSS styleguide.

<link href="https://integrations.missiveapp.com/missive.css" rel="stylesheet">

Development

https is required when adding a custom integration to Missive. During development, we suggest using a tool like Caddy or Ngrok to create a secure tunnel to your local development server.

Security

There are multiple ways you can secure your iFrame:

1. Implement authentication logic in your iFrame itself so your users have to log in before seeing the iFrame content. - most secure

You can use Missive's secure storage to persist authentication:

// When user needs to authenticate
const token = await Missive.storeGet('auth_token')
if (!token) {
  // Show login form
  // After successful login:
  await Missive.storeSet('auth_token', 'user_token_12345')
} else {
  // Validate token and show content
}

• Values are stored per-integration and per-user
• Tokens persist across page reloads
• Storage is managed securely by Missive and cleared at user log out

2. Pass a token in the integration URL parameters that your server will use to authenticate the request before serving the iFrame content. - easiest to implement

In Missive you would enter the URL with the auth param: https://acme.com/my-iframe?auth=12345abcde

3. Delegate OAuth flow to Missive with initiateCallback - best for OAuth providers

async function authenticateWithOAuth() {
  try {
    // 1. Initiate OAuth flow
    const response = await Missive.initiateCallback('https://your-auth-endpoint')

    // 2. Response will contain query params from the OAuth redirect
    const { access_token } = response

    // 3. Store the token for future use
    await Missive.storeSet('oauth_token', access_token)
  } catch (error) {
    console.error('OAuth flow failed:', error)
  }
}

How it works:

• Missive opens the auth URL in a new browser tab
• Adds a redirectTo parameter to your URL
• After OAuth completion, redirect to the provided redirectTo URL with your tokens/data as query params
• The browser tab closes automatically
• Your integration receives the data in the response object

Important notes:

• Works around iframe OAuth limitations
• Compatible with iOS (uses localStorage instead of cookies)
• The redirectTo URL is unique per attempt
• Store the redirectTo URL during OAuth redirects

Remember:

• Always validate tokens on your server
• Use HTTPS for all communications