Skip to content

Quick Start

1. Create An Entity And Get Its Key

Sign up, create the sandbox entity you want to embed, then go to Settings → API Keys and create an entity API key for that entity.

Use ek_sandbox_* while you validate the embedded flow in sandbox.

2. Add a Container

Add a container element where the embed will appear:

<div id="space-invoices-embed" style="height: 600px;"></div>

3. Initialize and Open

Quick Starttypescript
import { SpaceInvoices } from "@spaceinvoices/embed-sdk";

const si = new SpaceInvoices({
  apiKey: "ek_live_your_entity_api_key",
  entityId: "ent_123",
  onAction: (_action) => {},
});

// Open invoice list in the container
si.open("invoices", { container: "#space-invoices-embed" });

Using Script Tag (No Build Step)

Script Tag Usagehtml
Navigationtypescript
// Open invoice list
si.open("invoices", { container: "#space-invoices-embed" });

// Navigate to create new invoice
si.navigate("invoice/new");

// Navigate to view specific invoice
si.navigate("invoice", { id: "inv_123" });

// Navigate to customers
si.navigate("customers");

Handle User Actions

Handle Actionstypescript
const si = new SpaceInvoices({
  apiKey: "ek_live_...",
  entityId: "ent_123",
  onAction: (action) => {
    switch(action.type) {
      case "document_created":
        // Refresh your data or show notification
        break;
      case "navigation":
        break;
      case "close_requested":
        si.close();
        break;
    }
  },
});

Cleanup

Always destroy the SDK when you’re done:

// When component unmounts or page closes
si.destroy();

Next Steps

  • Authentication — understand entity keys and environment separation
  • User Access — compare embed access with user-based dashboard access
  • Configuration — All configuration options
  • Views — Available views and navigation
  • Theming — Customize colors and appearance
  • Events — Handle all user actions