К нам обратился клиент. У него на Авито 110 отзывов и рейтинг 5.0. Все отзывы реальные, от живых покупателей.
Проблема: этот социальный капитал лежит на Авито. На сайте клиента в Tilda его никто не видит.
Запрос: вывести отзывы с Авито прямо на сайт. Чтобы обновлялись автоматически. Чтобы выглядело аккуратно.
Цель: перенести доверие с Авито на сайт
Когда человек заходит на лендинг, он не знает продавца. А 110 живых отзывов с пятёрками — это сильный аргумент.
Поэтому задача была не «нарисовать красиво», а вытащить реальные данные с Авито и показать их на сайте.
Какие варианты мы отмели сразу
Сначала разобрали простые пути и отказались от них:
Скриншоты отзывов — выглядят кустарно. Устаревают через месяц.
Копировать руками — каждый раз обновлять при новых отзывах. Долго.
Готовые виджеты-парсеры — платные. Часто ломаются после редизайна Авито.
Решили делать через официальный API Авито. Это сложнее в начале, но работает стабильно и автоматически.
Почему нельзя обращаться к API напрямую из Tilda
Авито использует OAuth-авторизацию. Для запроса данных нужен client_secret.
Если положить этот секрет в JavaScript на сайте — его увидит любой человек через консоль браузера. Это дыра в безопасности.
Поэтому схему построили через посредника:
На отдельном поддомене подняли свой PHP-скрипт.
Скрипт хранит секреты на сервере.
Скрипт сам ходит в Авито и отдаёт сайту готовый JSON.
Сайт на Tilda обращается только к нашему скрипту.
Схема выглядит так: Tilda → наш PHP API → Avito API
Шаг 1. Получили доступ к API Авито
Зашли в кабинет клиента на Авито. В разделе «Настройки → API» создали приложение. Получили client_id и client_secret.
Параллельно взяли user_id клиента — он есть в ссылке на профиль Авито.
Шаг 2. Подняли PHP-API на отдельном поддомене
Завели поддомен. Разместили два скрипта:
avito-reviews.php — отдаёт список отзывов с пагинацией.
avito-rating.php — отдаёт общий рейтинг и количество отзывов.
Секреты вынесли в отдельный файл config.php выше публичной папки. Из браузера к ним нет доступа.
Шаг 3. Сделали кэширование
Первая проблема всплыла сразу: Авито отвечает медленно. На первый запрос уходило 5–7 секунд. Это много.
Что сделали:
Токен авторизации кэшируем на 23 часа.
Список отзывов — на 5 минут.
Рейтинг — на 10 минут.
После кэширования виджет грузится за 0.1 секунды.
Шаг 4. Настроили CORS
Браузер блокирует запросы с одного домена на другой. Это защита.
Чтобы Tilda могла обращаться к нашему API, в скрипте прописали список разрешённых доменов клиента. Запросы с других сайтов скрипт не принимает.
Шаг 5. Сверстали виджет для Tilda
В Tilda добавили блок T123 (HTML-блок). Внутрь положили готовый код виджета.
Виджет состоит из:
Шапка с логотипом и заголовком «Отзывы с Авито».
Общий рейтинг: цифра, звёзды, количество отзывов.
Кнопка «Профиль на Авито» справа.
Сетка карточек отзывов: имя, дата, звёзды, текст, товар.
Кнопка «Показать ещё» для пагинации.
[СКРИН: финальный вид виджета на сайте]
С чем столкнулись по ходу работы
Проблема 1. Сообщение «Ошибка соединения» при первой загрузке. Первый запрос к Авито шёл долго. Пользователь видел ошибку до того, как приходил ответ. Решили кэшированием — теперь данные отдаются мгновенно.
Проблема 2. CORS блокировал запросы. Браузер не пускал Tilda на наш API. Прописали домен клиента в белый список — всё заработало.
Проблема 3. Дизайн виджета не вписывался в сайт. Сначала использовали стандартный зелёный цвет Авито. Заменили на фирменные цвета клиента: основной #9689ee, hover #689fe7. Скругления подогнали под стиль сайта — 5px.
Что получилось в итоге
Виджет грузится за 0.1 секунды.
Отзывы обновляются автоматически каждые 5 минут.
Все 110 отзывов клиента доступны на сайте.
Есть пагинация: грузим по 6 отзывов, чтобы страница не тормозила.
Есть кнопка перехода в профиль Авито.
Виджет адаптивный — нормально смотрится на мобилке.
[СКРИН: виджет на мобильном и десктопе]
Что это даёт клиенту
Посетитель сайта сразу видит реальные отзывы.
Рейтинг 5.0 и 110 отзывов работают на доверие.
Клиенту не нужно вручную обновлять отзывы — всё тянется с Авито.
Не платим за сторонние виджеты. Решение своё, работает столько, сколько работает API Авито.
Что дальше
Решение готово к масштабированию. По такой же схеме можно вывести отзывы Авито на любой сайт — не только Tilda. Главное, чтобы у клиента был доступ к API Авито.