Embed System

The embed system lets you integrate Orderly directly into your application. Your customers can connect their platforms, view their orders and shipments, submit action requests, set up alerts, and track deliveries — without ever leaving your product.

How It Works

1. Configure — Enable the embed system and choose which features to expose
2. Authenticate — Create sessions for your end users from your backend
3. Embed — Use the frontend SDK or call the API directly to render Orderly features

Feature Modules

The embed system is modular. Enable only what you need:

Authentication Model

The embed system uses a two-token approach:

• Publishable Key (ek_...) — Identifies your organization. Safe to include in frontend code. Generated when you create your embed config.
• Session Token (est_...) — Grants scoped access for a specific end user. Created by your backend, passed to the frontend.

Publishable keys alone cannot access data. A session token is always required.

Quick Start

1. Create your embed config

PATCH /api/embed/config
Authorization: Bearer oh_your-api-key
Content-Type: application/json
 
{
  "slug": "my-company",
  "allowed_origins": ["https://app.mycompany.com"],
  "allowed_bridge_types": ["shopify", "shipstation"],
  "enabled_features": ["bridges", "data_room", "action_requests"],
  "branding": {
    "primaryColor": "#FF6B35",
    "logoUrl": "https://mycompany.com/logo.png"
  }
}

This returns your publishable_key (ek_...).

2. Create a session endpoint on your server

Install the server SDK and expose a session endpoint. Your API key stays on your server.

// npm install @orderly/node
import { Orderly } from '@orderly/node'
 
const orderly = new Orderly(process.env.ORDERLY_API_KEY)
 
// POST /api/orderly/session
export async function POST(req) {
  const session = await orderly.embeds.createSession({
    externalId: req.user.id,
    name: req.user.company,
  })
  return Response.json({ clientSecret: session.clientSecret })
}

Also available for Java backends, or call the REST API directly.

3. Render the embed in your frontend

// npm install @orderly/embed-react
import { OrderlyEmbed } from '@orderly/embed-react'
 
function IntegrationsPage() {
  return (
    <OrderlyEmbed
      fetchClientSecret={() =>
        fetch('/api/orderly/session', { method: 'POST' })
          .then(r => r.json())
          .then(d => d.clientSecret)
      }
      onBridgeCreated={(bridge) => console.log('Connected:', bridge)}
    />
  )
}

Also available as a vanilla JS SDK for Vue, Angular, or plain HTML.