Skip to main content

Admin UI Integration

SitePack provides several ways for your app to integrate into the merchant's administration dashboard. This ranges from simple settings pages to embedding complex interfaces via iframes.

Settings and Configuration​

Your app's main configuration is defined in the admin section of your app.json. You can choose between two types of settings:

1. Abstract Settings (JSON Schema)​

With settings_type: "abstract", SitePack automatically renders a configuration form for your app based on a JSON Schema. This is the recommended approach for simple apps as it ensures a consistent UI and requires no frontend work from you.

{
  "admin": {
    "settings_type": "abstract",
    "settings_schema": {
      "type": "object",
      "properties": {
        "api_key": { "type": "string", "title": "Your API Key" },
        "enable_sync": { "type": "boolean", "default": true }
      }
    }
  }
}

2. Iframe Integration​

For apps that require a custom interface, you can use settings_type: "iframe". SitePack will render an iframe pointing to your hosted settings URL.

{
  "admin": {
    "settings_type": "iframe",
    "settings_url": "https://your-app.com/settings"
  }
}

You can add custom menu items to the SitePack sidebar to give merchants quick access to your app's dashboards.

{
  "admin": {
    "navigation": [
      {
        "label": "My Dashboard",
        "path": "/dashboard",
        "icon": "chart-bar"
      }
    ]
  }
}

Admin Widgets​

Widgets allow you to embed small pieces of your app's functionality into existing SitePack Admin pages, such as the Order Detail or Product Edit pages.

{
  "admin": {
    "widgets": [
      {
        "id": "shipping-status",
        "location": "admin.order.detail.sidebar",
        "src": "https://your-app.com/widgets/order-status",
        "height": "200px"
      }
    ]
  }
}

Supported Locations​

  • admin.order.detail.sidebar
  • admin.product.detail.sidebar
  • admin.dashboard.main

Security for Remote UI​

When SitePack loads your iframe, it includes a signed session_token in the query parameters. Your server should verify this token to ensure the request is valid and to identify the merchant and site context.

Next Steps​