Фитрина

Как подключить виртуальную примерочную: Tilda, WordPress, Bitrix

·6 мин

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

В этой статье — пошаговые инструкции по подключению виджета виртуальной примерочной на примере Фитрины для самых популярных платформ.

Общий принцип интеграции

Виджет виртуальной примерочной — это JavaScript-скрипт, который добавляется на ваш сайт одной строкой кода. После подключения:

  • На страницах товаров появляется кнопка «Примерить».
  • Покупатель нажимает на неё, загружает своё фото и видит результат.
  • Весь процесс происходит на стороне сервиса — нагрузка на ваш сайт не увеличивается.

Виджет загружается асинхронно — он не блокирует загрузку вашей страницы и не влияет на скорость сайта.

Подключение к Tilda

Tilda — одна из самых популярных платформ для создания сайтов в России. Подключение виджета занимает 5 минут.

Шаг 1: Получите код виджета

После регистрации в личном кабинете Фитрины вы получите уникальный код виджета — одну строку HTML.

Шаг 2: Добавьте блок T123

Откройте нужную страницу в редакторе Tilda и добавьте блок T123 (HTML-код) в то место, где хотите разместить виджет.

Шаг 3: Вставьте код

Вставьте код виджета в блок T123. Сохраните и опубликуйте страницу.

Шаг 4: Проверьте работу

Откройте опубликованную страницу. Кнопка примерки должна появиться рядом с товаром.

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

Подключение к WordPress

WordPress и WooCommerce — самые популярные движки для интернет-магазинов в мире.

Вариант 1: Через шорткод

Вставьте код виджета в виде шорткода в шаблон карточки товара WooCommerce. Для этого:

  • Откройте файл single-product.php в вашей теме.
  • Добавьте код виджета после описания товара.
  • Сохраните файл.

Вариант 2: Через плагин

Если вы не хотите редактировать код, используйте плагин вставки скриптов (например, Insert Headers and Footers):

  • Установите плагин из каталога WordPress.
  • В настройках плагина вставьте код виджета в раздел «Footer Scripts».
  • Виджет появится на всех страницах сайта.

Вариант 3: Через Elementor или плагин страниц

Если вы используете визуальный конструктор:

  • Добавьте виджет «HTML» в нужное место шаблона.
  • Вставьте код виджета.
  • Сохраните и проверьте результат.

Подключение к Bitrix / 1С-Битрикс

Bitrix — популярная платформа для крупных российских интернет-магазинов.

Шаг 1: Откройте шаблон компонента

Найдите шаблон компонента карточки товара: /bitrix/templates/ваш_шаблон/components/bitrix/catalog.element/

Шаг 2: Добавьте код виджета

Вставьте код виджета в файл template.php после блока с описанием товара.

Шаг 3: Очистите кэш

В административной панели Bitrix очистите кэш компонентов и проверьте результат на сайте.

Подключение через REST API

Для самописных решений и сложных интеграций доступен REST API:

Эндпоинт

Отправьте POST-запрос с фотографией пользователя и идентификатором товара. API вернёт URL сгенерированного изображения.

Авторизация

Все запросы авторизуются через API-ключ, который вы получаете в личном кабинете.

Асинхронная обработка

Генерация изображения занимает 10–20 секунд. API поддерживает два режима:

  • Синхронный — ответ приходит после завершения генерации.
  • Асинхронный (рекомендуется) — вы получаете ID задачи и периодически проверяете статус.

Частые вопросы при интеграции

Виджет замедлит мой сайт?

Нет. Скрипт загружается асинхронно и весит менее 50 КБ. Он не влияет на показатели Core Web Vitals.

Нужен ли разработчик?

Для Tilda и WordPress — нет: владелец магазина может подключить виджет самостоятельно за 10 минут. Для Bitrix и самописных решений может потребоваться помощь разработчика.

Можно ли настроить внешний вид кнопки?

Да. Виджет поддерживает кастомизацию: цвет кнопки, текст, размер и расположение настраиваются через параметры скрипта.

Что если виджет не отображается?

Проверьте:

  • Правильность вставки кода (кавычки, скобки).
  • Нет ли конфликтов с другими скриптами (проверьте консоль браузера).
  • Не блокирует ли ваш хостинг внешние скрипты.

Заключение

Подключение виртуальной примерочной — это не сложный IT-проект. Для большинства платформ достаточно вставить одну строку кода и проверить результат. Весь процесс занимает 10–15 минут.

Готовы подключить? Оставьте заявку — мы поможем с интеграцией бесплатно.

Хотите такую примерку?

Подключите Фитрину к вашему магазину за 10 минут

Оставить заявку
← Все статьи