Widgets

Contact widget for website: install it and stop losing leads from ads

AI chat, callback, messengers, quizzes and booking in one code at no extra cost: how to create a contact widget for your website and install it.

Updated Nov 2 10 min read 111 views

In short

A contact widget for website is a set of floating buttons on every page: AI chat, “Callback”, Telegram and MAX that send requests straight to the CRM. It's included in the “CRM + Telephony + Automation” plan and higher at no extra cost. Create it in the “Widget” section, click “Save changes” and paste one line of code on every page.

You pay for every ad click, yet most visitors leave without a word: the phone number is hard to spot, the form is inconvenient, and nobody answers in the evening. A contact widget for website brings those requests back, and the AI chat brings in the most: the bot replies in seconds — in the evening, at night and on weekends. Without it, an online school loses the people who choose a course after work.

The widget is a set of round buttons in the corner of every page: a chat with an AI bot, callback, Telegram and MAX. A visitor gets in touch in one click — the way they prefer. The request instantly becomes a lead in the CRM together with the ad source. A lead is a request card with the contact and its history.

Usually this takes 4–5 separate services: live chat, callback, quizzes, popup offers and online booking. Here all of it is installed with one line of code and included in the “CRM + Telephony + Automation” plan and higher, with no extra fees or separate services. Requests from every tool go straight to the CRM, so no integrations are needed. The same code also connects lead capture from your website forms and call tracking — substitute numbers that show which ad a call came from.

Watch the video, just over two minutes long, and below you'll find the step-by-step setup.

Could not load the video. Check your connection and refresh the page.

Why businesses need a website widget

An online school: at night and on weekends, the AI bot in the chat answers questions about the program and installment plans. In the morning, the manager has ready requests instead of missed questions.
A clinic, salon or car service: the visitor picks a convenient time for the call, and the map shows how to get there. The administrator calls exactly on time.
An online store: the chat answers questions about delivery and stock, and the Telegram and MAX buttons lead to your bots. Buyers ask where they're used to asking.
A company with several websites: the main site and a promo landing page each have their own buttons and texts. The code stays the same — the developer doesn't need to install different scripts.
A marketer: every lead keeps its source, campaign and UTM tags — labels in the ad link. You can see which ads bring in requests. Tags from the landing page are kept for 30 days.

Client case

An online English school for adults. Before: the website had only a request form, and questions in the evening and on weekends went unanswered. The school paid two separate services for chat and callback, and managers moved requests from them into the CRM by hand. What we did: a widget with AI chat, callback, Telegram and MAX — with one line of code; both services were cancelled. Result: about 25% more requests from the website in the first month with the same ad budget. Around 40% of them came from the AI chat outside working hours, and the manual transfer of requests is gone.

How a contact widget for website works

You create a widget for a project and set up its buttons. One project — one widget.
One line of code is pasted on the website. The site picks up later changes by itself — after the page is refreshed.
The code shows the buttons of the tab that matches the page's domain.
If the page has no form-capture and call-tracking code, the widget connects it by itself. You don't need to paste a second line.
Requests from the chat and the callback window become leads in the CRM. Every visit is recorded in “Widget analytics”.

Contact widget for website in your account — the “Your configured widgets” list: project, Project ID, the “Analytics” and “Edit” buttons

How to add a widget to a website

1
Create a widget
Open the “Widget” section and click “Create widget”. The “Project” field usually already shows the current project.
2
Check the buttons
Expand the “Widget buttons” section. A new widget gets Telegram, MAX and “Call” right away. Links to your bots are filled in from the “AI chat bot” section; delete unneeded buttons with the trash icon.
3
Choose where requests go
Expand the “Call” button. Choose the “Funnel stage” — the sales stage the lead will land on. Then choose the “Owner / employee”.
4
Save
Click “Save changes” at the bottom. “Demo preview” opens right away: this is how a visitor will see the widget. Until the first save, the “Demo preview” button is grey.
5
Copy the code
In the “Code to embed on your site:” block, click “Copy”. Paste the line on every page of the site before the closing </body> tag.
6
Check the site
Open it and refresh the page. The buttons will appear in the bottom right corner.

