База знаний

📑 Чаты на динамических страницах

В этой статье рассмотрим добавление чатов на динамические страницы при помощи интеграции "T123: HTML-код".

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


Страница заявки в личном кабинете является динамической: в один и тот же шаблон страницы Collabza загружает из Airtable данные по той или иной заявке, в зависимости от фильтров в параметрах URL. Помимо статического блока с заголовком "Ваша заявка", на странице используются три блока с интеграциями Collabza:
  1. "ST200: Карточка продукта" - для отображения информации о товаре, по которому оставлена заявка, и перехода к оплате заказа.
  2. "TX01: Текст" - для отображения имени продавца.
  3. "T123: HTML-код" - для добавления Telegram чата  между покупателем и продавцом по данной заявке.

Структура данных в Airtable

Для нашего проекта мы создали в Airtable базу "ТехМаркет" с тремя таблицами: "Пользователи", "Объявления" и "Заявки".




Данные для блока ST200 с информацией о товаре и блока TX01 с именем продавца подтягиваются при помощи интеграций Collabza из таблицы "Объявления".

Код для добавления Telegram чата по заявке подтягивается в блок T123 из поля "Telegram" таблицы "Заказы". В настройках интеграции важно выбрать тип доступа "Только авторизованным, которые есть в списке", чтобы у пользователей не было доступа к чатам по чужим заявкам.

Фильтры в параметрах URL



В параметрах URL страницы заявки используются три фильтра, - по одному на каждый из блоков: #rec325457846 с карточкой товара, #rec325467299 с именем продавца и #rec325463421 с кодом для добавления чата.

'https://livedemo.tilda.ws/tech-market/request?filters325457846=Заявки__eq__' & {id} & '&filters325467299=Заявки__eq__' & {id} & '&filters325463421=id__eq__' & {id}

Если попытаться открыть страницу без фильтров в параметрах URL, то Collabza может загрузить в блоки данные сразу по нескольким заявкам. Чтобы этого избежать, можно добавить на страницу блок "T123: HTML-код", который будет производить редирект на страницу /page_not_found в случае отсутствия нужных параметров.


Добавление Telegram чата

Для добавления Telegram чата на страницу заявки используется https://comments.app/ (см. раздел Basic comments  из документации Telegram https://core.telegram.org/widgets/discussion).



Добавляем наш сайт в https://comments.app/ и получаем идентификатор Site ID. Для добавления чата на страницу предлагается использовать код следующего вида:

<script async src="https://comments.app/js/widget.js?3" data-comments-app-website="SITE_ID" data-limit="5" data-page-url="PAGE_URL" data-page-id="PAGE_ID"></script>

Вместо SITE_ID подставляем значение Site ID для нашего сайта, вместо PAGE_URL - адрес страницы заявки вместе с параметрами фильтрации, вместо PAGE_ID - идентификатор чата, свой для каждой заявки. Соответствующий код будем генерировать в Airtable по формуле и подтягивать на страницу при помощи интеграции Collabza "T123: HTML-код".


Telegram автоматически отправляет в мессенджер уведомления о новых ответах на ваши сообщения, а при необходимости можно подписаться на уведомления обо всех новых сообщениях в выбранном чате.


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

При возникновении вопросов - добавляйтесь в чат сообщества https://t.me/collabza_chat, - там всегда рады помочь!
Сборка фич Доска объявлений (агрегатор)