TagBot Template System – Full Guide & Features

TagBot: Complete Guide to the Powerful Template Editing Tool

TagBot is a lightweight and intelligent tagging tool designed to streamline the creation and editing of customizable templates. Whether you're building eBay listings, documentation layouts, or interactive HTML templates, TagBot gives you complete control over dynamic content using simple markup.

Overview of TagBot

TagBot works by defining editable slots directly within your HTML or markup files. These slots can be customized through the TagBot editor—either via the desktop application or the browser-based version. 

[TagBot! Title = My Widget]
[TagBot Description = This is about my item.]

The syntax allows easy creation of fields like titles, descriptions, dropdowns, images, and more. Each slot can hold default content and act as a prompt for the user to fill in.

Desktop vs Web Version Differences

  • Desktop Version: Supports file inclusion using the + symbol, image tiles with relative paths, and merging of slot data back into the source markup.
  • Web Version: Simpler, lightweight, browser-based tool. Lacks file inclusion and merge-back features but supports larger files and more flexible editing in-browser.
A desktop file can't be loaded in the web version and vice versa. Instead, content can be copied and pasted across platforms manually.

Onscreen Differences

  • The + symbol for file inclusion is supported only on the desktop.
  • Relative image paths used in the desktop version won’t render image tiles on the web version.
  • Web TagBot shows only image names unless absolute image URLs are used.
  • The desktop version has a 32KB file size and height limit; the web version does not.

Basic TagBot Syntax

Here’s the breakdown of a basic TagBot:

[TagBot! Title = My Widget]
  • [TagBot]: Always the same keyword (case-insensitive).
  • !: Style symbol for a bold title.
  • Title: The prompt/label for the user.
  • =: Delimiter between prompt and default data.
  • My Widget: Default value for the user to edit.

Style Symbols and Their Meaning

  • ! – Bold title
  • : – URL slot (blue)
  • # – Color picker (orange)
  • – Text slot (default)
  • + – Include a file (desktop only)
  • ^ – Theme selector
  • % – Color chip
  • & – Image chip

Global TagBots

Global TagBots define values once and use them across multiple targets.

[TagBot?VarName? color = red | blue | green]
[TagBot?urlName? Base URL = https://mysite.com]
[TagBot?FntName# choose font = Arial | Courier | Times]

The variable name is placed between two ? and must be unique. Use the same variable in different parts of the code via a target: 

[TagBot?VarName]

Themes and Matrix Matching

Use the ^ symbol to define hidden theme selections. Every Global TagBot using themes must have the same number of pipe-delimited options. 

[TagBot?BGcolor^ background = black | navy | white]
[TagBot?TxtColor^ text = white | white | black]
All theme-linked TagBots must use the same number of options to avoid mismatches.

Target TagBots

Targets do not create editing slots; they serve as placeholders for data values.

[TagBot?VariableName]
[TagBot?random]
[TagBot(25*36+3]
[TagBot(25#c0d5ff]
  • ? – Inserts the Global variable value.
  • random – Replaces with the same random integer throughout.
  • ( math ) – Performs arithmetic operations and substitutes result.
  • # – Adjusts color brightness from 0–100 (50 = neutral).

Section Wrapper TagBots (Enable/Disable Sections)

Section wrappers let users toggle whole blocks of HTML on or off via checkboxes. Ideal for optional content such as packaging, charts, or special notes. 

<TagBot Packaging Info = true>
  <div class="packaging">
    <p>This item includes premium gift packaging.</p>
  </div>
</TagBot>
  • true = section included by default
  • false = section excluded by default
Do not split HTML tag pairs between TagBot wrappers. Always wrap full elements to avoid breaking your layout.

Quick Example – Full Markup

[TagBot! Product Title = Luxury Watch]
[TagBot Description = Timeless design with modern precision.]

[TagBot# Color Options = Silver | Gold | Black]
[TagBot& Product Image = watch.jpg]

<TagBot Show Size Chart = false>
  <div>
    <h4>Size Guide</h4>
    <p>Available in 38mm, 42mm, and 46mm models.</p>
  </div>
</TagBot>

Best Practices

  • Keep TagBot variable names unique and descriptive.
  • Test your output HTML to ensure images and links render properly.
  • Avoid nesting TagBots inside each other.
  • Use themes wisely – align all option lengths when using ^.

Final Thoughts

TagBot empowers you to create smart, editable templates for web listings, product descriptions, documentation, and more. By mastering its syntax, style symbols, and wrapper logic, you can build reusable systems that save time, reduce errors, and scale effortlessly.

Start using TagBot in your projects and elevate your workflow with clean, customizable templates!

Shopping Cart