Skip to main content

Lead Capture Widget

What It Isโ€‹

The Lead Capture Widget is a small floating button that appears on any website. When a visitor clicks it, a form pops up asking for their name, email, phone number, and a message. When they submit the form, a new lead is created in LeadHub automatically โ€” and any automations you have set up fire immediately.

You do not need to touch your website's code beyond adding one line of JavaScript.

Creating a Widgetโ€‹

Go to Tools โ†’ Lead Widgets in the sidebar (it may appear under the navigation group labeled "Tools").

  1. Click New Lead Capture Widget.
  2. Fill in the configuration (see below).
  3. Click Save.
  4. Click Get Embed Code on the widget you just created.
  5. Copy the JavaScript snippet and add it to your website.

Configuration Optionsโ€‹

Widget Identityโ€‹

FieldWhat it does
NameInternal label โ€” only visible to your team, not to website visitors
HeadlineThe main title shown inside the popup form (e.g. "Get in touch")
SubheadlineOptional smaller text below the headline
Button TextThe text on the submit button (e.g. "Send Message")
Success MessageWhat the visitor sees after they submit the form (e.g. "Thanks! We'll be in touch shortly.")

Appearanceโ€‹

FieldWhat it does
Primary ColorThe color of the floating button and the submit button
Text ColorThe text color on the buttons (usually white)
PositionWhere on the screen the button appears โ€” Bottom Right, Bottom Left, Top Right, or Top Left

Form Fieldsโ€‹

ToggleWhat it does
Show phone fieldShows a phone number input in the form
Require phoneMakes the phone field mandatory
Show company fieldShows a company name input
Show message fieldShows a message textarea
Require messageMakes the message field mandatory

Name and email are always shown and always required.

Lead Routingโ€‹

You can automatically route leads submitted through this widget to a specific pipeline and stage:

  • Route leads to pipeline โ€” pick which pipeline new widget leads land in
  • Initial stage โ€” pick which stage within that pipeline they start at

If you leave these blank, the lead is created without a pipeline assignment.

Active/Inactiveโ€‹

The Widget is active toggle lets you turn the widget on or off without deleting it. When inactive, the floating button does not appear on websites using the embed code.

Getting the Embed Codeโ€‹

After saving your widget, find it in the list and click Get Embed Code.

You will see a snippet that looks like this:

<script src="https://yourdomain.com/widget/abc123-uuid/loader.js" async></script>

Copy this entire line. This is all you need to add to your website.

Adding the Widget to Your Websiteโ€‹

WordPressโ€‹

  1. Install a plugin like "Header Footer Code Manager" or "Insert Headers and Footers" โ€” search for either one in your WordPress plugin directory.
  2. Paste the script tag into the "Footer" area.
  3. Save and visit your website โ€” the floating button appears.

Alternatively, if your WordPress theme has a "Custom HTML" area in the footer widget, paste the script there.

Shopifyโ€‹

  1. In your Shopify admin, go to Online Store โ†’ Themes.
  2. Click Edit Code on your active theme.
  3. Open the theme.liquid file.
  4. Paste the script tag just before the </body> tag.
  5. Click Save.

Wixโ€‹

  1. In the Wix Editor, click the + button to add an element.
  2. Choose Embed โ†’ Custom Code.
  3. Paste the script tag into the code box.
  4. Set it to load in the Body section.
  5. Apply and publish.

Squarespaceโ€‹

  1. Go to Settings โ†’ Advanced โ†’ Code Injection.
  2. Paste the script tag into the Footer box.
  3. Save. The widget appears on all pages.

Custom HTML Websiteโ€‹

Paste the script tag anywhere before the closing </body> tag in your HTML file:

    <script src="https://yourdomain.com/widget/abc123/loader.js" async></script>
</body>

How Submissions Flowโ€‹

  1. A visitor lands on your website and sees the floating button.
  2. They click it, fill in their details, and hit Submit.
  3. LeadHub receives the submission instantly.
  4. A new lead is created in your workspace with the visitor's information.
  5. Any automations that trigger on "New Lead Received" fire immediately.
  6. The visitor sees your success message.

Everything happens in real time. You do not need to check anything manually โ€” new leads appear in your leads list automatically.

Widget Analyticsโ€‹

On the Lead Widgets list page, each widget shows:

  • Leads Captured โ€” total number of leads submitted through this widget

This lets you see at a glance which widgets are performing and which are not.

Customizing Widget Appearanceโ€‹

All appearance settings are in the widget configuration form. You can change:

  • Colors to match your website's brand
  • The button position to avoid overlapping with your website's existing chat or cookie buttons
  • The headline and subheadline to match your website's tone

You can create multiple widgets with different configurations โ€” for example, one for your homepage with "Get a free quote" and another for your blog with "Subscribe for updates".

Securityโ€‹

CORS (Cross-Origin Resource Sharing)โ€‹

The widget can accept submissions from any website by default. If you want to restrict which domains can submit through a specific widget, set the Allowed Domains field in the widget configuration. Enter your domain (e.g. acmecorp.com) and only submissions from that domain will be accepted.

Rate Limitingโ€‹

LeadHub automatically limits how many submissions a single visitor can make in a short time period. This prevents automated bots from flooding your lead list with junk entries.