Component error codes: why an embed is showing nothing

When a component renders nothing, the answer is in one request. Open the browser’s developer tools, go to the network panel, reload, and find the call to /api/config/ followed by your embed key. Its status and its code field name the cause.

The codes

Status	Code / message	What it means	What to do
404	Component not found	The embed key does not resolve. Either it is mistyped, or the instance was deleted.	Re-copy the snippet from the dashboard.
404	Component is disabled	The instance exists but is switched off.	Reactivate it in the dashboard.
403	(origin message)	The page’s hostname is not in the instance’s allowed-domains list. A new instance denies everything until you name your sites.	See Restricting a component to your own domains.
402	LICENSE_EXPIRED	The trial ended.	Subscribe.
402	LICENSE_INACTIVE	The account has no active subscription.	Check the subscription state on the account.
402	COMPONENT_NOT_LICENSED	The subscription is active but does not cover this component type.	Add that component to the subscription.
402	VIEW_LIMIT	The account has used its views for the current billing cycle. The response reports the count and the cap.	Wait for the cycle to roll, or move to a plan with a higher cap.
503	CONNECTION_DISABLED	The Microsoft 365 connection this instance reads through has been switched off.	Re-enable the connection.
400	WRONG_COMPONENT_TYPE	A data route was called for a component type that does not serve it — usually a hand-edited URL or a mismatched script and element.	Check that the script file and the element tag are for the same component.

Reading the order of the checks

They run in a fixed order, and knowing it saves a step: instance exists → instance active → connection enabled → licence → component entitlement → allowed domain → view cap. So a 403 means the licence was fine; a 402 for the view cap means the domain was fine. Whatever code you get, everything above it in that list already passed.

When there is no failing request at all

If there is no call to /api/config/ in the network panel, the component never booted. Check, in this order:

1. The script loaded. A 404 on the bundle URL is a wrong or truncated src.
2. The tag matches the script. bookings.js defines wpi-bookings only. A wpi-calendar element on a page that loaded bookings.js will sit there inert forever, with no error — an unrecognised custom element is not an error in HTML.
3. The attribute is embed-key. Not key, not embedkey. With no key there is nothing to request.
4. The markup survived your CMS. Some editors strip unknown elements or script tags on save. Look at the rendered page source, not at what you typed.

When it renders but looks wrong

Components mount into the page itself rather than into a shadow root, which is what lets their styling engine work at all — but it also means your site’s CSS reaches them. A component that renders with the right content and the wrong spacing, or with text the wrong size, is usually a broad rule on the host page such as a global * selector or a blanket style on div or button. Narrow the host rule rather than fighting it from inside.

Related

• Restricting a component to your own domains
• How the embed key works, and why it is not a secret
• Ways to place a component on the page