Telegram чат виджет для сайта

Про чаты-помощники

Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет. Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером. Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку. И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют. (Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом). Есть с десяток подобных сервисов и все они работают по принципу «пробная версия бесплатно, а дальше за деньги«. На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь. Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:115200 руб. за 1 год Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам. Но я решил изобрести бесплатный «велосипед» из подручных материалов. Запуск у себя на сервере займет 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

Внимание! Вы запускаете этот код на свой страх и риск! Я потратил на него несколько часов и возможно там полно ошибок!

План действий такой: 0) Скачиваем с ГитХаба исходники:https://github.com/Surzhikov/TelegramSiteHelper 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 https://github.com/Surzhikov/TelegramSiteHelper

Оставайтесь на связи с посетителями сайта через

Почему мне стоит выбрать Telegram чат для сайта?

Оставайтесь всегда на связи без лишних усилий

Предоставьте пользователям возможность быстро связаться с вами прямо на странице вашего сайта

Повысьте качество клиентского сервиса

Добавив онлайн-чат на сайт, вы сможете мгновенно отвечать на вопросы клиентов и помогать им в решении проблем

Увеличьте количество продаж с помощью персональных консультаций

Общаясь с пользователями лично, вы сможете найти индивидуальных подход к каждому клиенту и подтолкнуть его к совершению покупки%вебсайтов поддерживается+часов вложено в разработку1 минутачтобы начать использование%счастливых клиентов

Станьте одним из 305,165 клиентов Elfsight Apps

Создайте свой первый виджет Telegram чат для сайта бесплатно.

В чем уникальность Telegram чата для сайта?

СООБЩЕНИЯПростой и удобный способ связаться с вами прямо на сайте Станьте ближе к своим клиентам с помощью Telegram-чата. Добавьте возможность связаться с вами с помощью одного из самых популярных мессенджеров в мире и общайтесь с пользователями в непрерывном режиме. Получайте сообщения любым удобным способом — на смартфон, десктоп-приложение или в веб-версии Телеграм. Будьте на связи всегда, где бы вы ни находились.   ОТОБРАЖЕНИЕОбщайтесь и увеличивайте продажи Онлайн-консультант на сайте — это отличный инструмент для привлечения и удержания клиентов. Вам потребуется только сделать первый шаг и пригласить пользователя начать беседу. В настройках чата можно указать условия его появления: он откроется после того, как пользователь проведет определенное количество времени на странице или в случае, если захочет покинуть сайт. Кроме того, можно выбрать один из трех вариантов расположения чата на странице и аудиторию, которая сможет им воспользоваться.   

ИНТЕРФЕЙССоздайте виджет, который подойдет именно вам Какую бы цель вы ни ставили: общение с клиентами, консультирование, помощь в оформлении заказа — все это можно с легкостью осуществить при помощи кнопки онлайн-чата на сайте. Настройте интерфейс под себя, выбрав иконку, текст приветственного сообщения и указав время ответа, и виджет готов к работе.   

Многие мои клиенты выбирают Telegram из-за его безопасности, поэтому я своей работе также отдаю предпочтение этому мессенджеру.

Примеры использованияПосмотрите реальные примеры использования Telegram чата, чтобы раскрыть его потенциал для вашего сайта. Активное демоОткройте для себя все функции Telegram Чат в интерактивном демо. Бесплатно, без регистрации, без программирования.

Чем виджеты Elfsight отличаются от других?

С сегодняшнего дня вам не нужно больше переживать о работе вашего сайта. Наши инструменты могут похвастаться большим количеством опций, которые вы свободны использовать любым доступным способом. И если вы повстречаетесь с какими-либо затруднениями, наша служба поддержки всегда придет на помощь!Интуитивно понятный онлайн-редакторВам больше не понадобится искать компетентного разработчика. Просто откройте наш понятный онлайн-редактор, который гарантирует легкую интеграцию виджетов.Высококвалифицированная командаВаш беспроблемный опыт обеспечен нашими опытными сотрудниками. Мы будем поддерживать постоянный контакт, чтобы помочь вам интегрировать плагины на ваш сайт.Впечатляющий сервис ElfsightОблачные решения обеспечивают высокую скорость загрузки и моментальное исправление ошибок. Вы получите самую свежую версию независимо от оборудования, которое вы используете.

