Documentation
← Back to Module Development

Module Templates

How to write the dynamic HTML and JavaScript that renders your module.

The Basics

LinkWrangler uses Handlebars for its template engine. When your module is triggered, the system takes your `template` string and "hydrates" it with the User's configuration settings.

The result is a raw HTML string that is injected directly into the user's page.

Accessing Settings

Any property you define in your JSON schema is available as a variable in your template.

JSON Configuration

json
{
  "properties": {
    "headline": { "type": "string" },
    "is_active": { "type": "boolean" }
  }
}

Handlebars Template

json
<div class="banner">
  <h1>{{headline}}</h1>
</div>

Logic & Conditionals

You can use standard Handlebars helpers to add logic to your display.

{{#if}}

Conditionally render content based on a boolean or existence check.

json
{{#if show_badge}}
  <span class="badge">New!</span>
{{else}}
  <span class="badge-empty"></span>
{{/if}}

{{#each}}

Loop through arrays (e.g. a list of product features).

json
<ul>
  {{#each features}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Built-in Helpers

LinkWrangler includes specialized helpers to make common tasks easier.

formatVideoUrl

Automatically converts standard YouTube or Vimeo URLs into valid embed URLs.
Input: https://www.youtube.com/watch?v=dQw4w9WgXcQ
Output: https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0

json
<iframe 
  src="{{formatVideoUrl video_link}}" 
  frameborder="0" 
  allowfullscreen>
</iframe>

JavaScript & CSS

Client-Side Only: Your code runs in the visitor's browser, not on our server. You have full access to the DOM, `window`, and other browser APIs.

You can encompass your logic in standard HTML tags.

Adding Styles

Use a <style> block. It is best practice to prefix your classes to avoid conflicts.

json
<style>
  .lw-banner { background: {{bg_color}}; }
  .lw-banner h1 { font-size: 24px; }
</style>

<div class="lw-banner">...</div>

Adding Scripts

Use a <script> block. It will be executed immediately when injected.

json
<div id="my-widget"></div>

<script>
  // It's safe to use the User's config values here
  const config = {
     id: "{{pixel_id}}",
     debug: {{debug_mode}}
  };

  console.log("Widget loaded", config);
</script>