Project Setup

In the initial stages of plugin development for WebCommander, you can create a configuration page, which serves as the central hub for your plugin’s setup. This page will also determine where users land when they access your plugin through the marketplace. Additionally, you must set up the install and uninstall endpoints for your plugin. After installation, your plugin can return various types of configurations, such as webhooks, scriptTags, widgets, customerProfileTabs, and apiAccessScopes. It’s important to clearly state what you need from these configurations during this process.

Configuration Page

Your plugin’s configuration page, often referred to as the landing page, is where users can adjust settings, connect to external services, and customise how your plugin behaves within WebCommander.

Install and Uninstall Endpoints

During the installation process of your plugin, you need to implement both the install and uninstall endpoints. These endpoints are crucial for setting up and removing your plugin’s functionality within WebCommander.

Install Endpoint

The install endpoint is responsible for returning the configurations that your plugin requires. It can return four types of configurations: webhooks, scriptTags, widgets, customerProfileTabs, and apiAccessScopes.

Example:

{
    "webhooks": [
        {
            "sourceUrl": "https://yourapp.com/api/v1/cart/added-to-cart",
            "eventName": "added-to-cart",
            "renderScope": "",
            "accessType": "webhook"
        }
    ],
    "scriptTag": [
        {
            "sourceUrl": "https://yourapp.com/assets/js/script-tag.js",
            "renderScope": "All",
            "accessType": "scriptTag"
        }
    ],
    "customerProfileTabs": [
        {
            "customerProfileTabIdentifier": "myPluginTab",
            "customerProfileTabDisplayName": "My Plugin",
            "customerProfileTabSourceUrl": "https://yourapp.com/plugin/my-plugin"
        }
    ]
}

Uninstall Endpoint

The uninstall endpoint handles the removal of your plugin’s functionality from WebCommander. It should perform any necessary cleanup or de-registration of resources associated with your plugin.

Plugin Integration Options

Webhooks

Webhooks allow your plugin to subscribe to and receive notifications about specific events within WebCommander. To request webhooks, you need to specify the name, scope, access type, event name, and source URL.

Example

{
    "sourceUrl": "https://yourapp.com/api/v1/cart/added-to-cart",
    "eventName": "added-to-cart",
    "renderScope": "",
    "accessType": "webhook"
}

ScriptTags

ScriptTags enable you to inject JavaScript code into the WebCommander interface. You can use them to manipulate the DOM or customise the user interface. When requesting script tags, define the source URL and render scope.

Example

{
    "sourceUrl": "https://yourapp.com/assets/js/script-tag.js",
    "eventName": "",
    "renderScope": "All",
    "accessType": "scriptTag"
}

Widgets

Widgets provide additional UI components that can be integrated into WebCommander. Specify the widget’s details when requesting widgets.

Example

{
    "widgetName": "WidgetABC",
    "widgetLabel": "DummyWidget",
    "widgetTitle": "DummyWidget",
    "widgetLogo": "https://example.com/assets/images/widget-icon.svg",
    "sourceUrl": "https://example.com/DummyWidget/Index",
    "configurationUrl": "https://example.com/DummyWidgetSettings/Index"
}

Customer Profile Tabs

Customer Profile Tabs let you add custom tabs to the customer profile section in WebCommander. Define the tab’s identifier, display name, and source URL.

Example

{
    "scopes": ["read_orders", "write_products"]
}

ApiAccessScopes

ApiAccessScopes determines the level of access and permissions your plugin requires when interacting with WebCommander’s APIs. Specify the needed scopes for your plugin’s functionality.

Example

{
    "scopes": ["read_orders", "write_products"]
}

Creating a plugin configuration page and implementing install and uninstall endpoints are essential steps in WebCommander plugin development. By specifying the required configurations, such as webhooks, scriptTags, widgets, customerProfileTabs, and apiAccessScopes, you can tailor your plugin to meet specific needs and interact seamlessly with WebCommander.