Setting up the LeadTrackr LeadBot

The LeadTrackr LeadBot is a lightweight contact bot that sits in the bottom corner of your website. Visitors can fill in a form, call you directly, or start a WhatsApp conversation — and every lead lands in your LeadTrackr project with full attribution (channel flow, gclid, wbraid, fbc, fbp, and GA4 client ID).

One script tag — a single self-contained file (±20 KB gzip), no dependencies
Your own forms — compose as many forms as you need, with your own fields, straight from the configuration
No styling conflicts — renders inside a Shadow DOM, so your site’s CSS and the LeadBot never interfere
Compatible with the rest of LeadTrackr — shares the same ChannelFlow cookies and lead format, so the LeadBot runs side by side with the GTM tag and the WordPress plugin
Multilingual — follows your page’s lang attribute (nl/en, falls back to English)
Fully themeable — every color can match your brand through configuration

Step 1: Find your project ID

Go to app.leadtrackr.io/dashboard/projects
Open the project you want to connect
Your project ID is visible in the URL
- Example: https://app.leadtrackr.io/projects/16 → project ID = 16

Step 2: Add the LeadBot to your website

Option A: Google Tag Manager (recommended)

Go to Tags and click New
Select Custom HTML as the tag type
Paste the snippet below and fill in your details
Set the trigger to All Pages
Preview, then publish your container

<script>
window.ltLeadBotConfig = {
  projectId: "YOUR_PROJECT_ID",
  companyName: "Example Inc.",
  agentName: "Nick",
  agentPhoto: "https://example.com/team/nick.jpg",
  phone: "+31 20 123 4567",
  whatsapp: "+31612345678"
};
</script>
<script src="https://cdn.jsdelivr.net/gh/leadtrackr/leadtrackr-leadbot@1/dist/lt-leadbot.min.js" async></script>

Keep the configuration block above the script tag — the LeadBot reads it once on load.

Option B: Directly in your site

Paste the same snippet just before the closing </body> tag of your site template. This works on any platform (WordPress, Webflow, Shopify, custom builds).

Step 3: Test your setup

Open your website — the launcher with your agent photo appears in the bottom-right corner
Send a test message through the contact form and the WhatsApp flow
Check your LeadTrackr project: both test leads appear with their attribution data
Optional: open GTM preview mode and confirm the leadtrackr_leadbot_* events fire in the dataLayer

Configuration reference

All options go in window.ltLeadBotConfig:

Option	Default	Description
`projectId`	—	Required. Your LeadTrackr project ID
`companyName`	`""`	Company name shown in the header and teaser
`agentName`	`""`	Name of the team member shown in the LeadBot
`agentPhoto`	`""`	URL of a profile photo (launcher and panel); empty shows an initial
`greeting`	per language	Greeting in the teaser, panel, and WhatsApp chat
`phone`	`null`	Phone number for the call channel; `null` hides the channel
`whatsapp`	`null`	WhatsApp number (wa.me target); `null` hides the channel
`channels`	`["contact_form","phone","whatsapp"]`	Order equals display order; every id that is not `phone` or `whatsapp` must exist in `forms`
`forms`	built-in `contact_form`	Your own forms and their fields (see below)
`launcher`	`true`	`false` hides the LeadBot launcher entirely, e.g. to run interceptor-only
`whatsappInterceptor`	`false`	`true` intercepts clicks on your site’s existing WhatsApp links and opens the LeadBot flow instead (see below)
`position`	`"right"`	`"right"` or `"left"`
`offset`	`{ bottom: 20, side: 20 }`	Distance from the corner in pixels
`teaser`	`true`	Teaser bubble; a dismissal is remembered per session
`defaultCountry`	auto	Preselected country in the WhatsApp phone step; defaults to the visitor’s browser locale (`nl-BE` → Belgium), falling back to `NL`. No IP geolocation is used
`language`	auto	Force `"nl"` or `"en"`; default follows the page’s `lang` attribute
`responseTimeText`	per language	For example `"Average response time: within 15 minutes"`
`callTracking`	`false`	Read the phone number from the LeadTrackr call tracking cookie (see below)
`theme`	LeadTrackr colors	Override any color, see below
`texts`	per language	Override any UI string per key

When agentName is set, the LeadBot speaks in first person (“How can I help you?”). Without an agent it uses “we” instead.

Forms

Every form is a channel of its own. Its id goes in channels (whether the button shows, and where) and in forms (what sits behind it). Without a forms block you get the built-in contact_form: name, email address, and message.

