Orders Widget — Embed an Orders Panel in Your Store

Overview

The Orders Widget is a drop-in <script> tag that renders a full orders management panel directly inside your store's admin area. Your team can view orders, see customer details, and update statuses — all without leaving your store's interface.

Plan requirement: The Orders Widget requires the Business plan ($10/mo), same as the Store API.

---

Quick Start

1. Go to Dashboard → Settings → Integrations
2. If you don't have an API key yet, click Generate API Key
3. Scroll down to Embeddable Orders Widget
4. Copy the embed code
5. Paste it into your store admin's HTML page

Embed Code

<script
  src="https://botaura.app/orders-widget.js"
  data-business-id="YOUR_BUSINESS_ID"
  data-api-key="YOUR_API_KEY"
  data-height="700"
></script>

That's it! The widget will appear inline wherever you place the script tag. It renders as an iframe, so it won't interfere with your existing styles.

---

How It Works

1. The orders-widget.js script loads on your page
2. It exchanges your API key for a short-lived JWT token (1 hour)
3. An inline iframe renders the orders panel using that token
4. The token auto-refreshes before it expires — no interruption

Security note: Your API key is used only once during the initial token exchange. After that, the iframe uses the JWT token for all API calls. The API key is never visible in the iframe's source code or network requests.

---

Configuration Options

Attribute	Required	Default	Description
data-business-id	Yes	—	Your Botaura business ID (auto-filled in the dashboard embed code)
data-api-key	Yes	—	Your Store API key (same key used for order ingestion)
data-height	No	600	Height of the widget in pixels
data-container	No	—	ID of an existing HTML element to render the widget inside. If omitted, the widget renders right after the script tag.

Example with Container

<div id="orders-panel"></div>

<script
  src="https://botaura.app/orders-widget.js"
  data-business-id="YOUR_BUSINESS_ID"
  data-api-key="YOUR_API_KEY"
  data-height="800"
  data-container="orders-panel"
></script>

---

Features

Orders List

• View all orders with Order #, Customer, Items, Total, Source, Status, and Date
• Filter by status: All, Pending, Confirmed, Shipped, Delivered, Cancelled
• Automatic refresh every 30 seconds

Status Badges

• ● Pending — Order received, awaiting confirmation
• ● Confirmed — Customer confirmed, ready to ship
• ● Shipped — Order dispatched
• ● Delivered — Order complete
• ● Cancelled — Order cancelled

Source Badges

• WhatsApp — Order placed through WhatsApp conversation
• Website — Order ingested from your online store

Order Details

Click any order row to expand and see:

• Customer name and phone number
• Full item list with quantities and prices
• External order ID (if provided during ingestion)
• Order total

Status Updates

The widget shows only valid next actions for each order status. For example, a "Pending" order shows Confirm and Cancel buttons, while a "Confirmed" order shows Ship and Cancel.

When you update a status, the customer is automatically notified via WhatsApp.

---

Domain Whitelist

The widget respects your domain whitelist from Dashboard → Embed → Allowed Domains. If the page hosting the widget is not on a whitelisted domain, the token exchange will fail with a clear error message.

Make sure to add your store admin's domain (e.g. admin.your-store.com) to the allowed domains list.

---

Troubleshooting

"Domain not authorized"

Add your domain to Dashboard → Embed → Allowed Domains.

"Session expired. Please reload the page."

The JWT token couldn't be refreshed. This usually means the API key was revoked. Generate a new key and update your embed code.

"Token request failed (403)"

Your plan doesn't support the Store API. Upgrade to the Business plan from Dashboard → Pricing.

Widget not appearing

• Check that data-business-id and data-api-key are correct
• Open the browser console (F12) and look for errors starting with "Botaura"
• Verify the API key hasn't been revoked

---

Need Help?

If you're having trouble with the widget, chat with Aura (our AI assistant) for instant help, or contact us at support@botaura.com.