Как подключить телеграмм к сайту

Интеграция Телеграм

Для того, чтобы подключить Телеграм на свой сайт, вы дожны установить их на свой смартфон или планшет. Сделать это можно в Google Play или Appstore.

После того, как вы скачали приложение запустите его и пройдите несложную регистрацию – вводите свой номер телефона и готово.

Теперь в поиске нам необходимо найти бота, который называется @TobizNotificationsBot (скриншот 1). Открываем чат с ним и нажимаем кнопку СТАРТ в нижней части экрана. После этого он сгенериурет нам специальный идентификатор (скриншот 2). Выглядит это все вот так:

Теперь заходим в настройки проекта в раздел "Уведомления о заявках".

Здесь в середине нажимаем на "Интеграция с Telegram". У нас открывается страница настройки Телеграм, куда нам нужно вписать полученный идентификатор и активировать галочку. Сохраняем настройки.

Буквально сразу же нам на телефон пришло уведомление о том, что проект успешно подключен:

Теперь нам осталось только проверить работоспособность уведомлений. Давайте оставим какую-нибудь заявку на сайте. Нажимаем "Задать вопрос", и сразу же нам на телефон приходит вот такое сообщение:

На этом настройка телеграм завершена. Приятного пользования!

Можно сделать так, чтобы приходило смс сообщение на мой телефон при новом заказе? — Нет, можно сделать, чтобы сообщения приходили в Телеграм.

Виджет Телеграм-канала: как сделать и поставить на сайт

Посетителей сайта нужно удерживать и возвращать на сайт снова и снова. Также их можно дополнительно монетизировать. Раньше для этой задачи использовали емейл-рассылки, но есть не менее эффективный инструмент — Телеграм-канал. Привлечь посетителей сайта в Телеграм канал можно через виджет.

В статье расскажем, как создать виджет для Телеграм и добавить его на сайт.

Какие бывают виджеты для Телеграм

Виджеты для Телеграм делятся на 3 группы:

1. виджет для приглашения в группу или на канал;
2. виджет для диалога через Телеграм (аналог онлайн-консультантов и чат-ботов);
3. виджет в виде кнопки для перепоста материала или страницы в Телеграм.

Как создать Телеграм виджет и добавить на сайт

Есть 2 основных способа создать и добавить виджет на сайт:

1. через HTML-код;
2. с помощью плагинов;

Через HTML-код

Писать код с нуля нет необходимости — можно воспользоваться готовыми сервисами. Они позволяют настроить внешний вид виджета и дают готовый код, который нужно вставить на страницу сайта.

Сервисы, в которых можно создать Телеграм виджет:

1. TGWidget (виджет для привлечения на канал);
2. T.website (виджет канала с кнопкой подписки);
3. Telegram.im (кнопка для начала диалога через ТГ);
4. Elfsight (виджет Телеграм диалога);
5. Hoversignal (виджет Телеграм диалога);
6. Teletype (виджет Телеграм диалога);
7. Widg.io (виджет чата, есть интеграция с Wix и WordPress);
8. myWidget (чат-бот);
9. SendPulse (виджет подписки на бота Telegram);
10. DiscussBot (comments.app — виджет комментариев на сайте через Телеграм);

Также есть конструктор виджетов от самого Телеграма. В нем доступно 4 типа виджетов: кнопка «Поделиться в Телеграм», виджет поста (с возможностью перейти на канал), виджет, позволяющий авторизоваться через Телеграм и виджет для комментариев.

Создаем виджет подписки на канал на примере сервиса T.website:

Понадобится всего пара действий. Заходим на сайт T.website и вставляем в поле ссылку на канал либо его логин @channelname. Сервис выдаст код на виджет канала с линейкой постов и кнопкой подписки. Через изменения в коде можно изменить внешний вид виджета под фирменный стиль, но для этого нужно разбираться в HTML и CSS.

Создаем виджет поста (с кнопкой подписки) через конструктор Телеграма:

Заходим на страницу core.telegram.org/widgets. Выбираем тип виджета (один из четырех). В нашем случае это виджет поста, второй по счету. Кликаем на него.