window.ltLeadBotConfig = {
  projectId: "YOUR_PROJECT_ID",
  channels: ["callback", "contact_form", "phone", "whatsapp"],
  forms: {
    callback: {
      title: "Request a callback",           // button in the panel
      sub: "We call you back the same day",  // line underneath
      icon: "phone",                         // chat | phone | mail | whatsapp
      formName: "LeadBot — Callback",        // the lead's form name in LeadTrackr
      successTitle: "Thanks!",
      successBody: "We will call you back shortly.",
      fields: [
        { key: "name", required: true },
        { key: "company", label: "Company name", required: true },
        { key: "phone", required: true },
        { key: "message", placeholder: "What is your question about?" }
      ]
    }
  }
};

A field is { key, label, type, required, placeholder } and only key is required. Keys may contain letters, digits, _, and -; a field with any other key is skipped.

Field type	Behavior
`text`	Plain input (the default)
`email`	Validated as an email address
`tel`	Native country code selector, stored as an E.164 number
`textarea`	Multi-line input

Fields without required: true are optional and are labeled as such.

Reserved keys

Four keys carry a fixed meaning. Use them and the value lands in the lead’s user data and in the user_data object for enhanced conversions:

Key	Goes to
`name`	First and last name, split on the first space
`email`	Email address
`phone`	Phone number
`message`	The lead’s message

Every other key travels along as a regular form field on the lead. For the four reserved keys you do not need to fill in anything else — label, type, and placeholder come from the language file:

fields: [{ key: "name" }, { key: "email" }, { key: "message" }]  // the built-in form

Anything you leave out falls back to your page’s language, so { title, fields } is enough for a working form. To change the built-in form, define contact_form in forms — your definition wins. A form without a usable field gets no button.

Because each form is its own channel, its id is what appears in channel in the dataLayer. That lets you trigger a Google Ads conversion on a callback request alone, separately from a general enquiry.

Theme

Match the LeadBot to any brand by overriding colors:

theme: {
  primary: "#52B483",        // buttons, accents, pulse animation
  primaryHover: "#3E8762",
  primaryTint: "#EDF8F2",    // icon tiles and hover states
  launcherBorder: "#52B483",
  headerBg: "#FFFFFF",
  headerText: "#020A24",
  panelBg: "#FFFFFF",
  text: "#1F2937",
  textMuted: "#6B7280",
  border: "#E5E7EB",
  error: "#FF6A6A",
  radius: 16
}

The WhatsApp chat view deliberately keeps its authentic WhatsApp look regardless of your theme.

Language

The LeadBot reads the lang attribute of your page (<html lang="nl"> shows Dutch, <html lang="en"> shows English) and falls back to English for missing or unsupported languages. Every visible string can be overridden through the texts object.

Call tracking integration

If you use LeadTrackr call tracking (dynamic number insertion), the regular swap script cannot reach inside the LeadBot’s Shadow DOM. Set callTracking: true and the LeadBot reads the dynamic number from the call tracking cookie itself, for both the displayed number and the tel: link:

window.ltLeadBotConfig = {
  projectId: "YOUR_PROJECT_ID",
  phone: "+31 20 123 4567",   // fallback when no tracking cookie is present
  callTracking: true
};

The number is read on every render, so it also works when the cookie is set after page load
Without a valid cookie the LeadBot falls back to the configured phone; without either, the call channel is hidden
Multiple swap groups: callTracking: { swapGroup: 1 }

With callTracking: true, a click on the call channel does not push a conversion event — call tracking measures the actual call, so a click conversion would double count.

dataLayer events

The LeadBot pushes three events, always flat — only event, channel, and user_data:

// LeadBot opened
window.dataLayer.push({ event: "leadtrackr_leadbot_open" });

// Channel selected (phone | whatsapp | the id of one of your forms)
window.dataLayer.push({ event: "leadtrackr_leadbot_channel_click", channel: "whatsapp" });

// Conversion — user_data depends on the channel
window.dataLayer.push({
  event: "leadtrackr_leadbot_conversion",
  channel: "contact_form",
  user_data: {
    email_address: "example@email.com",
    first_name: "Jane",
    last_name: "Doe"
  }
});

Use leadtrackr_leadbot_conversion as the trigger for your GA4, Google Ads, or Meta tags. The user_data object is ready for enhanced conversions and advanced matching.

Do not trigger a LeadTrackr lead tag on leadtrackr_leadbot_conversion events. The LeadBot already delivers every lead to your project — an extra tag would create duplicates.

How the WhatsApp flow works

The visitor types a message in a WhatsApp-style chat
The visitor enters the phone number they want to start the conversation with (full international country list)
The lead is stored in your LeadTrackr project first
WhatsApp opens in a new tab with the message prefilled — the visitor sends it there to start the conversation

You capture the lead and its attribution even if the visitor never sends the WhatsApp message. The message field is multi-line and grows with the content. On desktop, Enter sends and Shift+Enter adds a line break; on mobile the return key adds a line break and the send button sends — the same behavior as WhatsApp itself.

WhatsApp Interceptor

