Skip to Content
Embed SystemFrontend SDK

Frontend SDK

Installation

Script Tag

<script src="https://embed.orderly.dev/sdk.js"></script>

npm

npm install @orderly/embed
import { Orderly } from '@orderly/embed';

Initialization

const orderly = Orderly.init({
  publishableKey: 'pk_live_...',
  sessionToken: 'es_...',
  container: '#orderly-embed', // DOM element or selector
  theme: 'auto', // 'light', 'dark', or 'auto'
});

Rendering Components

Bridge Manager

orderly.render('bridge-manager', {
  allowedTypes: ['shopify', 'woocommerce'],
  onConnect: (bridge) => console.log('Connected:', bridge),
});

Order List

orderly.render('order-list', {
  filters: { status: 'pending' },
  onSelect: (order) => console.log('Selected:', order),
});

Tracking Widget

orderly.render('tracking', {
  trackingNumber: '1Z999AA10123456784',
});

Methods

MethodDescription
init(config)Initialize the SDK
render(component, options)Render an embedded component
on(event, handler)Listen to events
off(event, handler)Remove event listener
destroy()Clean up and remove all embeds
refreshSession(token)Update the session token

Session Refresh

When a session is about to expire, refresh it:

orderly.on('session:expiring', async () => {
  const newToken = await fetchNewSessionFromYourBackend();
  orderly.refreshSession(newToken);
});
EventsAPI Reference