Виджет

В этом разделе описано подключение виджета примерки к сайтам, которые не используют Bitrix или MODX для управления контентом.

Если сайт работает на базе Bitrix или MODX, рекомендуем использовать плагины.

Подключение

Для подключения виджета:

Добавьте домен, с которого будет открываться виджет, в список разрешённых доменов.
Встройте виджет в сайт с помощью iframe.
Настройте виджет через админ-панель TryGlasses.

Настройка домена

В админ-панели TryGlasses откройте раздел Настройки → Общие и добавьте домен, с которого будет открываться виджет, в список разрешённых доменов.

Укажите домен, а не URL

Например, если ваш сайт находится по адресу https://example.com/, добавьте в список разрешённых доменов example.com.

Локальная разработка и тестирование

Если сайт запущен локально и открывается, например, по адресу http://localhost:3000/:

Добавьте запись для домена your-company.tryglasses.loc в /etc/hosts:
```
127.0.0.1 your-company.tryglasses.loc
```
Добавьте домен your-company.tryglasses.loc в список разрешённых доменов в админ-панели TryGlasses.
Убедитесь, что локально запущенный сайт можно открыть по HTTPS. Для генерации локальных сертификатов рекомендуем использовать mkcert.
Откройте сайт по адресу, например, https://your-company.tryglasses.loc:3000/.

После этого виджет будет работать корректно на локальном сайте.

Добавление виджета на сайт

Виджет встраивается на страницу сайта с помощью iframe:

<iframe
    src="https://widget.tryglasses.ru/?configToken=details"
    allow="camera"
    style="width: 400px; height: 600px;"
></iframe>

Доступ к камере

Атрибут allow="camera" обязателен.

Клиент автоматически идентифицируется по домену, с которого делается запрос.

Настройка виджета

Есть два способа настройки виджета:

Передать configToken в параметрах URL при запуске виджета и задать настройки в админ-панели TryGlasses.
Указать настройки виджета напрямую в параметрах URL при запуске.

Для новых интеграций используйте configToken

Рекомендуем первый способ. Прямая передача настроек в URL оставлена для обратной совместимости и не рекомендуется для новых интеграций.

Настройка через `configToken`

Укажите configToken в параметрах URL при запуске виджета. К каждому токену привязана конфигурация, которую можно отредактировать через админ-панель TryGlasses.

По умолчанию доступны три токена:

Токен	Назначение
`default`	Используется, если `configToken` не указан.
`details`	Виджет на странице конкретного товара.
`general`	Виджет на общей странице примерки, например, `https://example.com/tryon/`.

Добавить новые токены и изменить настройки существующих можно в админ-панели TryGlasses в разделе Настройки → Виджет.

Выбор оправы на странице продукта

При использовании виджета на странице конкретного продукта нужно передать external id модели, которая должна быть выбрана при загрузке виджета.

Для этого используйте параметр selectedExternalId, описанный в разделе "Настройка через query params", например:

<iframe
    src="https://widget.tryglasses.ru/?configToken=details&selectedExternalId=extId1"
    ...
></iframe>

Настройка через query params

Параметры виджета передаются в строке запроса URL (query params) в атрибуте src элемента iframe.

Пример использования:

<iframe
    src="https://widget.tryglasses.ru/?param1=value1&param2=value2"
    ...
></iframe>

Параметры виджета:

showControls: true / false — включает или выключает панель изменения межзрачкового расстояния.
lang: ru / en — язык виджета.
externalIds: список внешних ID моделей, доступных в панели выбора очков.

Значение по умолчанию: null. Если externalIds не указан, доступны все модели.

Пример использования:
```
<iframe
    src="https://widget.tryglasses.ru/?externalIds=extId1,extId2"
    ...
></iframe>
```
selectedExternalId: внешний ID модели, выбранной по умолчанию при загрузке виджета.

Значение по умолчанию: null. Если параметр не указан или модель с таким ID не найдена, будет выбрана первая модель из списка.

Выбранная модель должна входить в список

Если задан externalIds, значение selectedExternalId должно присутствовать в этом списке.

Пример использования:
```
<iframe
    src="https://widget.tryglasses.ru/?selectedExternalId=extId1"
    ...
></iframe>
```
Пример с ошибкой:
```
<iframe
    src="https://widget.tryglasses.ru/?externalIds=extId1,extId2&selectedExternalId=extId3"
    ...
></iframe>
```
ID extId3 отсутствует в списке externalIds, поэтому модель с этим ID не будет показана.
showModelSelector: true / false — включает или выключает панель выбора очков.

Значение по умолчанию: true.

Устранение неполадок

Часто возникающие проблемы:

Домен не добавлен в список разрешённых доменов в админ-панели TryGlasses.
В списке разрешённых доменов указан полный URL, а не домен.
В iframe используется домен, отличный от widget.tryglasses.ru, например, demo.tryglasses.ru.
При локальной разработке сайт открывается без HTTPS.