Как получить Telegram api key для тильды

Тильда умеет отправлять данные из форм на более чем 15 сервисов. Но иногда нужно сделать особую, нестандартную интеграцию.

Для примера рассмотрим отправку смс-оповещения клиенту после заполнения им формы на нашем сайте. Будем использовать две инструмента: hook.io для хостинга нашего скрипта приема данных и sms.ru для отправки смс. Промежуточный скрипт нужен, чтобы подружить данные, отправленные Тильдой и API конечного сервиса.

Создадим новый скрипт

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

Имя сервиса — любое удобное:

Параметров в строке запроса у нас не будет, оставляем в Route только слэш:

Пишем код скрипта. Его задача — принять от Тильды данные, сформировать параметры для sms.ru и передать команду на отправку sms.

var querystring = require(‘querystring’);
var http = require(‘http’);

module[‘exports’] = function helloWorld (hook) var par = <>;

Подключаем TELEGRAM к Тильде (получать заявки и лиды с форм в мессенджеры)

par.api_id = hook.env.sms_api_key; // апи-ключ (указан в переменных среды)
par.to = hook.params.phone; // телефон получателя (передает тильда)
par.text = “Заказ принят”; // текст смс
par.from = “goodskull”; // имя отправителя

var url = ‘http://sms.ru/sms/send/?’ + querystring.stringify(par);
http.get(url);
>;

Добавим апи-ключ от sms.ru

Апи -ключ и имя получателя создаются в личном кабинете sms.ru. Там все на русском языке и пояснений я здесь давать не буду. Хранить ключ будем не в тексте скрипта (он публичный), а в переменных окружения:

Добавим наш сервис в Tilda

После сохранения наш скрипт будет иметь ссылку вида:

Добавим ее как webhook в настройках сайта на Тильде:

Впишем URL нашего скрипта:

Привязка к форме

Теперь можно создать страницу с формой и привязать форму кнашему новому сервису.

В нашем скрипте используется переменная phone, поэтому назначьте соответствующему полю такое имя переменной.

Отправьте форму для проверки. Учтите, что Тильда отправляет данные формы не мгновенно, а с задержкой в 1–2 минуты.

Источник: medium.com

Опыт интеграции с Tilda

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

В статье речь идет о разработке внешнего сервиса на php , который внутри ведет работу с Tilda посредством WebHook и самописного API для запросов к Tilda.

#Предыстория

Tilda — конструктор сайтов. Есть возможность прикрутить каталог с товарами, корзину, сбор заявок (которые нельзя редактировать) и эквайринг.

Как отправлять заявки в Telegram? Получение данных из форм в Telegram | Тильда Конструктор Сайтов

Кроме того есть возможность интеграции с внешними сервисами, они делятся на виды, но суть интеграций одна — отправка данных из форм в интегрируемый сервис:

• мессенджеры для оповещения владельца сайта о новой заявке
• CRM для ведения клиентов
• массовые рассыльщики для ведения базы email клиентов

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

Один из наших клиентов интегрировался с amoCRM, поэтому было решено разработать интеграция с этим продуктом, но как оказалось, в amoCRM не передается информация о статусе оплаты заказа, что было критично в нашем случае.

И тогда мы нашли способ интеграции по WebHook .

#Интеграция по WebHook

Провели эксперименты . получилось — мы смогли получать данные из Tilda в наш сервис. Но приключения только начинались .

Когда подъехал второй клиент на Tilda, то оказалось что отправляемый по WebHook json может иметь ключи в разных регистрах: у одного клиента lower-case , у другого camel-sase . Это решается следующим образом на php :

$_POST = array_change_key_case($_POST);

Позже (через ~2 недели) клиенты организовали скидки по промокодам, которые распространяются на весь заказ, и как выяснилось:

Tilda не считает скидки для позиций товара, а лишь имеет данные об общей скидке (процентной или фиксированной).

Этот прикол мы разруливали (юридические консультации, возврат заказов, пересчет цен позиций заказов, создание чеков прихода) ~3 дня вперемешку с текущими задачами.

И под конец один из клиентов написал js скрипт индивидуальной скидки, это привело к тому, что цены позиций заказа и общая сумма заказа не совпадали. Клиент был предупрежден о невозможности поддержки не стандартизированных (сервисом Tilda или нами) фич и убрал свой скрипт.

Но статус оплаты в данных WebHook не приходил, и тогда пришлось искать другое решение .