Most websites already have WhatsApp links — a “Chat with us” button, a link in the footer or on the contact page. Clicking one normally opens WhatsApp directly, and the lead is invisible to your tracking. With the WhatsApp Interceptor the LeadBot captures those clicks:

window.ltLeadBotConfig = {
  projectId: "YOUR_PROJECT_ID",
  whatsappInterceptor: true,
  agentName: "Jane",
  agentPhoto: "https://example.com/jane.jpg"
};

When a visitor clicks a WhatsApp link, the LeadBot opens a modal (centered on desktop, bottom sheet on mobile) with the same WhatsApp chat flow: message → phone number → lead stored in LeadTrackr → WhatsApp opens with the message prefilled. How links are handled:

Recognized formats: wa.me/<number>, api.whatsapp.com/send, web.whatsapp.com/send, and whatsapp://send
The destination number comes from the clicked link, so different links (sales, support) keep their own numbers; a ?text= parameter prefills the message field
Links without a number fall back to the configured whatsapp number; if neither exists, the link works as before
Group invites (chat.whatsapp.com) and shortcode links (wa.me/message/…) are never intercepted
Works for links added after page load, too

Combinations:

Setup	Config
LeadBot only (default)	—
LeadBot + interceptor	`whatsappInterceptor: true`
Interceptor only, no launcher	`whatsappInterceptor: true, launcher: false`

Interceptor leads arrive with the form name LeadBot — WhatsApp Interceptor, so you can tell them apart from leads that came through the LeadBot panel. The dataLayer events use channel: "whatsapp", identical to the regular WhatsApp channel.

Versions

The snippet above uses @1, which automatically serves the latest 1.x release. Updates propagate through the CDN within about 12 hours; returning visitors may hold a cached version for up to 7 days. If you prefer exact control, pin a specific version and update it manually — a pinned URL is a new URL, so it takes effect immediately for every visitor:

<script src="https://cdn.jsdelivr.net/gh/leadtrackr/leadtrackr-leadbot@1.5.0/dist/lt-leadbot.min.js" async></script>

To check which version a page is running, look at the first line of the loaded bundle (/*! LeadTrackr LeadBot v1.5.0 … */) or the x-jsd-version response header. Releases and source code live at github.com/leadtrackr/leadtrackr-leadbot.

Troubleshooting

The LeadBot does not appear. Check the browser console: [LeadTrackr LeadBot] data-project-id ontbreekt means no projectId was found. Make sure it is set in ltLeadBotConfig and the config block sits above the script tag. A channel is missing. The call channel only shows with a phone number (or callTracking enabled), and the WhatsApp channel only with a whatsapp number. Any other id in channels needs a matching entry in forms with at least one usable field. You seem to load an old version. Open DevTools → Network, click lt-leadbot.min.js, and check the x-jsd-version response header. Hard refresh (Cmd/Ctrl+Shift+R) to bypass browser cache, or pin the latest version in the URL. Call tracking number is not swapped. Run this in the console on your site:

document.cookie.split('; ').filter(c => c.startsWith('yeswetrack_'))

An empty result means call tracking is not active on that page. Also confirm callTracking: true is set in your configuration.

What’s next?

Set up Channel Flow Tracker

Track the full user journey with UTM parameters

Connect conversion destinations

Push qualified leads to Google Ads, GA4, and Meta

Cookies used by LeadTrackr

The lt_channelflow and lt_session cookies the LeadBot writes, for your cookie policy

Getting Started

Lead Sources

Conversion Destinations

Conversion Labels

Reference

Setting up the LeadTrackr LeadBot

Step 1: Find your project ID

Step 2: Add the LeadBot to your website

Option A: Google Tag Manager (recommended)

Option B: Directly in your site

Step 3: Test your setup

Configuration reference

Forms

Reserved keys

Theme

Language

Call tracking integration

dataLayer events

How the WhatsApp flow works

WhatsApp Interceptor

Versions

Troubleshooting

What’s next?

Set up Channel Flow Tracker

Connect conversion destinations

Cookies used by LeadTrackr

​Step 1: Find your project ID

​Step 2: Add the LeadBot to your website

​Option A: Google Tag Manager (recommended)

​Option B: Directly in your site

​Step 3: Test your setup

​Configuration reference

​Forms

​Reserved keys

​Theme

​Language

​Call tracking integration

​dataLayer events

​How the WhatsApp flow works

​WhatsApp Interceptor

​Versions

​Troubleshooting

​What’s next?

Set up Channel Flow Tracker

Connect conversion destinations

Cookies used by LeadTrackr

Step 1: Find your project ID

Step 2: Add the LeadBot to your website

Option A: Google Tag Manager (recommended)

Option B: Directly in your site

Step 3: Test your setup

Configuration reference

Forms

Reserved keys

Theme

Language

Call tracking integration

dataLayer events

How the WhatsApp flow works

WhatsApp Interceptor

Versions

Troubleshooting

What’s next?