What are ScriptTags?
ScriptTags are a powerful feature in WebCommander that allows you to inject custom JavaScript code into the head of WebCommander pages. This provides you with full control over the page’s content and functionality. When your plugin is installed, WebCommander registers the JavaScript files you provide as ScriptTags, enabling you to customise the behaviour of your online store.
How ScriptTags Work
- Installation: When you install your plugin, WebCommander registers the JavaScript files you provide as ScriptTags.
- Head Injection: These JavaScript files are injected into the
<head>section of WebCommander pages, where they can manipulate the DOM (Document Object Model) and perform various customizations. - Custom Functionalities: You can use ScriptTags to add custom functionalities to your WebCommander store. For example, you can enhance the shopping cart experience, track user interactions, or customize the appearance of specific pages.
Example Response
Here’s an example response from the /install endpoint that demonstrates how to use ScriptTags:
{
"webhooks": [
{
"sourceUrl": "https://yourapp.com/api/v1/cart/added-to-cart", // The url WebCommander will call when firing this hook. Might be an endpoint of your own app.
"eventName": "added-to-cart", // A webhook event name. 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 customize css.
"eventName": "DummyName",
"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.
}
]
}In this example, a ScriptTag is registered with the following details:
sourceUrl: The URL of the JavaScript file to be injected.eventName: Not required for ScriptTags.renderScope: Specifies where the ScriptTag should be applied (e.g., “All” pages).accessType: Defines how your plugin collects or manipulates data (in this case, “scriptTag”).
You can add any desired functionality to the ScriptTags. Nevertheless, please note that if the plugin is uninstalled, all the ScriptTags will be removed from WebCommander.