Hosts and troubleshooting

You already put Maya's published homepage hero on a plain HTML page. This page is the rest of the hosts — WordPress, Angular, RuleCMS.mount — plus CSP, tokens in page source, and what a blank embed usually means. If you are still looking for the first two tags, go back to HTML Custom Element Embed.

The rest of the hosts

You already put Maya's published homepage hero on a plain HTML page from HTML Custom Element Embed: the versioned script and <rulecms-widget> with the token and published key from Integration. This page is the rest of the hosts — WordPress, Angular, the JavaScript helpers — plus CSP, tokens in page source, and what a blank embed usually means.

The first walkthrough — Integration tab, pin the versioned script, drop the two tags, verify — lives on HTML Custom Element Embed. This page does not replace that path.

WordPress

Her marketing site is WordPress. There is no dedicated plugin yet. She still only needs those two tags.

In Appearance → Theme File Editor — or a child theme, or a site-wide header-and-footer plugin — enqueue the script, or paste the <script src=…> in the footer.
In a page or post, add a Custom HTML block (Gutenberg) that outputs <rulecms-widget> with her token and published key.
Prefer storing the token in wp-config or the host environment and printing it from PHP, rather than hard-coding it in every post.

<?php
// Example theme / plugin output (escape your values!)
$token = esc_attr( getenv('RULECMS_TOKEN') ?: '' );
$key   = esc_attr( 'ENVIRONMENT_ID---widget-…' );
?>
<script src="https://rulecms.com/embed/widget-custom-element@0.4.0/widget-custom-element.iife.js"></script>
<rulecms-widget token="<?php echo $token; ?>" published-key="<?php echo $key; ?>"></rulecms-widget>

Angular

Add the script in angular.json scripts or index.html, then place the element in a template.

<!-- app.component.html -->
<rulecms-widget
  token="YOUR_STAGING_OR_PRODUCTION_TOKEN"
  published-key="ENVIRONMENT_ID---widget-…"
></rulecms-widget>

If the framework strips unknown elements, register CUSTOM_ELEMENTS_SCHEMA on the declaring NgModule, or use RuleCMS.mount below.

Mount with JavaScript

After the script loads, window.RuleCMS exposes mount and unmount. Reach for this when the slot is a div her app already owns, or when a framework will not leave the custom element alone.

<div id="hero-slot"></div>
<script src="https://rulecms.com/embed/widget-custom-element@0.4.0/widget-custom-element.iife.js"></script>
<script>
  RuleCMS.mount(document.getElementById('hero-slot'), {
    token: 'YOUR_STAGING_OR_PRODUCTION_TOKEN',
    publishedKey: 'ENVIRONMENT_ID---widget-…',
    // endpoint: 'https://rulecms.com', // only for tests
  });

  // Later:
  // RuleCMS.unmount(document.getElementById('hero-slot'));
</script>

The option is publishedKey in JavaScript and published-key on the element. Same value. Omit endpoint except in tests — the script still chooses the host from the token.

Tokens in page source

A client token in an HTML attribute is visible to anyone who views the page source. That is the same model as a client-side React embed. It is still a secret worth treating carefully.

Prefer injecting the token from a server template or secret store. Do not commit a Production token to a public git repo.
Scope tokens per environment. A Staging token on the QA WordPress site. A Production token only on the live marketing site.
Rotate the token if it leaks. Disable the old one on Projects, Environments & Tokens.

Content Security Policy

If her site uses CSP, the browser must be allowed to load the script and then fetch the widget.

script-src for https://rulecms.com (and her own origin).
connect-src for https://widget-cache.rulecms.com on Staging or Production, and https://rulecms.com for a dev. token.
Her media host, if images or videos fail after the widget itself loads.

Pin the versioned script in production. The /latest/ URL caches for a few minutes and can pick up a new release without a site deploy.

When something goes wrong

You see	What it usually means
Blank area / missing token or key	Missing `token`, or neither `published-key` nor `ruleset-published-key`. Confirm the pair is non-empty. Both keys set, or `params` that is not a JSON object, shows an alert instead of fetching.
Error loading widget / 401	Wrong or disabled token, or the token's environment does not match the published key. Copy both from the Integration tab.
404 Widget not found	Wrong published key, unpublished widget, or a draft `widget-…` key with a token that does not start with `dev.` — or the reverse.
Script 404	Typo in the URL, or the pinned version is not deployed yet. Try the `/latest/` URL temporarily, then pin the version from the Integration tab.
CSP blocked	Allow `script-src` / `connect-src` for `https://rulecms.com` and `https://widget-cache.rulecms.com`, plus her media host if images or videos fail.
Custom team components missing	This embed ships the ten built-ins. For a team library, use `@rulecms/widget-react` — see Component Libraries.
Custom slot shows a dashed box	This embed cannot receive `mounts`. Register the host component on `@rulecms/widget-react` instead — see Mount Your Own Components.
Staging content looks stale	Published path is cached until republish. Publish again after edits, or use a `dev.` token and the draft key for a live preview.
No R badge on the hero	Published HTML embeds expose `data-rulecms-published-key`. A Development draft does not use that editor path — see Widget Edit Links.

How this fits

This page does not replace the first embed. HTML Custom Element Embed is how she puts the hero on a plain HTML page. This page is WordPress enqueue, Angular, RuleCMS.mount, and what to check when the hero does not appear.

Do not mix Integration (published) with Integrate (Development). Do not mix a dev. token with a published key, or a published token with a draft widget-… key.