RuleCMS Widget Demo

This is a demonstration of how to embed RuleCMS widgets in any HTML page — no React, Vue, or other framework required

Demo RuleCMS Widget

The widget below is rendered by the <rulecms-widget> custom element. The script above loads from rulecms.com/embed/widget-custom-element@0.2.0/… and already includes the default RuleCMS cards.

Getting Started

If you are seeing an error below, replace the demo token and published-key attributes on <rulecms-widget> in index.html with values from your RuleCMS.com account.

Integration Steps

  1. Load the embed script once: <script src="https://rulecms.com/embed/widget-custom-element@0.2.0/widget-custom-element.iife.js"></script>
  2. Place <rulecms-widget> where the content should appear
  3. Set token and published-key from your RuleCMS project
  4. That is it. No npm install and no host framework

Next Steps

  • Replace the demo token and published key in index.html
  • Create and publish more widgets in the RuleCMS composer
  • Drop the same two tags into WordPress, PHP, Webflow, or any other HTML host
  • Read the HTML Custom Element Embed docs