Разработка
Интеграции
Tilda
К нам обратился клиент. У него на Авито 110 отзывов и рейтинг 5.0. Все отзывы реальные, от живых покупателей.
Проблема: этот социальный капитал лежит на Авито. На сайте клиента в Tilda его никто не видит.
Запрос: вывести отзывы с Авито прямо на сайт. Чтобы обновлялись автоматически. Чтобы выглядело аккуратно.
Проблема: этот социальный капитал лежит на Авито. На сайте клиента в 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 Авито.
В этом кейсе используется улуга разработки сайтов. Если у вас похожая или другая задача - свяжитесь с нами - поможем!
