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
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)
Navigate Between Views
// 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
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 closessi.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