Live chat for website: AI chat, Telegram, MAX and a map

A visitor asks a question at 11 p.m. and goes to whoever replies first. Ordinary live chat for website waits for a manager, who won't see the message until morning. That's how an online store loses its hottest evening buyers.

The “Chat” button opens an AI chat window on your website — of all the widget buttons, it brings in the most requests. AI chat is live chat where a bot answers around the clock following your instruction (prompt): it collects the name and phone number and creates the lead in the CRM by itself. A lead is a request card with the contact and its history. Next to it are the Telegram and MAX buttons and a map with directions.

The bot, the contact widget for website and the CRM work in one system. The “Chat” button appears in the widget by itself as soon as you turn on and save the bot. You don't need a separate live chat service or to move requests out of it: the chat window is included in the widget at no extra cost, and the bot's replies cost $0.02–0.03 per dialog on average.

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

Why businesses need live chat with an AI bot

• An online school: at night and on weekends, the bot answers questions about the program, the price and installment plans and signs people up for a free lesson. In the morning, the manager already has ready requests.
• An online store: the chat answers questions about delivery, sizes and stock and places the request. Managers don't waste time on the same questions.
• A school or an expert with a nurture sequence: the Telegram button leads to a bot where the conversation continues after the website. The contact stays even if the person closed the tab.
• A salon, clinic or car service: a window with a map and a “Get directions” button. The client doesn't need to call and ask how to get there.
• A marketer: the widget sends goals to Yandex Metrica when a person writes in the chat and when the chat creates a lead. You can optimize ads for dialogs and requests, not clicks.

How AI chat on a website works

The bot itself is set up in the “AI chat bot” section with the “AI Chat on site” platform — there's a separate article on how to create an AI chatbot. That's where you set the instruction, the welcome message, the timed message, quick replies and lead creation. The widget holds only the button and the look of the chat window.

The buttons sync by themselves every time the bot is saved:

• you turned on “AI Chat on site” — the “Chat” button appeared in the widget; turned it off — the button was removed;
• the bot has a Telegram or MAX token (the bot's access key) — a messenger button with a link to the bot appeared;
• no token — the messenger button was removed.

How to add live chat to your website

1. 1
   Connect the bot

   In the “AI chat bot” section, turn on the “AI Chat on site” platform for this project's bot. Set up the instruction and the welcome message and save the bot. The “Chat” button will be added to the widget by itself.
2. 2
   Open the “Chat” button

   “Widget” → “Edit” → “Widget buttons” → “Chat”. If there's no such button: “Add button” → “Action” → “Chat”.
3. 3
   Style the window

   Set the header title and subtitle, the colors and the greeting icon.
4. 4
   Add messengers

   Save a Telegram or MAX token for the bot in “AI chat bot”, and the button will appear by itself. You can also choose the “Telegram bot button” or “MAX bot button” action for a button. They're shown if the bot has a token.
5. 5
   Test it

   Click “Save changes” and write in the chat in the “Demo preview”. Each time you open the demo, it's a new dialog.

How the chat window looks

• “Chat header title” and “Chat header subtitle” — “Chat” and “Online · Replies quickly” by default.
• Colors: the header is filled with a gradient of two colors. The client's bubble, the background of the window and the input field, the start button and the icons are set separately. Match them to your website's colors.
• “Greeting icon in chat” — 👋 by default or your own image, such as a logo. It's shown above the welcome message while the chat has no messages.

Visitors can attach files. New bot messages — for example, timed ones — expand a minimized chat by themselves, with a sound.

Telegram and MAX buttons on your website

These are link buttons to your bots. You can type the link into “Link URL” by hand — your account won't touch it. Or it's filled in from “AI chat bot” by itself.

The MAX bot link gets a visit tag added. The bot learns which page the person came from. The lead arrives in the CRM with the website and the landing page.

Map with directions on your website

The “Map with address” button opens a window with a map, the address and a “Get directions” button. What to fill in:

• “Map service” — “Yandex Maps” or “Google Maps”;
• “Company name” and “Address” — city, street and building, or coordinates;
• “Map scale” — from 3 to 19: 10 — city, 14 — district, 16 — street, 18 — building;
• “Window view” — centered or vertical, a light or dark theme.

A map preview appears right below the address. If you've also added a callback widget for website, the window will have two tabs: “Call” and “Addresses”.

Goals in Yandex Metrica

The widget sends two goals to all Metrica counters on the page by itself. But you need to create them in the counter manually once — they won't appear on their own:

1. In the Metrica counter settings, add a goal with the “JavaScript event” condition.
2. Enter the identifier lptracker-ai-dialog — the visitor wrote in the chat.
3. Create the second goal the same way, with the identifier lptracker-ai-lead — the chat created a lead.

With these goals, Yandex Direct learns to bring people who write and leave their contacts, not those who just click.

Read also: AI chatbot for website: how to create a bot that answers 24/7, Telegram bot for business: connect MAX, website chat and Avito, Yandex Metrica offline conversions: let Direct learn from sales