Example Modules
Learn how to build powerful modules for LinkWrangler by exploring these reference implementations.
Available Examples
Promotional Banner (Action)
A simple module that injects a customized HTML banner into the destination page.
promotional-banner.json
{
"slug": "banner-action",
"type": "action",
"name": "Promotional Banner",
"description": "A sticky banner to show messages or offers.",
"version": "1.1.0",
"author": "LinkWrangler",
"action_key": "banner",
"preview_enabled": true,
"action_schema": {
"type": "object",
"properties": {
"message": {
"type": "string",
"title": "Banner Message",
"default": "<p>Big Sale! 50% Off.</p>",
"x-widget": "RichTextWidget",
"x-layout": "full"
},
"link": {
"type": "string",
"title": "Link URL (Optional)",
"format": "uri",
"x-layout": "full"
},
"position": {
"type": "string",
"title": "Position",
"enum": ["top", "bottom"],
"default": "bottom",
"x-layout": "quarter"
},
"backgroundColor": {
"type": "string",
"title": "Background",
"default": "#3b82f6",
"format": "color",
"x-layout": "quarter"
},
"textColor": {
"type": "string",
"title": "Text Colour",
"default": "#ffffff",
"format": "color",
"x-layout": "quarter"
},
"height": {
"type": "string",
"title": "Height (px)",
"default": "auto",
"x-layout": "quarter",
"x-style": { "width": "75px" }
}
},
"required": ["message"],
"x-order": ["message", "link", "position", "backgroundColor", "textColor", "height"]
},
"template": "<div id=\"lw-banner-root\" class=\"lw-banner-container\">\n <style>\n .lw-banner-container {\n position: fixed; left: 0; width: 100%; z-index: 99999;\n {{#if (eq position 'top')}}top: 0;{{else}}bottom: 0;{{/if}}\n background-color: {{backgroundColor}}; color: {{textColor}};\n font-family: sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n height: {{height}};\n display: flex; align-items: center; justify-content: center;\n padding: 10px 40px 10px 20px;\n box-sizing: border-box;\n animation: lw-slide-in 0.3s ease-out;\n }\n .lw-banner-content { flex: 1; text-align: center; font-size: 16px; }\n .lw-banner-content a { color: inherit; text-decoration: underline; font-weight: bold; }\n .lw-banner-content p { margin: 0; }\n .lw-banner-close { \n position: absolute; right: 15px; top: 50%; transform: translateY(-50%);\n background: transparent; border: none; color: inherit; font-size: 24px; cursor: pointer; \n line-height: 1; opacity: 0.8; transition: opacity 0.2s;\n }\n .lw-banner-close:hover { opacity: 1; }\n @keyframes lw-slide-in {\n from { transform: translateY({{#if (eq position 'top')}}-100%{{else}}100%{{/if}}); }\n to { transform: translateY(0); }\n }\n </style>\n \n <div class=\"lw-banner-content\">\n {{#if link}}\n <a href=\"{{link}}\">\n {{{message}}}\n </a>\n {{else}}\n <div>{{{message}}}</div>\n {{/if}}\n </div>\n \n <button class=\"lw-banner-close\" onclick=\"document.getElementById('lw-banner-root').remove()\" aria-label=\"Close\">×</button>\n</div>"
}Meta Pixel (Integration)
A standard integration that injects third-party tracking scripts into the page header.
meta-pixel.json
{
"slug": "meta-pixel",
"type": "integration",
"name": "Meta Pixel",
"description": "Track visitor activity with the Facebook/Meta Pixel.",
"version": "1.0.0",
"author": "LinkWrangler",
"settings_schema": {
"title": "Meta Pixel Configuration",
"type": "object",
"properties": {
"pixel_id": {
"type": "string",
"title": "Pixel ID",
"description": "Your 15-16 digit Pixel ID from Events Manager."
},
"enabled": {
"type": "boolean",
"title": "Enable Integration",
"default": true
}
},
"required": ["pixel_id"]
},
"template": "<!-- Meta Pixel Code -->\n<script>\n!function(f,b,e,v,n,t,s)\n{if(f.fbq)return;n=f.fbq=function(){n.callMethod?\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};\nif(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\nn.queue=[];t=b.createElement(e);t.async=!0;\nt.src=v;s=b.getElementsByTagName(e)[0];\ns.parentNode.insertBefore(t,s)}(window, document,'script',\n'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '{{settings.pixel_id}}');\nfbq('track', 'PageView');\n</script>\n<noscript><img height=\"1\" width=\"1\" style=\"display:none\"\nsrc=\"https://www.facebook.com/tr?id={{settings.pixel_id}}&ev=PageView&noscript=1\"\n/></noscript>\n<!-- End Meta Pixel Code -->"
}Advanced Overlay
A complex module with rich schema settings, image handling, and conditional rendering logic.
Code coming soon...