DevelopersHTML

HTML SDK

Embed published RuleCMS widgets in HTML

Any HTML host can load one script from RuleCMS and drop in <rulecms-widget>. WordPress, PHP, static sites, and Webflow custom code do not need a JavaScript framework.

Getting started guide →

Install and embed

Add @rulecms/widget-custom-element and render a published widget.

index.htmlHTML
<script src="https://rulecms.com/embed/widget-custom-element@0.3.2/widget-custom-element.iife.js"></script>
index.htmlHTML
<script src="https://rulecms.com/embed/widget-custom-element@0.3.2/widget-custom-element.iife.js"></script><rulecms-widget  token="your-environment-token"  published-key="your-widget-key"></rulecms-widget>

No host framework required

The composer does not care that the page is plain HTML.

A static page is a complete RuleCMS customer. Editors still build heroes and landing blocks in the visual composer, preview phone through desktop, and promote from staging to production. You load the embed script once and place <rulecms-widget> with a token and published key.

The script already includes the default RuleCMS cards — text, images, video, icons, buttons, dividers, embeds, lists, and accordions. Your page does not install npm packages or register a library. Custom design systems in the composer remain a React path. Stay on HTML when the host is not a React app.

Script tag and custom element

Load the script once. Place as many widgets as the page needs.

Prefer the versioned /embed/widget-custom-element@… URL so a new release cannot change your page unexpectedly. The HTML Custom Element Embed docs cover WordPress, CSP, and Development drafts.

Tokens and environments

Same environment rules as every official SDK.

  • Staging and production: plain token + environmentId---widget-… published key.
  • Development: dev. token + draft widget key for live drafts.

Omit endpoint. Published tokens hit widget-cache; dev. tokens hit rulecms.com. Credentials live in project settings. The HTML sample lab is a public teaching project with a live demo — use it to see the two tags, not as a production template.

Optional JavaScript mount

After the script loads, window.RuleCMS can mount into an existing node when a template cannot emit unknown custom elements.

mount.htmlHTML
<div id="hero-slot"></div><script src="https://rulecms.com/embed/widget-custom-element@0.3.2/widget-custom-element.iife.js"></script><script>  RuleCMS.mount(document.getElementById("hero-slot"), {    token: "your-environment-token",    publishedKey: "your-widget-key",  });</script>

Packages

Install from the public registry. These are the supported SDK surfaces — not GitHub source repos.

Sample labs

Public teaching projects that show the integration pattern. Copy the wiring, not the app architecture — they are not production starters.

HTML sample lab

Plain HTML page that loads the embed script and renders a published widget. No host framework.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.

Other SDKs

Same published widgets and environment tokens. Pick the guide for the stack you ship.

Explore RuleCMS

Dive deeper into what makes RuleCMS different.

Ship HTML with RuleCMS

Create a project, provision three environments, and copy a scoped API token.