Виджет telegram: как установить и чем заменить

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

Есть версия официального виджета от самого Telegram и множество сторонних разработок. В нашем материале подробная инструкция по установке официального виджета и преимущества виджета от EnvyBox, интегрированного с мессенджером.

Преимущества использования виджетов на базе мессенджера Telegram

Среди множества инструментов SММ-маркетинга можно особо выделить программы, позволяющие обмениваться мгновенными сообщениями. Существует несколько различных мессенджеров, у каждого из которых имеются свой набор функций и статистика потребления трафика. Необходимо изучить все программы и их особенности, чтобы понять, какая из них отвечает нуждам компании и окажется наиболее эффективной в деле продвижения бизнеса. Далее поговорим о таком мессенджере как Телеграм, рассмотрим его преимущества перед другим программами и обсудим, почему именно его стоит выбирать в качестве одного из основных инструментов взаимодействия с клиентами.

Каковы плюсы Телеграм и его технические характеристики?

1. Бесплатный мессенджер

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

2. Уникальный функционал

На данной платформе есть возможность создавать и устанавливать любые авторские дополнения. Каждый пользователь на основе уже имеющегося функционала может внести в приложение изменения, которые благотворно повлияют на процесс взаимодействия с клиентами. Это могут быть какие-то персональные стикеры или боты, запрограммированные специальным образом. Подобное использование всех возможностей Телеграм крайне позитивно сказывается на образе компании, позволяет формировать лояльность к бренду, постоянно вовлекать аудиторию в процесс общения с представителями компании.

3. Удобная поисковая система

В мессенджере очень удобно искать любую информацию, причем как в личном чате, так и в любом другом. Это касается сообщений и любых файлов.

4. Высокая скорость и безопасность

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

5. Возможность делиться файлами разного типа и размера

Телеграм выгодно отличается от других мессенджеров (What’s App, Viber) благодаря возможности пересылать практически любые файлы, независимо от их размера и формата. Они беспрепятственно загружаются на сервер этой платформы.

6. Кроссплатформенность

Телеграм может использоваться на любой платформе, он доступен в виде приложения и программы для смартфона и компьютера, а также может запускаться в браузере (веб-версия). Это очень удобно и дает возможность пользоваться мессенджером в разных условиях.

7. Отсутствие ограничений

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

Пошаговая установка официального виджета Telegram

Для того чтобы начать работу с мессенджером в рамках своего бизнес-проекта, необходимо установить на сайт виджет telegram. К боту будет привязано доменное имя, а значит, на localhost авторизацию проверить не выйдет. Как установить виджет? html код telegram необходимо поместить в определенное, удобное владельцу, место сайта. Как это сделать, расскажем ниже.

Без создания бота обойтись нельзя. Авторизация будет осуществляться с его помощью. В компании Телеграм утверждают, что бот сможет сам начинать беседу с пользователями, которые прошли авторизацию таком образом. Создав бота, мы получаем ключ api, который понадобится в дальнейшем.

Нужно отправить боту @BotFather команду /setdomain. Сначала он предложит выбрать бота, а затем нужно будет ввести адрес сайта.

На странице https://core.telegram.org/widgets/login ищем конфигурацию виджета.

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

Далее выбираем размер кнопки. Существует три варианта. При перещёлкивании кнопка внизу будет автоматически менять размер.

Далее обращаем внимание на галочку, которая отвечает за отсылку сообщений от имени бота.

Затем мы видим поле с получившимся кодом (два тега скрипт). Код можно целиком вставить в то место в структуре электронной площадки компании, где вы хотите расположить виджет telegram. Сайт и его элементы должны при этом выглядеть гармонично. Можно сделать иначе: взять только верхний скрипт, который рисует кнопку. Из нижнего возьмем callback функцию, которую потом вставим в общий js-файл для сайта.

Сейчас благодаря этой функции в браузере появляется стандартный alert с сообщением о том, что пользователь залогинен, и выдаются некоторые его данные. На одном из следующих этапов здесь будет прописан запрос к серверу.

Итак, мы вставили скрипт, который рисует кнопку входа в Телеграм, в нужное нам место на сайте. Добавили callback-функцию в файл, в котором прописаны основные js функции. Если на сайте установлен jquery, можно отправить запрос через него.

function onTelegramAuth(user) {

$.ajax({

url: ‘/login’,

method: ‘post’,

data: user,

dataType:’json’,

success: function (data) {

location.reload()

},

error: function (error) {

alert(error)

}

})

}

Рассмотрим сайт, работающий на nodejs на фреймворке koa.

Это контроллер login:

Подключаем необходимые модули

const Router = require(‘koa-router’)

const router = new Router()

const jwt = require(‘jsonwebtoken’)

const config = require(‘../config/config’)

const mongo = require(‘../config/mongo’)

const crypto = require(‘crypto’);

const { strcmp } = require(‘../lib/utils’)

const ObjectID = require(‘../config/mongo’).ObjectID

Тут роут

exports.init = function (app) {

router.post(‘/login’, login)

app.use(router.routes())

}

Собственно функция логина