Widget code for your developer

Does a developer look after your website? Click “Send code to developer”. In the “Code for the site” window, enter their email and click “Send”. The email will contain the code and where to paste it.

The code is pasted once. You don't need to change it after edits in your account.

Contact widget code for website — the “Code for the site” window with the “Copy” button and the “Send to the developer” block

Widget buttons

The order of the cards in “Widget buttons” is the order of the buttons on the site. To change it, drag a card by ⋮. A new button is added with “Add button”.

In the card, set the “Button text”, “Color” and “Action”. A button can:

open a link — WhatsApp, a price list, a booking page;
open the callback window, the chat or a map with your address;
open a quiz or online booking;
run your JavaScript code — in the background or in a window.

You can find an icon by searching the “Nice library” or upload your own. The “Photo (fills the whole button)” type puts a manager's photo with a green “online” dot on the button.

Contact button of the website widget — the card with the “Action” and “Icon source” fields and a manager's photo on the button

Everything in one code

Below the buttons in the widget editor are tools that are usually bought as separate services. They're installed with the same code and included in the same plan at no extra cost:

a discount popup for website with a promo code and a timer;
a lead generation quiz with the answers right in the lead card;
a video widget for website — a round video with buttons;
online appointment booking with your specialists;
“Customer catcher” and “Social proof” — a social proof widget.

General settings and domains

In “General settings”, you choose how the widget looks:

“Tooltip text next to the button” — a bubble like “Have a question?”;
“Widget position” — left or right, and “Widget size” — normal or large;
“Button slideshow” — the main button shows the icons of all the buttons in turn;
“Pulse (rings)” — expanding rings draw attention.

Does the project have several websites? Click “Add domain”. Each domain gets its own buttons and texts, while the code stays shared. If a site has no tab of its own, the tab with the “Default tab (if no domain matched)” checkbox is used.

One widget for multiple websites — the “Domains (tabs)” block with the DEFAULT main tab and a landing page tab

Important

The widget isn't shown on the website if the account balance is below zero or the plan has expired. To keep the buttons from disappearing, turn on auto-payment and balance notifications.

Tip

Changes in the editor are a draft. They reach the website only after “Save changes”.

Frequently asked questions

How much does a website widget cost?

The widget and all its tools are included in the “CRM + Telephony + Automation” plan and higher at no extra cost. Call minutes and the AI bot's replies in the chat are paid separately: under the chatbot plan, that's from $0.40 per day plus $0.02–0.03 per dialog on average. New users get a trial period and $1 on the balance after activation.

Why doesn't the widget show up on my website?

Check in this order: the widget is saved and “Demo preview” shows the buttons, the code is on the page with the correct project number, and the page has been refreshed. The widget is also hidden when the balance is negative or the plan has expired.

Can I have different widget buttons for different websites?

Yes. Click “Add domain” or “Copy to new domain” in “General settings”. The code is the same on all sites.

How do I remove the widget from my website?

Delete the widget: it disappears from the site right away, even without “Save changes”. You can leave the code on the site — it won't show anything.

How do I remove only the callback button from my website?

In “Widget buttons”, click the trash icon in the header of the “Call” or “Callback” card, choose “Delete” in the “Delete button?” window, then click “Save changes”. The chat and the other buttons stay on the site. Button sets differ only by domain — with “Add domain” tabs — and can't be set up for individual pages of one site.

Why do I see “Access denied” instead of the widgets section?

You don't have the “Widgets” right in the current project. Switch the project in the header or ask an administrator to grant access.

Next step

Ready to try Lptracker?

Everything from this article is already waiting in your account — open the section and get started.

Try Lptracker

Turnkey implementation

Our implementation team will set up the system for your business: voice and chat AI bots, funnels, robots, telephony and CRM. Book a meeting at a time that suits you.

Book a meeting