Embed SDK reference

Drop the Audome Studio inside any web app with a single <script> tag. The SDK exposes one function — window.AudomeEmbed.studio() — that mounts the full editor inside a container of your choice.

Script tag

html

<script src="https://audome.io/embed/audome-embed.js"></script>

The script is hosted on Audome's CDN, ~12 KB gzipped, has zero dependencies, and is safe to ship in production.

Minimal example

html

<div id="audome-studio" style="width:100%;height:700px;"></div>

<script src="https://audome.io/embed/audome-embed.js"></script>
<script>
  AudomeEmbed.studio({
    container: '#audome-studio',
    token: 'YOUR_API_TOKEN',
  });
</script>

Configuration

interface AudomeStudioConfig {
  container: string | HTMLElement;
  token: string;

  theme?: 'dark' | 'light';        // default 'dark'
  locale?: 'ar' | 'en';            // default browser language
  height?: string;                 // CSS height, default '700px'
  categoryId?: string;             // restrict project picker to one category
  projectId?: string;              // open directly on a single project
  readOnly?: boolean;              // hide save/export buttons

  onReady?: () => void;
  onProjectCreate?: (project: { id: string; name: string }) => void;
  onProjectSave?: (project: { id: string; name: string }) => void;
  onRender?: (imageUrl: string) => void;
  onFontUpload?: (font: { id: string; familyName: string }) => void;
  onError?: (error: { code: string; message: string }) => void;
}

Returned handle

AudomeEmbed.studio() returns an object you can use to control the embed after mount:

interface AudomeStudioHandle {
  destroy(): void;
  reload(): void;
  setLocale(locale: 'ar' | 'en'): void;
  setTheme(theme: 'dark' | 'light'): void;
  openProject(projectId: string): void;
  exportImage(opts?: { format?: 'png' | 'jpeg' | 'webp' }): Promise<string>;
}

postMessage event protocol

Internally the SDK uses an iframe and postMessage. Every event is JSON of the shape { source: 'audome', type: string, payload: any }. Listen yourself if you need finer control:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://audome.io') return;
  if (event.data?.source !== 'audome') return;

  switch (event.data.type) {
    case 'studio:ready':       /* iframe loaded */ break;
    case 'project:create':     /* { id, name } */  break;
    case 'project:save':       /* { id, name } */  break;
    case 'render:complete':    /* { imageUrl } */  break;
    case 'render:error':       /* { code, message } */ break;
    case 'font:upload':        /* { id, familyName } */ break;
  }
});

React example

tsx

import { useEffect, useRef } from 'react';

export function AudomeStudio({ token }: { token: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const handle = useRef<any>(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://audome.io/embed/audome-embed.js';
    script.onload = () => {
      handle.current = (window as any).AudomeEmbed.studio({
        container: ref.current,
        token,
        theme: 'dark',
        onRender: (imageUrl: string) => console.log('rendered', imageUrl),
      });
    };
    document.body.appendChild(script);
    return () => {
      handle.current?.destroy();
      script.remove();
    };
  }, [token]);

  return <div ref={ref} style={{ width: '100%', height: 700 }} />;
}

Security tips

Never ship a long-lived master token to the browser. Mint short-

lived per-customer tokens server-side and pass those to the embed.

Use categoryId to restrict which projects a customer sees.
Set a strict Content Security Policy that allows

frame-src https://audome.io so the iframe can mount.