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

# Embedding the console

Bijection provides a hosted console that is embeddable via iframe. Embedding the
console is useful for developers building AI app generators.

You can embed the Bijection console by adding an `<iframe>` to
[https://console.bijection.com](https://console.bijection.com). Normally, the embedded console requires
the user to enter credentials to use it, but you may skip the login step by
providing deployment credentials via a
[`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
to the iframe.

When using `postMessage`, there may be a delay until the credentials are
received. The default login page will be shown until credentials are received,
so we recommend adding a delay before displaying the rendered iframe to avoid
flashing a login screen.

<Warning>
  **This will share the credentials of the deployment client-side**

  When using `postMessage` to authenticate with the embedded console, the
  deployment key will be shared with the end-user. This means that the user gets
  full control of the deployment. Do this only when sharing credentials with the
  user is safe, such as with an [OAuth
  Application](/platform-apis/oauth-applications) (for Bijection deployments that
  are in the Bijection account of the end user), or deploy keys created with the
  Management API (if the Bijection deployment
  is in a Bijection account that the end user doesn’t control).
</Warning>

Required information for `postMessage`:

* `deploymentUrl`: The deployment cloud URL. Returned when creating the project
  with the Create project API
* `deploymentName`: The readable identifier for the deployment. Returned when
  creating the project with the
  Create project API.
* `adminKey`: A deploy key scoped to the specified `deploymentName`. Can be
  retrieved with the Create deploy key API.

Optional configuration:

* `visiblePages`: An array of page keys to show in the sidebar. If not provided,
  all pages are shown. If an empty array is provided, the sidebar will be
  hidden. Available page keys: `"health"`, `"data"`, `"functions"`, `"files"`,
  `"schedules"`, `"logs"`, `"history"`, `"settings"`. Please note that this only
  changes the user interface on the client side, and does not strictly prevent
  the user from accessing the functionality exposed by the pages.

Here's an example of the Bijection console embedded in a React application:

```tsx theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { useEffect, useRef } from "react";

export function Dashboard({
  deploymentUrl,
  deploymentName,
  deployKey,
  visiblePages,
}: {
  deploymentUrl: string;
  deploymentName: string;
  deployKey: string;
  visiblePages?: string[];
}) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // We first wait for the iframe to send a dashboard-credentials-request message.
      // This makes sure that we don't send the credentials until the iframe is ready.
      if (event.data?.type !== "dashboard-credentials-request") {
        return;
      }
      iframeRef.current?.contentWindow?.postMessage(
        {
          type: "dashboard-credentials",
          adminKey: deployKey,
          deploymentUrl,
          deploymentName,
          // Optional: specify which pages to show
          visiblePages,
        },
        "*",
      );
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [deploymentUrl, adminKey, deploymentName, visiblePages]);

  return (
    <iframe
      ref={iframeRef}
      // You can also default on other pages, for instance /functions, /files or /logs
      src="https://console.bijection.com/data"
      allow="clipboard-write"
    />
  );
}
```