UI Components

Public API endpoints

All paths are relative to this backend base URL.

GET {{ baseUrl }}/api/ui-components/manifest/:projectId
GET {{ baseUrl }}/api/ui-components/component/:code

// Private projects require an API key header
//   x-project-key: YOUR_PROJECT_API_KEY

curl "{{ baseUrl }}/api/ui-components/manifest/prj_yourproject" \
  -H "x-project-key: YOUR_PROJECT_API_KEY"
              

Browser SDK

Include the SDK bundle and initialize it with your project.

<script src="{{ baseUrl }}/public/sdk/ui-components.iife.js"></script>
<script>
  uiCmp.init({
    projectId: 'prj_yourproject',
    apiKey: 'YOUR_PROJECT_API_KEY', // null for public projects
    apiUrl: '{{ baseUrl }}',
  });

  // Alias also available
  // uiComponents.init(...same config...);
</script>
              

Auto-inject snippet (single script tag)

Paste this anywhere; it uses the SDK host’s origin and avoids duplicate injection.

<script>
(function () {
  // ---- CONFIG ----
  const SCRIPT_SRC = '__ORIGIN__{{ baseUrl }}/public/sdk/ui-components.iife.js';
  const INIT_OPTS = {
    projectId: 'prj_yourproject',
    apiKey: null, // set string for private projects
    apiUrl: '{{ baseUrl }}',
  };

  // ---- GUARDS (idempotent) ----
  if (window.__uiCmpAutoAdded) return;
  window.__uiCmpAutoAdded = true;

  function initUiCmp() {
    if (!window.uiCmp || window.__uiCmpInitialized) return;
    window.__uiCmpInitialized = true;
    window.uiCmp.init(INIT_OPTS);
  }

  // ---- SCRIPT LOADER ----
  if (window.uiCmp) {
    // SDK already loaded
    initUiCmp();
    return;
  }

  // Avoid duplicate <script> injection
  const existing = document.querySelector('script[src="' + SCRIPT_SRC + '"]');
  if (existing) {
    existing.addEventListener('load', initUiCmp, { once: true });
    return;
  }

  const s = document.createElement('script');
  s.src = SCRIPT_SRC;
  s.async = true;
  s.onload = initUiCmp;
  document.head.appendChild(s);
})();
</script>
              

Project setup checklist

• Create a project (public or private) in the Projects panel.
• Create one or more components and assign them to the project.
• For private projects, copy the API key when it is shown (once) after creation or rotation.
• Optionally configure allowed origins on the project.
• Use the manifest endpoint or SDK to render components on your site.

Troubleshooting

• 401/403 on private projects usually means a missing or invalid x-project-key.
• Check that the project is active and the component is assigned and enabled.
• Verify that the SDK script URL matches this admin base URL ({{ baseUrl }}).