Что говорят наши клиенты ❤️

Плагин Elfsight потрясающий, а их команда поддержки реагирует быстро и общается очень вежливо. Виджет надежный, я рекомендую Elfsight. Приложения Elfsight: надежные, понятные, и простые в настройке. Мне очень нравится их чат и поддержка. Впечатляющий виджет Telegram, его легко персонализировать, а в случае каких-либо проблем вы быстро получите квалифицированную помощь. Я серьезно подумываю попробовать все их приложения. Эффективный виджет по очень доступной цене. Гибкий, простой в использовании, а команда поддержки супердружелюбная и профессиональная. Отличный опыт!Ребята из Elfsight быстро помогли мне разобраться с проблемой, с которой я столкнулся в их Telegram кнопке. Мне срочно нужно попробовать и другие их плагины! Виджет отлично работает, а еще у него отзывчивый интерфейс. Его легко настроить под себя. А общение с командой поддержки было было очень продуктивным.

Познакомьтесь с Telegram чатом в демо

Создайте свой виджет и добавьте его на сайт за пару кликов прямо из демо.

Часто задаваемые вопросы

Что такое виджет Телеграм чат для сайта?Это кнопка или окно чата, связанные с вашей учетной записью Telegram. Большинство владельцев веб-сайтов используют его, чтобы оставаться на связи со своей аудиторией или предоставлять своим клиентам консультации и поддержку.Каким образом я могу получить код установки приложения? Вы можете воспользоваться кодом сразу, как сформируете ваш виджет в онлайн демо, или непосредственно посредством Elfsight дэшборда. Как вставить Телеграм чат на сайт?

Если вы хотите установить созданный виджет телеграм на сайт, следуйте краткой инструкции ниже или обратитесь к службе поддержки.

  1. Отрегулируйте плагин в редакторе, это очень легко и не требует навыков программирования.
  2. Не забудьте сохранить изменения.
  3. Вставьте код в нужное место на странице или в макет.

Виджет подходит для CMS или конструктора сайта, которые я использую? На 100 %. Наши виджеты поддерживаются всеми конструкторами сайтов. Вот список лишь некоторых самых популярных из них: Adobe Muse, BigCommerce, Blogger, Drupal, Facebook Page, Joomla, jQuery, iFrame, Magento, Elementor, HTML, ModX, OpenCart, Shopify, Squarespace, Webflow, Webnode, Weebly, Wix, WordPress, WooCommerce, Google SitesКуда лучше всего установить виджет Telegram на сайт?Большинство владельцев сайтов предпочитают размещать виджеты чата на главной странице или на страницах продуктов, чтобы клиенты могли легко связаться с продавцом или службой поддержки.Посетитель задал мне вопрос Telegram чат, а я не смог ответить на него сразу же. Что делать?Вы можете ответить в любое удобное время — диалог с пользователем сохранится в истории вашей переписки.

Станьте одним из 305,165 клиентов Elfsight Apps

Откройте для себя еще более 50 эффективных приложений от Elfsight! Банковская карта не требуется. Никаких рисков!Получите скидку 20% прямо сейчас!

Website development Sandbox

Про чаты-помощники

Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет. Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером. Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку. И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют. (Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом). Есть с десяток подобных сервисов и все они работают по принципу «пробная версия бесплатно, а дальше за деньги«. На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь. Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:115200 руб. за 1 год Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам. Но я решил изобрести бесплатный «велосипед» из подручных материалов. Запуск у себя на сервере займет 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

Внимание! Вы запускаете этот код на свой страх и риск! Я потратил на него несколько часов и возможно там полно ошибок!

