Knowledge base Web components Embedding
Ways to place a component on the page
The custom element is the normal form. A plain div with a data attribute is the fallback for editors and page builders that strip unknown tags.
Published 12 August 2026
Every component ships two mount points. They render the same thing; the second exists because not every editor will let you write the first.
The custom element
The normal form, and the one the dashboard gives you:
<script src="https://cdn.wpistatic.com/platform.js" async></script>
<wpi-calendar embed-key="your-embed-key"></wpi-calendar>Use this wherever you control the HTML — a template, a theme file, a raw-HTML block, a site builder’s embed widget.
The div fallback
Some editors sanitise markup on save and drop elements they do not recognise. If your
wpi-… tag disappears between saving and publishing, use the div form instead. It is a
div with the component’s name as its id and the embed key in a data-key
attribute:
<script src="https://cdn.wpistatic.com/platform.js" async></script>
<div id="wpi-calendar" data-key="your-embed-key"></div>The script looks for both on load. There is no difference in what renders, what is fetched, or what is enforced.
Two details worth knowing about the div form: the id is what identifies the
component, so the same id can only appear once per page, and both the id and the
data-key must be present — a matching id with no key is skipped rather than treated
as an error.
Choosing a place in the layout
The component fills the width of whatever contains it and grows to the height its
content needs. Put it in a container that has a width and no fixed height. A parent
with overflow: hidden and a short fixed height will clip it, and that clipping is
your page’s, not the component’s.
More than one component on a page
Load one script per component type, and each element carries its own key:
<script src="https://cdn.wpistatic.com/platform.js" async></script>
<wpi-persons embed-key="key-for-the-team-list"></wpi-persons>
<wpi-bookings embed-key="key-for-the-booking-form"></wpi-bookings>Two instances of the same component on one page need one script tag and two elements with two different keys.
What components do not accept as markup
Configuration is not passed as HTML attributes. There is no layout= or theme= to
set on the tag — the element takes the embed key and nothing else, and everything about
how it looks and what it reads comes back from the server against that key. This is
deliberate: it means changing a component’s configuration does not require anyone to
edit a page that may have been published years ago.
Related
Read next
-
Web components · Getting started
Quick start: putting a web component on a page
What the two lines of an embed actually are, what the browser does with them, and what has to be true before a component renders.
-
Web components · Configuration
How the embed key works, and why it is not a secret
The embed key names one configured component instance. It travels in your page source, so it is public by design — the protections sit on the server, not on the key.
-
Web components · Configuration
Restricting a component to your own domains
Every component instance carries a list of hostnames allowed to render it. The list is empty on a new instance and an empty list denies everything — this is the usual reason a fresh embed shows nothing.