Здесь есть инструкции, как получить код.

Важно: пост должен быть в публичном канале или группе.

Чтобы просто получить код поста без внешних изменений, нужно найти нужное сообщение в Телеграм, нажать правой кнопкой мыши и скопировать ссылку на сообщение.

Полученную ссылку открываем в браузере и нажимаем на кнопку < > EMBED.

Получаем код виджета. Копируем и вставляем на страницу сайта.

Если хотим кастомизировать виджет, например, изменить его размер и цвет, то нужно вставить ссылку на сообщение на сайте core.telegram.org/widgets (там, где выбирали тип виджета). Вносим изменения и получаем обновленный код.

Как вставить готовый HTML-код на сайт

Зависит от того, на чем сделан сайт. Если на чистом HTML, то в коде страницы нужно найти место, где будет размещен виджет и вставить туда код виджета. Если сайт на движке или на конструкторе, то обычно там предусмотрены виджеты, которые называются HTML-код. Нужно добавить виджет на страницу и в его настройках уже прописать полученный код.

Вот, например, как это выглядит на конструкторе Тильда — нужно добавить новый блок на страницу. Категория «Другое» — блок «HTML-код». В него вставляем код виджета. Блок доступен только на платных тарифах. У Wix есть аналогичный инструмент.

С помощью плагинов

Если сайт на движке, например, на Вордпрессе — можно подключить и настроить плагин. Хотя и на движок можно добавить виджет через код. Но так как плагины существуют, опишем и этот способ.

*В большинство тем для Вордпресс уже встроены виджеты с кнопками соцсетей и мессенджеров. Они выглядят, как иконки с ссылками на соцсети, мессенджеры, YouTube-канал. Но если стоит задача визуально выделить именно Телеграм канал, то нужен отдельный виджет.

Плагины с виджетом Телеграм для Вордпресса:

1. Channel Widget for telegram (показывает пост из Телеграм, можно перейти через него на канал);
2. Replain (плагин для общения с посетителями сайта через Телеграм);
3. QuadLayers Telegram Button (кнопка для начала диалога через ТГ)
4. Telegram Chat (еще один виджет чата);
5. WP Telegram Comments (виджет комментариев для сайта, чтобы оставлять комментарии посетители должны авторизоваться через ТГ);

Виджеты работают по аналогии — сначала нужно скачать и активировать плагин, затем в настройках указать ссылку на канал и кастомизировать его внешний вид.

Лайфхак: если стоит задача просто перенаправлять трафик с сайта в Телеграм канал, можно создать на странице сайта кнопку в цветах Телеграм с надписью-приглашением подписаться на канал, чтобы получать рассылки с новым материалом. Кнопку желательно сделать с иконкой Телеграма. Дальше просто привязываем к этой кнопке ссылку на Телеграм канал и получаем новых подписчиков.

Заключение

В зависимости от типа виджета выбирайте удобный для себя способ его создания и добавления на сайт. Если есть возможность добавить виджет через код — лучше выбрать этот вариант вместо тех же плагинов. Большое количество плагинов могут перегружать сайт. Тем более, получить код для Телеграм виджета и поставить его на сайт проще простого.

Чат-помощник на сайт с помощью Telegram за 15 минут

Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет.
Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером.
Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку.
И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют.
(Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом).

Есть с десяток подобных сервисов и все они работают по принципу «пробная версия бесплатно, а дальше за деньги«.
На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь.
Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:

Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам.

Но я решил изобрести бесплатный «велосипед» из подручных материалов.
Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.

Telegram BOT

Набирающий популярность за границей мессенджер Telegram недавно представил новое API для разработки ботов. Штука — интересная, ей можно найти множество применений. Теперь можно создать бота (написать программу), который будет отвечать на Ваши вопросы, выполнять определнные команды и все это в окне переписки мессенджера Telegram.

Именно на основе мессенджера Telegram и его API для ботов будет работать наш бесплатный, безлимитный чат-помощник-на-сайт.

Общая схема идеи — на картинке:

