--- title: "Embeddables" description: "How do Embeddables work?" canonical_url: "https://support.coassemble.com/articles/embeddables-ngzsHlIrJN" md_url: "https://support.coassemble.com/articles/embeddables-ngzsHlIrJN.md" --- # How do Embeddables work? Embeddables let you place live Coassemble content directly inside your own product, website, intranet, portal, or help centre. Instead of sending someone off to Coassemble to take a course, the course (or a builder, or an analytics dashboard) appears right inside the tool they're already in. Each embeddable is a ready-made piece you drop into your page. There are three families: **players** for delivery, **builders** for authoring, and **analytics** for reporting. You can use one on its own or combine several. :::info This article covers what the embeddables are and what you need to use them. For the technical setup, including how to generate the URLs and the parameters each one accepts, see the [Coassemble developer docs](https://developers.coassemble.com/embeddables). ::: ## How embeddables work Every embeddable loads in an iframe on your page. The source of that iframe is a secure, signed URL that you generate through the Coassemble API. This isn't a copy-paste iframe snippet, so you'll want a developer involved: your app needs a backend that stores your Coassemble API key securely and generates the signed URL each time someone loads the page. Once that's in place, the embeddable runs inside your product. A few things worth knowing before you plan a placement: * **Signed URLs keep content protected.** Each placement uses its own signed URL, and learner-facing players are signed per user. That keeps your content secure and lets usage be tracked cleanly. * **View mode and edit mode.** Players, cards, lists and analytics run in view mode (take a course, browse, or read a dashboard). Builders run in edit mode (create and edit content inside your product). * **Access is always identified.** Because a signed URL is generated for a known user, anyone who opens an embedded player becomes an Identified Recipient. Anonymous embedding isn't currently available, so an embeddable needs an identifier for the person at page load. For fully anonymous audiences, a share link is the better fit. * **Your app can react to events.** Your app can listen for in-page `postMessage` events as a learner moves through a course, and receive server-to-server webhooks when a course is created, started, or completed. You'll need an API key to generate the signed URLs. The [developer docs](https://developers.coassemble.com/embeddables) cover keys, endpoints, and parameters in full. ## Setting one up Embeddables are set up manually by a developer. There's no toggle in Coassemble that turns one on. Each placement is wired up through the Coassemble API. At a high level, the setup looks like this: 1. **Create an API key** in Coassemble. 2. **Build a small backend in your own app** that stores the key securely. Never put an API key in your front-end code, since anyone could read it there. 3. **Generate a signed URL when the page loads.** Have your backend call the Coassemble API to create a signed URL for the embeddable you want, for the specific person viewing the page. 4. **Add an iframe to your page** and point it at that signed URL. The embeddable renders inside it. 5. **Repeat per placement.** Each embeddable, and each user, gets its own signed URL. The [developer docs](https://developers.coassemble.com/embeddables) have the exact endpoints, parameters, and code samples for each of these steps. ## The embeddable components You choose the components you need rather than dropping in a single fixed portal. **Delivery (players):** * **Course Player:** an interactive course for learners to view and complete. * **Collection Player:** a collection of courses for learners to browse and complete. **Browsing (cards and lists):** * **Course Card / Collection Card:** a single course or collection shown as a clickable preview card. * **Course List / Collection List:** a browsable list of courses or collections shown as a grid of cards. **Authoring (builders):** * **Course Builder:** the course creation and editing tool, running inside your product. * **Collection Builder:** the collection editor for organising and managing courses. **Reporting (analytics):** * **Course Analytics:** a read-only dashboard for a specific course. * **Collection Analytics:** a read-only dashboard for a specific collection. * **User Analytics:** a read-only dashboard for a specific user. ## What's available on your plan On the current plans, every embeddable is included from Build up. All players, cards and lists, the edit-mode builders, and all three analytics dashboards are available on Build, Scale and Partner, along with `postMessage` events and webhooks. The one distinction is **visual theming on embeddables** (styling a placement with a `themeId`), which is available at higher usage tiers within Scale and on Partner. ### On legacy plans (Flow, Pulse, Hub, Embed Core, Embed Automate) If you're on a legacy plan, embeddable availability follows your plan as before: * **Course-level delivery starts on Pulse.** Course Player, Course Card, and Course List are the entry point for embedding. * **Collections and analytics start on Hub.** The collection players, cards and lists come in on Hub, along with all three analytics dashboards. * **Builders are on the Embed plans.** The edit-mode builders are available on Embed Core, Embed Automate, and Embed Partner, along with `postMessage` events and webhooks. * **Visual theming on embeddables** (`themeId`) is available from Embed Automate. * Flow does not include embeddables. ## Where to go next For the full setup, including how to generate signed URLs, the parameters each embeddable accepts, and the event and webhook reference, see the [Coassemble developer docs](https://developers.coassemble.com/embeddables). For current plan details and pricing, see [coassemble.com/pricing](https://coassemble.com/pricing).