Documentation

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\">&times;</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...