Customer profiles play a pivotal role in allowing customers to manage their personal information, including account details, billing information, shipping details, and order history. In WebCommander, plugin developers have the capability to enhance this section by adding plugin-specific tabs or sections. This empowers customers to conveniently manage data related to your plugin. Below, we outline the process of configuring custom profile tabs step by step from the WebCommander admin panel.
Overview
Similar to webhooks or ScriptTags, you can register a customer profile tab during the plugin installation process. On the /install endpoint, you need to return an array of configurations with the specified parameters. Here’s an example:
{
"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": "", // 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.
}
],
"customerProfileTabs": [
{
"customerProfileTabIdentifier": "miningbullSubscription", // A unique tab identifier
"customerProfileTabDisplayName": "Subscriptions", // Display name will be displayed in customer configuration section and customer profile. You may change it from configuration.
"customerProfileTabSourceUrl": "https://stage-mnb.clubeez.com/customer/subscrptions" // The page WebCommander will render through iframe for the registered tab.
}
]
}After installing the plugin, the site administrator can navigate to the customer settings section and enable or disable any customer profile tab. WebCommander will render the customer profile custom tab source URL through an iframe, including additional parameters such as “uuid” and “user_token” to ensure security and authentication.
Example URL: https://stage-mnb.clubeez.com/customer/subscriptions?uuid=EF6AA-A8E0-4D0F&user_token=fDJ8CVR39i3O59Oi0YsyXnie6NMTiKvnvr2AR
To adjust the height and width of an iframe, you can use the following code:
window.addEventListener('load', function () {
var data = {
notificationType: "iframeHeightWidthAdjust", // fixed. No need to change.
notificationObj: {
width: document.body.scrollHeight,
height: document.body.scrollWidth,
section: "mining" // unique customerProfileTabIdentifier
}
};
window.parent.postMessage(data, "*")
});This code ensures that the iframe’s dimensions are properly adjusted for an optimal user experience.
By following these steps, you can enhance the customer profile section in WebCommander with custom tabs and sections related to your plugin, providing users with a seamless and personalised experience.