План действий такой: 0) Скачиваем с ГитХаба исходники:https://github.com/Surzhikov/TelegramSiteHelper 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 https://github.com/Surzhikov/TelegramSiteHelper

-----------------------------------------------------1.png

На прошлой неделе мне показали сервис, который переносит веб-чаты в Телеграм. То есть, например, пишет тебе клиент на сайте, а сообщения ты получаешь в мессенджер. Re:plain запустили примерно месяц назад, и мне он показался интересным. Если мы все живём в нашем уютном Телеграм, решил рассказать вам про него.

Зачем нужна поддержка на сайте через чат?

Чат на сайте нужен, чтобы уменьшить расстояние между вами и вашей целевой аудиторией. В 2К18 просить человека стучаться на почту нужно лишь в одном случае: если вы хотите отфильтровать народ и выбрать самых инициативных. Ну, а если вы нуждаетесь друг в друге в равной степени или даже вы больше, чем гость сайта, то нужно максимально упростить контакт.

Чат жизненно необходим, если вы предприниматель малого бизнеса — у вас есть интернет-магазин, салон красоты, вы в сфере услуг (юридические и бухгалтерские, коучинг), у вас персональный сайт, блог, дизайн-студии и так далее. Одним словом, вы тот, кому нужно живое и оперативное общение с клиентами на сайте. Написавший через веб-чат клиент, чаще других «конвертится» в реального покупателя.

При чём тут Re:plain?

Это удобно! Если вы подпадаете под человека, которого я описал выше, то вам не нужен сложный функционал. У вас есть любимый Телеграм, в котором решаются почти все проблемы, и чатиться с клиентами из сайта тоже хочется в мессенджере.

2_3centernew2--1-.png

</p>

Да, есть много сервисов конкурентов (Jivosite, Intercom, Drift, Chatra, Carrot и другие), которые предлагают глубокий анализ купли-продажи, работу менеджеров, строят сложные диаграммы, просят купить подписку за $50. Но вам это зачем? Вы не крупная компания, вам этого не надо.

Преимущества Re:plain

Удобство и простота. Я уже пользуюсь Телеграм. Мне привычнее решать свои дела в мессенджере. Мне не нужно устанавливать отдельный софт, как в случае с другими похожими сервисами, засоряя память устройства.

Легко подключить. Не нужно никаких «абракадабра». Есть бот. Немного с ним пообщаться, разобраться, кастомизировать окно будущего чата для сайта, скопировать сгенерированный ботом код, встроить в сайт (если сами не понимаете, попросить помощь друга).

Неограниченное количество сайтов и операторов. Вы действительно можете подключить столько сайтов и операторов, сколько захотите. Клиент напишет, все операторы увидят сообщение и ответит кто-то один. Далее уже общение продолжится только с ним. И это…

Бесплатно. Это большой плюс, потому что аналоги просят купить премиум-версию после испытательного срока. Если вам не хочется тратить лишних 50 долларов в месяц, велкам.

Функционал. Тут, конечно, нет глубокого анализа и стопицот экзотических функций (которыми почти никто не пользуется), но есть самое необходимое. Например, кастомизация и шаблоны с готовыми ответами на частые вопросы клиентов.

Мультиязычность. Сервис поддерживает восемь разных языков! Все основные международные и другие: вплоть до индонезийского и даже персидского языка.

Если вам нужен быстрый контакт со своей аудиторией, если вы не крупная международная компания, если не нуждаетесь в сложном функционале, если любите простоту и решать все дела через свой любимый мессенджер, то выбор только один — Re:plain.

Используемые источники:

  • https://habr.com/ru/post/264035/
  • https://elfsight.com/ru/telegram-chat-widget/
  • https://m.habr.com/post/264035/
  • https://blog.themarfa.name/kak-podkliuchit-k-saitu-tielieghram-chat-i-zachiem-eto-nado/

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий