Developer: how to embed
Oral Console developers compare page widget and sign-in mint, preview theming, and copy mount code.
Audience: Oral Console developers · Applies to: Oral Console
Goal: On How to embed, follow the two formal paths: allow Origin, claim keys, preview, copy code; optionally tune appearance (theme tokens).
Product path: How to embed in your system, Two formal embed methods. Sign-in: How to use Oral Console. After website signup, switch to Developer in the header. After production + sign-in mint you can still sign in for integration and billing, but you cannot switch to Learner / Publisher; use the embed samples in How to embed for preview.
Before you start
- Signed in as Developer.
- Oral Console is a sample. Production integration lives in your own backend and frontend.
Where in the UI
Sidebar: Home / How to embed / Notifications / Preview / Me. Home primary CTA is How to embed. The four surfaces (practice / assignments / History / exams) open from Preview and do not occupy the daily bottom bar. Product tier lives on the Preview hub. Appearance and language are in Settings (gear). The header has a notification bell.
Steps
Pick an embed method on the page, then follow that path:
Page widget (default)
- Claim a publishable key (copy as the page instructs).
- Allow your site address (including localhost / port).
- Import the roster and issue learner codes (or enable self-bind) — speaking is not live until identity is bound.
- In Preview, bind identity first, then try speaking; optionally tune theme (accent / radius / density / badge), then copy the widget snippet into your page.
- Do not put the tenant key in the widget script.
Sign-in mint
- Copy the tenant key (shown in full once; rotate if you lost it). Never put it in the browser.
- Allow Origin.
- On your server, mint
embed_tokenwith the tenant key, then paste theOralEmbed.mountsample into your page (theme fields optional). - Use the in-page code / preview tabs as shown; only preview mints the short-lived ticket for you (UI wins).
The in-page preview is the embedded result, not a shell to clone. Plan compare and extra quota sit under Compare plans / add quota — they are not the door.
Do not use trial keys or sample tokens in production. Live tenant keys stay on the server.
Theming (theme tokens)
Beside How to embed Preview you can tune appearance; the copy snippet stays in sync. Production passes the same fields to mount. See How to embed in your system (Theming). Appearance cannot replace learner identity or completion reconciliation.
Plan check
Switch to Lite on Product tier, then open Exams: the entry stays, the request is rejected. That is expected. See Plans, entitlements, and usage.
How to confirm success
- Your localhost can speak.
- The tenant key is not in the frontend (widget uses the publishable key only).
- After a session, Usage shows Usage time (minutes) for that conversation.