async function login(ctx,next) {

Сюда методом post приходят данные в виде json

const authData = ctx.request.fields

С помощью hash мы проверим целостность данных, посмотрим, идут ли они из самого Телеграм, или происходит что-то неправильное

const checkHash = authData.hash

delete authData[‘hash’]

По инструкции Телеграм необходимо взять все данные, кроме hash, которые пришли к нам от Телеграм, и собрать их в одну строку в формате key=value, разделяя символом переноса строки \n */

let dataCheck = []

for (let key in authData) {

dataCheck.push(key + ‘=’ + authData[key])

}

dataCheck.sort();

dataCheck.join(«\n»)

Делаем из неё sha256

const secretKey = crypto.createHash(‘sha256’)

.update(config.oauth.telegram.botToken)

И проверяем: если не ок, не пропускаем пользователя, если ок, то добавляем его или обновляем в базе данных

const hash = crypto.createHmac(‘sha256’, dataCheck.toString(), secretKey);

if (strcmp(hash, checkHash) === -1) {

ctx.status = 401

ctx.body = ‘Data is NOT from Telegram’

}

if ( +(new Date()) — authData.auth_date > 86400) {

ctx.status = 401

ctx.body = ‘Data is outdated’

}

const user = await mongo.users.findOne({id:authData.id})

if(!user){

await mongo.users.insertOne(authData)

}else{

await mongo.users.updateOne({_id: new ObjectID(user._id)},{$set:{authData}})

}

Здесь для создания токена использовался jwt, но это можно сделать самостоятельно

const token = await jwt.sign(authData, config.app.secret)

Ставим куки с этим токеном

ctx.cookies.set(‘tgUser’, token);

ctx.status = 200

ctx.body = {

user: authData

}

Теперь добавляем перед всеми роутами middlware. В koa, «принять пользователя» хранить в ctx.state.user

app.use(async (ctx,next) => {

const token = ctx.cookies.get(‘tgUser’)

if(token){

try {

ctx.state.user = await jwt.verify(token, config.app.secret)

}catch (error) {

ctx.cookies.set(‘tgUser’, »);

}

}

await next(ctx)

})

После этого остаётся где нужно проверять переменную ctx.state.user.

«Обратный звонок» — виджет от EnvyBox, интегрированный с Telegram

Как работает «Обратный звонок» для сайта?

• Сначала на сайт устанавливается код. Это делается очень просто и занимает буквально 3 минуты. Можно сделать это самостоятельно по инструкции или видеоурокам либо озадачить своего программиста.
• На сайте появится всплывающее окно. С его помощью потенциальные клиенты, заходя на сайт, могут заказать звонок, введя свой номер телефона.
• Сервис автоматически связывается с менеджером и клиентом. Сначала трубку берет менеджер, а потом осуществляется дозвон до клиента. Все происходит примерно за 17,5 сек.
• В конце поступает заявка. Она может содержать такие данные: регион, в котором находится пользователь, его имя, рекламная кампания, которая привела его на сайт, UTM метки и другое, а также запись разговора с менеджером.

Чем полезен виджет «Обратный звонок»?

• Функция «Удиви клиента». Можно приятно удивить клиента. Если он зашел на сайт и оставил заявку на звонок, то при повторном входе система распознает пользователя и отправляет на почту сообщение с его именем, контактами и записью прошлого телефонного разговора. Можно совершить звонок, который будет неожиданно приятным для человека. Этот механизм позитивно сказывается на продажах компании благодаря формированию высокого уровня лояльности со стороны клиентов.
• Озвучка UTM-метки. Полезно настраивать обратный звонок таким образом, чтобы менеджеру автоматически произносились utm-метки при соединении с клиентом: имя пользователя, сайт, с которого совершается звонок, ключевой запрос.
• Интеграция с аналитикой. Можно связать сервис «Обратный звонок» с Яндекс.Метрикой и Google.Analytics, благодаря чему легче отслеживать эффективность воронки.
• Настройка гео-фильтра. Грамотная настройка позволит показывать виджеты только клиентам нужного вам региона, а значит, сэкономить время и деньги на звонки в другие регионы.
• Интеграция с CRM-системой. Есть возможность настроить всю систему обратных звонков таким образом, что заявки на них будут попадать в CRM-систему, там же окажутся аудио-записи разговоров. В итоге у компании сохранится история общения с каждым клиентом.
• Привязка к любой форме. Все формы связи, имеющиеся на сайте, можно привязать к сервису «Обратный звонок». В результате можно любой запрос обработать сразу, не теряя драгоценное время, в течение которого вероятность заключения сделки наиболее высока.
• Интеграция с Telegram. Туда будут приходить уведомления о всех новых заказах звонка в нерабочее время. Причем вся информация, которую клиент вводил в форму, будет отражена в мессенджере. Имеется возможность ручной обработки сообщений.

Рассмотрим другие функции, которыми обладает виджет «Обратный звонок»:

• Можно сделать виджет собственного дизайна. Все элементы сайта должны смотреться органично и не создавать ощущения захламленности и небрежного исполнения. Виджеты, выполненные в общей стилистике электронной площадки компании, смотрятся очень красиво, на клиента общая картинка производит приятное впечатление, уровень его доверия сайту повышается.
• Звонки на IP-телефонию. Звонки по IP-телефонии дешевле: всего 2₽ вместо 4₽ на обычной линии. Кроме того, если на мобильный телефон установить специальное приложение, его тоже можно использовать для звонков через IP-телефонию.
• Разные телефоны для городов. Компания, которая имеет несколько филиалов в разных городах, может настроить себе Envybox так, что он сам будет определять город, из которого обращается клиент, и перенаправлять звонок в нужный офис.
• Несколько пользователей. Можно раздать нескольким пользователям разные права. Допустим, бухгалтер может лишь пополнять баланс, а менеджер — только обрабатывать поступающие лиды.
• Информация о клиенте. Когда клиент заказывает обратный звонок, менеджер благодаря Envybox получает всю необходимую информацию о нем: имя, поисковая фраза, город, сайт-источник.
• Подключение своей кнопки. Если на сайте уже имеется кнопка «Заказать звонок» или «Заказать услугу», то к ней можно добавить функцию от Envybox. Она будет выдавать окно заказа звонка при нажатии на кнопку.