#Разработка API для Tilda

Теперь (31.10.2022) это неактуально, при установке WebHook есть возможность установить флаг «Отправлять после оплаты». Но ниже описан интересный опыт 🙂

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

Первым делом необходимо пройти авторизацию.

Не забываем подставлять нужные заголовки исходящих запросов из консоли браузера.

#Авторизация

Идем по адресу /login/ и видим что исходящий запрос в заголовках отправляет куки вида:

Cookie: tildasid=1616609523493.626598; tildauid=1616609838237.285363; previousUrl=tilda.cc%2Fru%2F

Отправимся на предыдущю страницу сайта (она же главная). В ответ на запрос самой страницы заголовка Set-cookie нет. Тогда идем в отладчик и пробуем найти хотя бы одну куку в одном из подгружаемых скриптов . и находим установку куки tildasid в файле /js/tildastat-0.2.min.js .

Куки при входе на главную страницу Tilda.cc:

При детальном поиске обнаруживаем что tildasid и tildauid используют одну и ту же функцию генерации generateUniqID :

function generateUniqID()

Теперь повторяем примерно такое же на php :

$iTimeMls = time(); $iTimeMcsUID = random_int(500000, 1000000); $iTimeMcsSID = $iTimeMcsUID — random_int(100000, 200000);

А кука previousUrl у нас всегда имеет одно и тоже значение при авторизации.

Теперь пробуем авторизироваться через web-интерфейс и смотрим запросы.

Как оказалось для авторизации отправляется запрос /login/submit/ , который при успешном результате отправляет в заголовках ответа куки вида (данные подкорректированы):

Set-Cookie: PHPSESSID=dc2kseiqlfpcv85dfe3578hk94; path=/; secure; HttpOnly Set-Cookie: userid=1092881; expires=Wed, 07-Apr-2021 18:36:44 GMT; path=/; secure; httponly Set-Cookie: hash=01a14f9a4d8cc987e08f0ad9353aec5d; expires=Wed, 07-Apr-2021 18:36:44 GMT; path=/; secure; httponly Set-Cookie: registered=yes; expires=Thu, 24-Mar-2022 18:36:44 GMT; path=/; secure Set-Cookie: tildacommonsessid=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/; domain=.tilda.cc; secure; httponly Set-Cookie: lang=RU; expires=Wed, 07-Apr-2021 18:36:44 GMT; path=/; secure

Если установить куки полученные при успешной авторизации через запрос /login/submit/ и установить куки полученные ранее ( tildasid , tildauid ), то при запросе /login/ будет получен 302 код ответа — редирект на страницу проектов /projects/ . В ином случае код ответа 200.

Настало время авторизироваться через скрипт. Однако, на странице авторизации иногда появляется ReCaptcha, которую надо решать, иначе запрос авторизации закончится провалом. Но начнем с простейшего случая — когда капчи нет.

Опытным путем было выявлено что появление ReCaptcha имеет некие промежутки времени, и не зависит от количества неудачных авторизаций или IP адреса — она просто появляется в какие-то моменты времени, а когда-то её нет.

При отсутсвии необходимости ввода капчи запрос авторизации отправляет следующие post данные:

email=emailcsrf=239vBL6ZC9

Как видно, необходимо передавать csrf , который можно найти в коде страницы ввода email/пароля ( /login/ ) так:

$sCSRF = «»; $aMatches = []; if(preg_match(«/window.csrf=(?:’|»)(.*?)(?:’|»);/», $sResponse, $aMatches)) $sCSRF = $aMatches[1];

Чтобы определить необходимость решения капчи нужно в коде страницы /login/ найти window.needcaptcha так:

$needCaptcha = false; $aMatches = []; if(preg_match(«/window.needcaptcha=(?:’|»)(.*?)(?:’|»);/», $sResponse, $aMatches)) $needCaptcha = ($aMatches[1] == ‘y’);

А ключ window.keycaptcha для ReCaptcha находим так:

$sKeyCaptcha = «»; $aMatches = []; if(preg_match(«/window.keycaptcha=(?:’|»)(.*?)(?:’|»);/», $sResponse, $aMatches)) $sKeyCaptcha = $aMatches[1];

Теперь имея ключ капчи идем на сервис решения капчи rucaptcha.com, создаем акк, оплачиваем пару сотен рублей, и вызывая несколько API запросов этого сервиса получаем ключ решения капчи.

