LiveTail Iframe Integration

Logfire allows you to embed the LiveTail interface directly into your application using an iframe. This integration provides access to real-time log streaming and all LiveTail features within your own website.

Getting Started

1. Obtain Access Token

Before implementing the iframe, you’ll need to get your access token:

• Follow the instruction provided in Magiclink Authentication to generate your token
• This token will be used for authenticating your iframe integration

Note: Partners must first onboard their users on logfire to get magiclink. To onboard you can use the SubUser APIs for this.

2. Basic Implementation

Here’s a basic implementation example:

<iframe
  src="https://logfire.ai/iframes/livetail"
  width="100%"
  height="100%"
  id="livetail"
></iframe>

Authentication

The iframe requires authentication using a magic token. Here’s how to implement it:

// Listen for messages from the iframe
const handleMessage = (event) => {
  if (event.data.type === "SUCCESS") {
    // Authentication successful
    // Handle any post-authentication logic
  }
};

// Send authentication token to iframe
if (iframe.contentWindow) {
  iframe.contentWindow.postMessage(
    { type: "AUTH_TOKEN", token: "your-magic-token" },
    "*"
  );
}

Message Types

Outgoing Messages (Parent → Iframe)

• AUTH_TOKEN: Send authentication token

{ type: "AUTH_TOKEN", token: "your-magic-token" }

• NO_TOKEN: Indicate no authentication token available

{
  type: "NO_TOKEN";
}

Incoming Messages (Iframe → Parent)

• SUCCESS: Authentication successful

{
  type: "SUCCESS";
}

Best Practices

1. Error Handling: Always implement error handling for failed authentication
2. Cleanup: Remove event listeners when component unmounts
3. Security: Only accept messages from trusted origins
4. Token Security: Store your access token securely and never expose it in client-side code

Complete Example

useEffect(() => {
  const iframe = document.getElementById("livetail");

  // Handle messages from iframe
  const handleMessage = (event) => {
    if (event.data.type === "SUCCESS") {
      // Handle successful authentication
    }
  };

  // Add message listener
  window.addEventListener("message", handleMessage);

  // Send authentication token
  if (iframe?.contentWindow && magicToken) {
    iframe.contentWindow.postMessage(
      { type: "AUTH_TOKEN", token: magicToken },
      "*"
    );
  }

  // Cleanup
  return () => {
    window.removeEventListener("message", handleMessage);
  };
}, []);

Limitations

• The iframe must be loaded over HTTPS
• Authentication token must be valid
• Parent domain must be whitelisted (contact support to whitelist your domain)

For additional support or questions, please contact our support team.