Coras Embed

What you get

One SDK entry point

mount({(container, page, config)}) renders the landing, search, details, payment, or help page, plus suggestion-widget, a standalone recommendations embed you mount directly. No page tags, no per-framework wrappers.

Same API in every framework

The same mount() call across eleven frameworks - React, Vue, Angular, Svelte, Solid, Astro, and more. The returned handle exposes ready, update(), navigate(), prefetch(), and unmount().

Routing stays in your app

Typed onNavigate and onStateChange callbacks and framework-neutral URL helpers keep routing, analytics, and URL state in your application.

Chrome and theme

Opt into the Coras navbar and footer with chrome, and brand the embed with container-scoped CSS variables via config.theme.

Mount a page

import { mount } from "@coras-io/embed";

const app = mount({
  container: document.querySelector("#coras")!,
  page: "landing",
  config: {
    apiUrl: "https://api.coras.io",
    distributorId: "your-distributor-id",
    assetsUrl: "https://assets.coras.io/shared",
    locale: "en-IE",
    currency: "EUR",
  },
  onNavigate(detail) {
    // Your app owns routing.
  },
});

await app.ready;
app.update({ page: "search", params: { search: "museum" } });
app.unmount();

mount() returns synchronously and loads the page module in the background. Await app.ready to know when the first render is complete.

Events

Every host-facing event has a matching mount() callback:

Event	Callback	Purpose
coras:ready	onReady	First render is ready
coras:navigate	onNavigate	Navigation intent, routed by your app
coras:state-change	onStateChange	In-page filters or selection changed
coras:reservation-created	onReservationCreated	Reservation created
coras:payment-status	onPaymentStatus	Payment lifecycle status
coras:error	onError	Safe, redacted error

See Events and callbacks for payloads.