Embed Walkthrough

You can retrieve a token from the Embed Authentication endpoint by specifying the user’s uid and the userTier they belong to. You then pass this token to us via postMessage, which is a secure mechanism for cross-origin communications. We verify the sender's origin before processing the message. Make sure the domain you are embedding from is listed in the allowed domains in the FinChat Partner Portal. We will listen for the token and send the token to our backend where we verify that it belongs to you and extract the uid to mint a Firebase Custom Token which is then sent to our frontend to authenticate the user.

Example of embedding in React:

import React from 'react';

const Embed = () => {
  const token = 'YOUR_SIGNED_TOKEN';
  const embedKey = 'YOUR_EMBED_KEY';

  React.useEffect(() => {
    function handleIframeReady(event: MessageEvent) {
      if (event.data !== 'READY') return;
      const targetWindow = window.frames['finchat'];
      if (!targetWindow) return;
      targetWindow.postMessage({ token }, 'https://enterprise.finchat.io');
    }

    window.addEventListener('message', handleIframeReady);

    return () => window.removeEventListener('message', handleIframeReady);
  }, [token]);

  return (
    <iframe
      name="finchat"
      src={`https://enterprise.finchat.io/${embedKey}`}
      style={{ border: 'none', width: '100%', height: '100%' }}
    />
  );
};

export default Embed;

Example of embedding in HTML/JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed FinChat</title>
  <style>
    #finchat {
      border: none;
      width: 100%;
      height: 100vh; /* Ensure the iframe takes the full viewport height */
    }
  </style>
</head>
<body>
  <iframe id="finchat" name="finchat" src="https://enterprise.finchat.io/YOUR_EMBED_KEY"></iframe>

<script>
const token = '';
const embedKey = '';

document.addEventListener('DOMContentLoaded', () => {
  const iframe = document.getElementById('finchat');
  iframe.src = `https://enterprise.finchat.io/${embedKey}`;
    
  function handleIframeReady(event: MessageEvent) {
    if (event.data !== 'READY') return;
    const targetWindow = window.frames['finchat'];
    if (!targetWindow) return;
    targetWindow.postMessage({ token }, 'https://enterprise.finchat.io');
  }

  window.addEventListener('message', handleIframeReady);

  // Clean up event listener when the window is unloaded
  window.addEventListener('unload', () => {
    window.removeEventListener('message', handleIframeReady);
  });
});
</script>

</body>
</html>

If you are embedding from a mobile app, it’s as simple as using webview and inserting the above HTML code.

Next Page

Embed User Data