Web embed quickstart

The shortest path to mount Jupid inside a partner application.

This quickstart assumes Jupid has already issued staging access: partner ID, staging app URL, shared secret, and approved host origins. Webhook configuration is needed only if your integration uses webhooks. The placeholder values below must be replaced with values enabled by Jupid.

The result is an authenticated Jupid workspace inside your app. To upload accounts and transactions from your server before anyone opens that workspace, start with the HTTP API.

1. Add a mount point

Put a real-height container in the partner product where Jupid should appear:

<div id="jupid-embed" style="height: 100%; min-height: 720px"></div>

In a dashboard layout, the surrounding workspace should fill the viewport. The embed will fill the container.

2. Create the token endpoint

Create an authenticated server endpoint in the partner app:

GET /api/jupid/embed-token

The endpoint must only return a token for the signed-in partner user. Do not create tokens from browser-only code. Return JSON with Cache-Control: no-store:

{ "token": "<signed-jwt>" }

The token must include the partner user's durable ID, email, display name, and short expiration. See Authentication for the full claim shape.

For API synchronization, use a business-access payload without account snapshots. The existing Always Bank snapshot flow includes the full account list in its token. Other metadata must match the payload agreed with Jupid.

Use the Next.js or Django example to implement the signer. Verify the token endpoint returns JSON while you are signed into the partner app before loading the embed.

3. Load the browser SDK

Load the SDK from the Jupid app URL provided for the current environment:

<script src="https://jupid-staging-app.example.com/embed.js"></script>

Replace the example URL with the exact staging app URL Jupid sends after approval.

4. Mount Jupid

Give the SDK the partner token endpoint and mount the workspace:

<script>
  function openJupid() {
    JupidEmbed.mount({
      partnerId: "your-partner-id",
      tokenUrl: "/api/jupid/embed-token",
      container: document.getElementById("jupid-embed"),
      initialPath: "/",
      shell: "topbar",
      chat: "disabled",
      appUrl: "https://jupid-staging-app.example.com",
    })
  }

  openJupid()
</script>

Always Bank users open the requested initialPath, including new and unpaid users. For other partners, new and returning unpaid users open the partner-configured first-run path; paid returning users open initialPath. initialPath must be a root-relative Jupid path such as /, /accounts, or /payments.

shell and chat are optional SDK overrides. Omit them to use the Jupid partner configuration.

5. Verify the flow

Use a real authenticated partner user and confirm:

1. the iframe loads without the full Jupid outer sidebar;
2. the first run lands on initialPath for Always Bank or the partner-configured first-run destination for other partners;
3. refreshing the partner page reuses the same Jupid user;
4. changing the partner user creates a separate Jupid user mapping;
5. the Jupid-side usage-based free limit and paywall behavior match the pilot setup;
6. provider popups, such as bank connection, can open if your integration uses them;
7. webhooks, if enabled, such as account changes, are signed and accepted.

For a single-page app, follow the Browser SDK lifecycle and destroy the controller when removing the embed. The SDK retries once with a new token after an HTTP 401. See Testing and launch before switching to production.