Quick start: putting a web component on a page

An embedded WPIntegrate component is two lines of HTML. There is no build step, no framework requirement, and nothing about your Microsoft 365 tenant on the page.

<script src="https://cdn.wpistatic.com/platform.js" async></script>
<wpi-bookings embed-key="your-embed-key"></wpi-bookings>

The loader is the same for every component — it finds the wpi- element on your page and fetches the right bundle itself, so you never name a bundle or a version. The snippet with your own embed key already filled in comes from the component’s page in the dashboard, so you should not have to type it by hand.

The two lines, separately

The script tag registers one custom element with the browser. One file per component: bookings.js defines wpi-bookings, calendar.js defines wpi-calendar, and so on. The element name is always wpi- followed by the component’s slug, which is the same string used in the dashboard, in the URL of its page on this site, and in the filename. If you know the slug you know the tag.

Load only the components the page actually uses. Two components on one page means two script tags.

The element is where the component renders. It takes exactly one attribute, embed-key, and that attribute is what tells the script which configured component this is — which layout, which Microsoft 365 source, which options. Every component takes the same single attribute; none of them take configuration as HTML.

What happens when the page loads

1. The script runs and registers the custom element.
2. The element is upgraded and calls the API for its own configuration, at /api/config/<embed key>.
3. The API resolves the key to a saved component instance, checks that the subscription covers this component type, checks that the request is coming from a site you have allowed, and returns the configuration as JSON.
4. The component renders and then fetches its data.

Every one of those checks happens on our side, per request. Nothing about your licence is enforced in the JavaScript on your page, which is why there is no secret to protect in the markup — see How the embed key works.

Before it will render

Three things have to be true, and all three are set in the dashboard rather than in your HTML:

• The component instance exists and is active.
• Your subscription covers that component type.
• The site you are embedding on is in the instance’s allowed domains list. This list is empty by default and an empty list denies everything, which is the single most common reason a brand-new embed shows nothing. See Restricting a component to your own domains.

If a component renders nothing, the API response says why in a machine-readable code. Component error codes lists them.

A note on availability

The component platform is in pre-launch. The components described in this section are built and their behaviour here is drawn from the code that runs them, but there is no self-service signup for the component line yet — the channel open today is the WordPress plugin store. If you want a specific component, say which one and which Microsoft 365 source it has to read.