WebCommander offers widgets that you can easily incorporate into a website using the drag-and-drop editor. These widgets are designed to be user-friendly and require no coding expertise. By selecting a widget from the sidebar in the WebCommander Page editor, users can configure its settings and position it anywhere on your web page. If your plugin requires display on the front end, such as in contact forms, photo galleries, video embedding, or integrating social media feeds, you should consider incorporating one or more widgets into your plugin.
Registering Plugin Widgets
Registering widgets in WebCommander is similar to registering webhooks or ScriptTags. You can provide a list of plugin widgets that need to be registered. Page editors can then drag and drop these widgets onto pages and configure them using options provided by the plugin owner. This allows for easy customisation and design flexibility.
{
"webhooks": [
{
"sourceUrl": "https://yourapp.com/api/v1/cart/added-to-cart", // The url WebCommander will call when firing this hook
"eventName": "added-to-cart", // A webhook. Check Webhook list to find details
"renderScope": "", // Required for script tags
"accessType": "webhook" // A data access type to define which way your plugin collecting data.
}
],
"scriptTags": [
{
"sourceUrl": "https://yourapp.com/assets/js/script-tag.js", // The JS file URL webcommander will render in the head where you can manipulate its dom/data through JS code. Also possible to customise css.
"eventName": "DummyEvent", // Not required for Script Tags.
"renderScope": "All", //Required for script tags. Values: "All/Specific page url"
"accessType": "scriptTag" // A data access type to define which way your plugin collecting or manipulating data.
}
],
"widgets": [
{
"widgetName": "mining", //unique internal identifier of widget(no space and special character and number allowed)
"widgetLabel": "Mining Signup", //widget display name
"widgetTitle": "Mining Signup Widget", //widget title will show on hover Widget
"widgetLogo": "https://stagingmining.mywebcommander.com/template/9738593f/images/package-pricing-icon.svg", // The URL of the logo of this widget
"sourceUrl": "https://stage-mnb.clubeez.com/signup-widget?uuid=BB1EF6AA-A8E0-4D0F", // widget render source url
"configurationUrl": "https://stage-mnb.clubeez.com/configuration-signup-widget?uuid=BB1EF6AA-A8E0-4D0F", //widget configuration endpoint url
}
]
}Response Parameters
| Field Name | Description |
|---|---|
| widgetName | A unique internal identifier for the widget. It should not contain spaces, special characters, or numbers. |
| widgetLabel | The display name of the widget. |
| widgetTitle | The title of the widget, which appears when hovering over it. |
| widgetLogo | The URL of the widget’s logo. |
| sourceUrl | The URL from which the widget is rendered. It is displayed within an iframe in WebCommander. |
| configurationUrl | The URL used for configuring or modifying the widget’s rendering source to enable dynamic rendering. |
In the following example, a plugin widget called “Mining Bull” is registered and rendered. It includes a signup form with a dynamic dropdown feature, which is added through the render source URL. Additionally, a basic controller section is provided in the left sidebar panel, allowing users to customise the title, add a custom class, or include custom CSS and JS. Clicking on the “Configuration” button will redirect you to a configuration page, which is also rendered within an iframe.
Maintaining Widget Dimensions
To ensure proper rendering, you can use the following JavaScript code to dynamically adjust the widget’s height and width:
window.addEventListener('load', function () {
var data = {
notificationType: "iframeHeightWidthAdjust", // fixed. No need to change.
notificationObj: {
width: document.body.scrollWidth,
height: document.body.scrollHeight,
section: "mining" // unique widgetName
}
};
window.parent.postMessage(data, "*")
})By registering and utilising Plugin Widgets in WebCommander, you can enrich your website’s functionality and provide a superior user experience for your visitors.