1. Пользователи на сайте пишут в чат
2. Сообщение это улетает на Ваш сервер
3. Оттуда Telegram-бот пересылает его нужному менеджеру
4. Менеджер отвечает через Telegram
5. Бот отправляет сообщение обратно в чат_на_сайте

Реализация

1. Сервер, VPS или хостинг, на котором есть актуальный PHP, поддержка SQLite и возможность сделать set_time_limit(0) (т.е. сделать работу php скрипта не ограниченной по времени)
2. Приложение Telegram (на смартфоне или компьютере)
3. Базовые знания PHP

План действий такой:

1) Регистрируем нового бота в Telegram.
Для этого нужен только смартфон и 2 минуты.
Заходим в Telegram, добавляем пользователя @BotFather и шлем ему команду «/newbot»
Далее по инструкции: придумываем имя, юзернейм, пишем about и загружаем фотку.
Результатом всего должен получиться API Key с помощью которого мы будем работать с BotAPI.
У меня получилось вот так:

(Сообщение в котором фигурирует мой API Key я удалил)

2) Полученный ключ вставляем в TelegramBotConfig.php.
Там же указываем любой придуманный Вами пароль для регистрации новых менеджеров.

3) Заливаем все на свой сервер

4) Запускаем нашего бота — фоновый процесс getUpdates.php
Он должен работать бесконечно, поэтому рекомендую поставить его в автозагрузку сервера.
Для надежности можно поставить запуск скрипта в crontab каждую минуту.
Скрипт будет запускаться в единичном экземпляре, все повторные запуски сразу же завершатся.

5) Регистрируем нового менеджера
Со смартфона менеджера заходим в телеграм и добавляем нашего нового бота (того, которого Вы только что создали)
Пишем ему команду: «/newmanager пароль_для_менеджеров». В ответ получаем приветствие.

Операцию повторяем нужное количество раз, для каждого менеджера.
Если на данном этапе Вы не получили ответ от Бота — значит что-то не работает!

6) Проверяем
Переходим на страницу index.html (то есть заходим на адрес mysite.ru/index.php, а не открываем локально).
Там находится небольшой, на скорую руку сверстанный чат.
Если отправить сообщение в этот чат, бот выберет случайного менеджера и перешлет ему это сообщение.

Вот здесь интересный момент:
Клиентов (покупателей) может быть много, а менеджер — один.
Менеджер общается с клиентами посредством Telegram-бота.
Если одновременно два (или больше) клиентов написали сообщение, а менеджер отвечает им по очереди, Telegram-боту нужно как-то указать, какому из клиентов отправить ответ.
Для этого я сделал команду «/answer_№ЧАТА». После отправки этой команды все письма менеджера уходят в нужный веб-чат.

Минусы, плюсы, что можно доделать

1. Сейчас чат сделан «на скорую руку», чтобы скорее запустить в своем проекте. Есть много лазеек, с помощью которых например можно писать в чужой чат и подглядеть чужую переписку.
2. Сейчас эти проблемы меня не тревожат, потому как в чате-помощнике на сайте у нас не принято передавать важную и секретную информацию.
3. Когда менеджер один а клиентов много — можно запутаться, кому отвечаешь.
4. … Буду дополнять из комментариев

1. Это работает!
2. Бесплатно навсегда и на любое количество менеджеров
3. Не нужно лишних приложений, только телеграм, который есть для всех популярных платформ
4. Можно переписать и стилизовать чат так, как Вам хочется.
5. Telegram работает очень быстро
6. … Буду дополнять из комментариев

1. Защита от дурака и работа над безопасностью
2. Умную систему распределения сообщений между менеджерами (сейчас бот направляет сообщение случайному менеджеру)
3. Автоматические ответы от бота, когда менеджер долго молчит
4. Добавить имя и фото менеджера, который отвечает в чате
5. … Буду дополнять из комментариев

Спасибо за внимание.

UPDATE 23.08.2015 —Полностью переписал бота, теперь работает более стабильнее, теперь можно выбирать между sqlite и mysql

В планах:
— админ-панель со статистикой
— работа через webhook