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.

This quick start uses a shared entity key, so everyone who opens the embed acts as the entity. If you need documents and activity attributed to individual people, or different permissions per person, sign in with a short-lived per-user token instead. It takes a small backend step; see Choose how the embed signs in.

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

Copy

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" });

Personalize locally

Using Script Tag (No Build Step)

Script Tag Usagehtml

Copy

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

<script src="https://unpkg.com/@spaceinvoices/embed-sdk"></script>
<script>
  const si = new SpaceInvoices.SpaceInvoices({
    apiKey: 'ek_live_your_entity_api_key',
    entityId: 'ent_123',
    onAction: (_action) => {
    }
  });

  si.open('invoices');
</script>

Personalize locally

Navigate Between Views

Navigationtypescript

Copy

// 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");

Personalize locally

Handle User Actions

Handle Actionstypescript

Copy

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;
    }
  },
});

Personalize locally

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