- Updated: March 17, 2026
- 6 min read
Embedding OpenClaw Rating‑Review UI Components: A Step‑by‑Step Guide for UBOS Plugin Developers
To embed OpenClaw’s rating‑review UI components into an existing UBOS plugin, you need to install the OpenClaw SDK, add the UI widget to your HTML, configure its settings, and then test and publish the updated plugin.
1. Introduction
Plugin developers building on the UBOS homepage often look for ways to enrich user interaction without reinventing the wheel. OpenClaw offers a ready‑made rating‑review UI that can be dropped into any plugin, delivering a polished, GDPR‑compliant feedback loop. This tutorial walks you through the entire process—from prerequisites to publishing—so you can ship a feature‑complete plugin in minutes.
By the end of this guide you will have a fully functional rating‑review component, customized to match your plugin’s branding, and you’ll know how to verify its behavior before releasing it to users.
2. Prerequisites
- Access to a UBOS development environment with Web app editor on UBOS enabled.
- Node.js (v14 or later) and npm installed locally.
- Basic knowledge of HTML, JavaScript, and UBOS plugin architecture.
- An active UBOS partner program account to host the plugin after integration.
If you’re new to UBOS, the About UBOS page provides a quick overview of the ecosystem and its developer resources.
3. Install OpenClaw SDK
OpenClaw distributes its SDK via npm. Open a terminal inside your plugin’s root folder and run:
npm install @openclaw/sdk --save
The command adds the SDK to your package.json and makes the openclaw object available for import.
After installation, verify the package by checking the node_modules/@openclaw/sdk directory. If you encounter permission errors, prepend the command with sudo (Linux/macOS) or run the terminal as Administrator (Windows).
4. Add OpenClaw rating‑review UI component
OpenClaw provides a single custom element <openclaw-review>. Insert it where you want the rating UI to appear—typically inside your plugin’s main view file (src/views/main.html).
<!-- OpenClaw Rating‑Review Widget -->
<openclaw-review
data-product-id="YOUR_PLUGIN_ID"
data-theme="light"
data-language="en">
</openclaw-review>
Replace YOUR_PLUGIN_ID with the unique identifier you assigned to your plugin in the UBOS dashboard. The data-theme attribute accepts light or dark, and data-language follows ISO‑639‑1 codes.
To make the component functional, import the SDK script in your main HTML file, preferably just before the closing </body> tag:
<script src="node_modules/@openclaw/sdk/dist/openclaw.min.js"></script>
<script>
// Initialize OpenClaw with your API key (found in the OpenClaw console)
openclaw.init({ apiKey: 'YOUR_OPENCLAW_API_KEY' });
</script>
5. Configure component settings
OpenClaw’s widget is highly configurable via data attributes or JavaScript. Below are the most common settings you’ll need for a seamless integration:
| Attribute | Description | Default |
|---|---|---|
data-product-id | Unique identifier for the item being reviewed. | — |
data-theme | Visual theme; light or dark. | light |
data-language | Locale for UI strings. | en |
data-max-rating | Maximum star count (1‑5). | 5 |
data-require-comment | Force users to leave a comment. | false |
For dynamic scenarios—such as changing the product ID based on user selection—use the JavaScript API:
// Change product ID at runtime
openclaw.updateWidget('openclaw-review', {
productId: 'NEW_PRODUCT_ID',
theme: 'dark'
});
Remember to keep your API key secure; store it in an environment variable and inject it at build time using UBOS’s Workflow automation studio.
6. Code snippets for integration
Below is a minimal, production‑ready example that you can copy into your plugin’s src/main.js file.
// main.js – Initialize UBOS plugin and OpenClaw
import { ubos } from '@ubos/sdk';
import '@openclaw/sdk/dist/openclaw.min.css'; // Optional styling
// UBOS plugin bootstrap
ubos.init({
pluginId: 'my-awesome-plugin',
env: process.env.NODE_ENV
});
// OpenClaw initialization
openclaw.init({
apiKey: process.env.OPENCLAW_API_KEY,
debug: true
});
// Render the rating‑review widget after UBOS UI is ready
ubos.onReady(() => {
const container = document.getElementById('rating-widget');
if (container) {
container.innerHTML = `
`;
}
});
For TypeScript projects, add the following declaration to avoid compiler errors:
declare const openclaw: {
init(config: { apiKey: string; debug?: boolean }): void;
updateWidget(id: string, options: Record): void;
};
If you prefer a modular approach, you can wrap the widget in a reusable component using UBOS’s Web app editor on UBOS and import it wherever needed.
7. Testing and verification
Before publishing, run both unit and integration tests. UBOS provides a built‑in test runner that works with Jest. Install the test utilities:
npm install @ubos/test-utils --save-devExample Jest test that checks whether the widget renders with the correct product ID:
import { render } from '@testing-library/dom';
import '@openclaw/sdk';
test('OpenClaw widget renders with correct product ID', () => {
document.body.innerHTML = ``;
// Simulate plugin init
openclaw.init({ apiKey: 'test-key' });
// Render widget
const widget = document.createElement('openclaw-review');
widget.setAttribute('data-product-id', 'test-plugin');
document.getElementById('rating-widget').appendChild(widget);
expect(widget.getAttribute('data-product-id')).toBe('test-plugin');
});
After unit tests pass, launch a local UBOS sandbox (ubos serve) and manually verify:
- Stars display correctly in both light and dark themes.
- Submitting a rating stores data in the OpenClaw dashboard.
- Internationalization works when you change
data-language.
For automated UI testing, consider integrating Cypress with the Enterprise AI platform by UBOS to capture visual regressions.
8. Publishing the plugin
Once testing is complete, bundle your plugin using UBOS’s CLI:
ubos build --mode=production
The command generates a .ubos package ready for upload. Navigate to the OpenClaw hosting page and follow the wizard to publish your plugin. You’ll be prompted to:
- Select the built
.ubosfile. - Enter a descriptive title and changelog.
- Choose a pricing tier from the UBOS pricing plans (Free, Pro, Enterprise).
- Optionally attach a template from the UBOS templates for quick start to help users extend your plugin.
After submission, the UBOS review team will validate the integration. Once approved, your plugin appears in the UBOS portfolio examples and is discoverable by the community.
9. Conclusion and next steps
Embedding OpenClaw’s rating‑review UI into a UBOS plugin is straightforward when you follow the systematic steps outlined above. You now have a fully functional feedback loop that can drive product improvements and increase user engagement.
Next steps you might consider:
- Leverage AI marketing agents to automatically promote high‑rating plugins.
- Explore the UBOS partner program for co‑marketing opportunities.
- Build additional UI components (e.g., Telegram integration on UBOS) to broaden your plugin’s ecosystem.
For deeper insights into building AI‑enhanced plugins, check out the Enterprise AI platform by UBOS and the Workflow automation studio. Happy coding!
Source: Original News Article