Приоритетный метод установки

Виджет позволяет выбрать аптеку и оформить заказ без перехода на сайт Ютеки.

Оформление виджета не может быть никаким образом изменено на стороне заказчика.

Использовать виджет можно только с согласия правообладателя ООО “Ютека“. Использование без согласия правообладателя (в том числе внедоговорное использование) является незаконным и влечет ответственность, установленную Гражданским кодексом РФ, а также другими законами (подробнее). Если вы хотите использовать виджет, пожалуйста, напишите на почту sales@uteka.ru

Приоритетный способ установки виджета

Установленный таким способом виджет открывается только во всплывающем окне, например, по кнопке “купить”. Если вам необходимо встроить виджет в тело сайта, воспользуйтесь расширенным методом установки.

1. Настройка мета-тега viewport

Для правильной работы виджета на мобильных устройствах необходима настройка мета-тега viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no;">

2. Скрипт для инициализации виджета

На все страницы сайта, внутрь тега head необходимо подключить скрипт, который позволит запускать виджет:

<script>
  var script = document.createElement('script')
  script.src = 'https://cdn.uteka.ru/static/widgets/widget.simple.compiled.js?l=' + Date.now()
  script.async = true

  document.head.appendChild(script)
</script>

Важно! Подключение скрипта на всех страницах вашего сайта, позволит сохранять utm метки пользователей для использования их внутри виджета.

3. Запуск виджета

Для вызова виджета необходимо обернуть кнопку (HTML код) в ссылку, по примеру ниже, и передать список товаров ids через data атрибут для отображения их в виджете.

HTML разметка для запуска виджета с одним товаром product-id:

<a href="https://uteka.ru" data-product-id="213120">
  Купить на Ютеке (или любой другой код или текст)
</a>

HTML разметка для запуска виджета с предложением выбрать товар из списка product-ids:

<a href="https://uteka.ru" data-product-ids="213126,213120">
  Купить на Ютеке (или любой другой код или текст)
</a>

HTML разметка для запуска виджета с выбранным товаром product-id, пользователь позже может выбрать другой товар из списка product-ids

<a href="https://uteka.ru" data-product-id="213120" data-product-ids="213126,213120">
  Купить на Ютеке (или любой другой код или текст)
</a>

Обратите внимание: Согласно требованиям договора, ссылка на Ютеку должна присутствовать непосредственно в коде страницы, на которую планируется установка виджета и корректно обрабатываться поисковыми роботами.

Рекомендация: Вы можете заменить стандартную ссылку (https://uteka.ru) на страницу производителя товаров, передаваемых в виджет, пример: https://uteka.ru/producers/valenta-farm-227212/.

Дополнительная информация: ID продукта это последние цифры в URL на Ютеке, к примеру: для продукта https://uteka.ru/product/derinat-80995/ ID это - 80995.

Важно: ID выбранного товара, переданное в product-id, должно так же присутствовать в списке product-ids.

Важно: Рекомендуется передавать в виджет не более 15 товаров. Максимальное количество товаров для передачи в виджет – 100.

Важно! Чтобы тег a, размещенный на странице, работал как кнопка запуска виджета, необходимо дождаться полной загрузки скрипта. До полной загрузки скрипта можно задизейблить кнопку или добавить в тег событие onclick

HTML разметка для предотвращения перехода на сайт Ютеки до полной загрузки скрипта

<a href="https://uteka.ru" data-product-id="213120" data-product-ids="213126,213120" onclick="return event.preventDefault()">
  Купить на Ютеке (или любой другой код или текст)
</a>

4. Дополнительные настройки виджета

Передвижение карты на мобильных устройствах: По умолчанию перемещение по карте происходит с помощью движения одного пальца по сенсорной панели мобильного устройства (иначе - перетаскиванием карты). Можно настроить передвижение карты виджета двумя пальцами.

Запуск виджета с настройкой `draggable` для активации передвижения карты двумя пальцами:

<a href="https://uteka.ru" data-product-id="213120" data-draggable="false">
  Купить на Ютеке (или любой другой код или текст)
</a>

Обязательные условия установки виджета из договора

Заказчик обязуется в течение всего срока размещения Виджета на Интернет сайте Заказчика обеспечить его соответствие следующим критериям и условиям:

Виджет интерактивной карты интегрируется в Интернет сайте Заказчика в неизменном виде;
Виджет интерактивной карты на Интернет сайте Заказчика привязан к географическому контексту по IP адресу Пользователя;
ссылка на Интернет-ресурсы Исполнителя не должна содержать атрибута rel со значением “nofollow,noindex”;
ссылка не должна быть скрыта скриптом или поставлена через редирект;
ссылка должна содержать UTM-метку для отслеживания переходов с Интернет сайта Заказчика на Интернет-ресурсы Исполнителя;
Заказчик не вправе вносить изменения в оформление Виджета, вносить изменения в программный код Виджета, удалять/изменять товарные знаки (бренды, логотипы) Исполнителя, изменять цветовое и иное визуальное оформление Виджета;.
Заказчик не вправе размещать логотипы, бренды (товарные знаки, знаки обслуживания), а также ссылки на иные сайты (сервисы) бронирования и/или заказа, аналогичные Интернет-ресурсам Исполнителя, способные ввести Пользователей в заблуждение относительно принадлежности размещаемого Виджета.

Вопросы и ответы

Как определяется геолокация пользователя внутри виджета?

По умолчанию виджет загружает карту с аптеками в городе, который определен по IP адресу пользователя.

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

Как передавать UTM метки в виджет?

При условии что былы выполнены все пункты по интеграции виджета с документации, скрипт сам сохранит и передаст utm метки в виджет.