ReCaptcha может отсутсвовать при авторизации (на странице /login/ будет отсутствовать window.needcaptcha ), поэтому не на каждом запросе авторизации понадобится решение капчи.

Имея ключ решения капчи пробуем авторизироваться добавив к post данным ключ g-recaptcha-response :

curl_setopt($this->m_hCurl, CURLOPT_POSTFIELDS, «email=».$this->m_sTildaLogin.».$this->m_sTildaPass.».$sCSRF.($needCaptcha ? » : «»));

#Получение заявок

Здесь уже намного проще. Заходим на страницу заявок проекта и смотрим запросы:

Всего 3 запроса:

1. /projects/leads/?projectid=id — html страница проекта,
2. /projects/get/getleads/ — получение информации о количестве заявок и названии проекта,
3. /projects/submit/leads/ — сами заявки.

У последних двух запросов ответ в виде json , хотя в заголовках ответа Content-Type: text/html; charset=utf-8 .

У последних двух запросов адреса и ответы немного соответствуют друг другу.

Запрос получения заявок требует post параметров:

• comm — совершаемая операция, в случае запроса списка заявок надо указывать getleads
• c — unixtime в милисекундах
• projectid — идентификатор проекта
• sheet — номер текущей страницы (default: 1)
• sheetsize — количество заявок на странице (default: 50)

В ответе получаем json:

• total — общее количество заявок
• next — номер следующей страницы
• errors — количество закзов с ошибками
• leads — массив объекта заявок
• cur — текущая страница
• sheetsize — количество заявок на странице

На данный момент Tilda имеет лимит по сроку хранения заявок, максимум 30 дней.

#Итог

Смотря на опыт нескольких подключенных клиентов, на Tilda можно сделать прибыльный интернет-магазин, но назвать это полноценным интернет-магазином, сложно, это больше похоже на прототип.

В целом, интеграция с Tilda заняла около 2-х дней и оставила положиельные впечатления, как от программной работы, так и от работы с самим сервисом.

Источник: byurrer.ru

Отзыв + инструкция по настройке заявок с сайта в телеграм

Не так давно я анонсировала новую экспресс-услугу «Делюсь опытом» . Отвечаю на любые вопросы по Тильде в формате видео- или аудио-инструкции. Если вы начинающий веб-дизайнер или эксперт #всесделаюсам то можете задавать мне вопросы в течение 8 часов и получать по ним актуальные ответы.

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

У Ксении возникла сложность при загрузке видео с Ютуб формата Shorts в Зеро Блок на личный сайт. Пару видео-инструкций от меня по max 1 минуте и у Ксении получилось самостоятельно разобраться и настроить показ видео.
Отзыв прикрепила в галерею.

***
По пути хочу рассказать вам, как просто настроить приём заявок с сайта прямо себе в Telegram.

ИНСТРУКЦИЯ ДЛЯ САМОСТОЯТЕЛЬНЫХ
1️⃣ Чтобы воспользоваться ботом, нажмите на ссылку в разделе настроек сайта Подключение форм → Telegram. нажмите START.

Вы получите в ответ API key и Secret key — эти данные нужно будет скопировать и вставить на странице добавления Телеграма в Тильде.

Не используйте ключи повторно. Если требуется подключить Телеграм к разным проектам, то для каждого проекта нужно запрашивать новый API Key и Secret Key.

Важно: Бота также можно добавить и в группу в Telegram. Для этого нужно добавить бота в группу с помощью опции Add Members в группе и написать в чат /start, а последующие действия совпадают с инструкцией для добавления диалога с ботом для одного пользователя. Telegram API Key будет отрицательным, т.е. со знаком минус.

2️⃣ В Настройках сайта → Формы → Telegram Вставьте API key и Secret key, полученные в Telegram, в форму.

Если все сделали правильно, то в Telegram придет сообщение «Done! Telegram has been successfully updated as your data collection service on Tilda», и загрузится страница со списком приемщиков.

3️⃣ Вернитесь на страницу, где расположена форма и откройте меню блока «Контент». Отметьте галочкой «Telegram».

4️⃣ Опубликуйте страницу. Форма готова!

***
#сайтыдляэкспертов #эксперттенчат #тильда #madeontilda #tilda #лендингдляпродажи
Веб-дизайнер Лариса Гарашова | g.lara_creator

Источник: tenchat.ru