Widget Installation

Install the OnLeads chat widget on your website to start converting visitors into qualified leads automatically.

Before You Start

You have an OnLeads account. Sign up here if you don't have one.
You have created a widget in your dashboard.
You have access to your website's HTML or code editor.

Installation Steps

Get Your Widget ID

Go to your Widgets page and click the icon on any widget. Copy the Widget ID or the entire embed code.

Add the Code to Your Website

Copy and paste the following code before the closing </body> tag in your HTML:

<!-- OnLeads Widget -->
<script>
  window.onleadsConfig = {
    widgetId: 'your-widget-id-here'
  };
</script>
<script src="https://onleads.chat/widget.js" async></script>

Important: Replace your-widget-id-here with your actual Widget ID from the dashboard.

Verify Installation

Open your website in a browser and look for the chat widget bubble (usually in the bottom-right corner). Click it to test the chat interface.

If you see the chat bubble, your installation is successful!

Platform-Specific Guides

WordPress

Use a plugin like "Insert Headers and Footers" or edit your theme's footer.php file to add the code before the closing body tag.

Wix

Go to Settings >Custom Code, add the code to "Head" or "Body - End" section, and apply it to all pages.

Squarespace

Go to Settings > Advanced >Code Injection and paste the code in the "Footer" section.

Custom Website

Add the code to your main layout or template file, just before the closing body tag. Works with React, Vue, Angular, or plain HTML.

Configuring AI Tools

Each widget can have its own set of AI tools enabled. Tools give the AI additional capabilities like booking appointments or syncing leads to your CRM. You control which tools are active on each widget independently.

Available Tools

Tool	Requires	What It Does
Calendar Booking	Google Calendar connector	AI checks availability and books appointments
CRM Sync	HubSpot connector	Qualified leads are synced to your CRM automatically
Product Search	Product catalog	AI can search and recommend your products
Knowledge Base	Knowledge entries	AI references your custom knowledge base

How to Bind Tools

1
Go to your Widgets page and select the widget you want to configure
2
Open the Connectors tab and connect any external services you need (e.g., Google Calendar, HubSpot CRM)
3
Switch to the Tools tab and enable the AI tools you want. Each tool is bound to its corresponding connector.

Per-widget control: Different widgets can have different tools enabled. For example, a widget on your pricing page might have calendar booking enabled, while a support widget might only use the knowledge base.

Smart Page Context

The widget automatically reads your page's title, URL, meta tags, and structured data (JSON-LD) to give the AI context about what the visitor is looking at. This works out of the box with zero configuration.

What's captured automatically

Page title and URL - so the AI knows which page the visitor is on
Meta tags - description, og:title, og:description, og:image
JSON-LD structured data - product type, name, price, address (from Schema.org markup)

Custom signals with `data-onleads-*`

For page-specific data not captured by standard meta tags, add data-onleads-signal attributes to any HTML element. The widget reads these automatically and sends them to the AI.

<!-- The AI will know this listing costs $450,000 -->
<span data-onleads-signal="price">$450,000</span>
<span data-onleads-signal="bedrooms">3</span>
<span data-onleads-signal="address">123 Main St, Austin, TX</span>

<!-- Use data-onleads-value when visible text differs from the value -->
<div data-onleads-signal="property_type" data-onleads-value="Single Family Home">
  Detached House
</div>

Result: When a visitor opens the chat on this page, the AI already knows the property costs $450,000, has 3 bedrooms, and is located at 123 Main St. The conversation starts with relevant context instead of generic questions.

Industry examples

Real Estate

<h1 data-onleads-signal="listing_title">Charming 3-Bed Home in Oak Park</h1>
<span data-onleads-signal="price">$450,000</span>
<span data-onleads-signal="bedrooms" data-onleads-value="3">3 Beds</span>
<span data-onleads-signal="sqft" data-onleads-value="1850">1,850 sq ft</span>

Automotive

<h1 data-onleads-signal="vehicle">2024 Toyota Camry XSE</h1>
<span data-onleads-signal="price">$32,990</span>
<span data-onleads-signal="mileage" data-onleads-value="12500">12,500 miles</span>

SaaS

<div data-onleads-signal="plan" data-onleads-value="Enterprise">Enterprise Plan</div>
<span data-onleads-signal="price" data-onleads-value="$299/mo">$299/month</span>
<span data-onleads-signal="trial" data-onleads-value="14 days">14-day free trial</span>

Limits

Max 10 custom signals per page

Signal keys: max 50 characters

Signal values: max 500 characters

Total payload: max 2KB

UTM Campaign Tracking

The widget automatically captures UTM parameters from your page URL. No configuration needed - just use standard UTM-tagged links in your ads, emails, or social posts.

How it works

1
Visitor arrives via a UTM-tagged URL, e.g. yoursite.com/listings?utm_source=google&utm_campaign=spring_sale
2
The widget reads the UTM parameters and sends them with the first chat message
3
UTM data is stored on the lead record and visible in your dashboard - you can see which campaigns are generating conversations
4
The AI receives campaign context, so it can tailor the conversation - e.g., a visitor from a "luxury homes" campaign gets a premium-focused greeting

Supported parameters

Parameter	Example	Purpose
`utm_source`	google, facebook, newsletter	Where the traffic came from
`utm_medium`	cpc, email, social	Marketing channel
`utm_campaign`	spring_sale, launch_2026	Campaign name
`utm_term`	luxury homes austin	Paid search keyword
`utm_content`	hero_cta, sidebar_ad	Ad variant (A/B testing)

Troubleshooting

Widget not appearing▼

Make sure you've replaced the Widget ID placeholder with your actual ID. Also check that the script tags are properly closed and the code is placed before the closing body tag.

Widget appears but doesn't respond▼

Check your browser console for errors. This usually happens when the widget ID is incorrect or the widget is inactive in your dashboard.

Styling conflicts▼

The widget uses scoped CSS that shouldn't conflict with your site. If you see styling issues, contact support with details about your website platform.