Расширенный метод установки #
Виджет позволяет выбрать аптеку и оформить заказ без перехода на сайт Ютеки.
Минимально поддерживаемые размеры виджета: 320x520.
Оформление виджета не может быть никаким образом изменено на стороне заказчика.
Использовать виджет можно только с согласия правообладателя ООО “Ютека“. Использование без согласия правообладателя (в том числе внедоговорное использование) является незаконным и влечет ответственность, установленную Гражданским кодексом РФ, а также другими законами (подробнее). Если вы хотите использовать виджет, пожалуйста, напишите на почту sales@uteka.ru
Данный способ интеграции НЕ является рекомендуемым, чтобы использовать рекомендуемый способ используйте документацию по ссылке!
Расширенный вариант установки виджета #
Этот метод позволяет гибкую установку виджета для встраивания в тело сайта. Если вам достаточно всплывающего окна по кнопке/ссылке, воспользуйтесь рекомендуемым методом.
1. Настройка мета-тега viewport #
Для правильной работы виджета на мобильных устройствах необходима настройка мета-тега viewport
:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no;">
Обратите внимание: Если тег viewport
будет содержать какое-то другое значение, то на мобильных устройствах корректная работа виджета не гарантируется.
2. Скрипт для инициализации виджета #
На всех страницах сайта необходимо подключить JS скрипт, который позволит загружать товары в виджет и собирать utm метки для передачи в виджет:
<script>
window.uteka = window.uteka || {}
window.uteka._host = 'widget.uteka.ru',
window.uteka._queue = []
window.uteka._loaded = false
window.uteka.onReady = function (callback) {
if (window.uteka._loaded) {
return callback()
}
window.uteka._queue.push(callback)
}
var script = document.createElement('script')
script.src = 'https://cdn.uteka.ru/static/widgets/widget.compiled.js?l=' + Date.now()
script.async = true
script.addEventListener('load', function () {
window.uteka._loaded = true
window.uteka._queue.forEach(function (callback) {
callback()
})
})
document.head.appendChild(script)
</script>
Важно! Подключение скрипта на всех страницах вашего сайта, позволит сохранять utm метки пользователей для использования их внутри виджета.
3. Базовая разметка виджета #
На страницу, куда планируется установка виджета, необходимо добавить HTML разметку:
<div class="uteka-widget">
<!-- Шапка виджета -->
<div class="uteka-widget-header">
<div class="uteka-widget__container">
<div class="uteka-widget-header__inner">
<!-- Логотип -->
<a
class="uteka-widget-header__logo"
href="https://uteka.ru/"
target="_blank"
>
<img
src="https://widget.uteka.ru/static/img/widgets/logo-light.svg"
alt="Заказать в Ютеке"
title="поиск в аптеках"
/>
</a>
<!-- Заголовок -->
<div class="uteka-widget-header__title"></div>
<!-- Крестик -->
<a href="#" class="uteka-widget-header__close"></a>
</div>
</div>
</div>
<iframe allow="geolocation"></iframe>
</div>
Обратите внимание: Согласно требованиям договора, логотип и ссылка на Ютеку должны присутствовать непосредственно в коде страницы, на которую планируется установка виджета и корректно обрабатываться поисковыми роботами.
Рекомендация: Вы можете заменить стандартную ссылку логотипа (https://uteka.ru/) на страницу производителя товаров, передаваемых в виджет, пример: https://uteka.ru/producers/valenta-farm-227212/.
Рекомендация: Вы можете удалить крестик из HTML разметки, если не планируете встраивать виджет в всплывающее окно (попап). Пример реализации виджета в попапе можно найти в разделе “Вопросы и ответы”.
4. Оформление виджета #
Чтобы виджет был правильно оформлен, необходимо добавить на страницу следующие CSS стили:
.uteka-widget {
/* Минимально поддерживаемые размеры виджета: 320x520. */
width: 100%;
height: 768px;
outline: 1px solid #e0e0e0;
}
.uteka-widget iframe {
border: none;
width: 100%;
height: calc(100% - 57px);
}
.uteka-widget__container {
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 600px) {
.uteka-widget__container {
padding: 0 20px;
}
}
@media (min-width: 768px) {
.uteka-widget__container {
padding: 0 40px;
}
}
@media (min-width: 1024px) {
.uteka-widget__container {
padding: 0 44px;
}
}
@media (min-width: 1440px) {
.uteka-widget__container {
padding: 0 60px;
max-width: 1440px;
}
}
.uteka-widget-header {
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.uteka-widget-header__inner {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 56px;
}
.uteka-widget-header__title {
background: url('https://widget.uteka.ru/static/img/widgets/title_2@mobile.svg') no-repeat;
background-position: center;
width: 230px;
height: 24px;
}
.uteka-widget-header__logo {
height: 16px;
}
.uteka-widget-header__logo img {
height: 100%;
}
.uteka-widget-header__close {
position: absolute;
top: 0;
right: -8px;
bottom: 0;
z-index: 5;
margin: auto;
width: 32px;
height: 32px;
background: url('https://widget.uteka.ru/static/img/widgets/close_2.svg') no-repeat center;
}
@media (min-width: 1024px) {
.uteka-widget-header__inner {
flex-direction: row;
}
.uteka-widget-header__title {
background-image: url('https://widget.uteka.ru/static/img/widgets/title_2.svg');
width: 264px;
height: 24px;
}
.uteka-widget-header__logo {
position: absolute;
left: 0;
bottom: 0;
top: 0;
margin: auto;
height: 32px;
}
}
5. Примеры запуска виджета #
Рекомендация: Исходя из соображений оптимизации скорости загрузки сайта, на который устанавливается виджет, рекомендуется загружать виджет только по требованию, например, по клику на некоторую кнопку или при попадании блока с виджетом в область просмотра пользователя.
Запуск виджета с одним товаром productId
:
#
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
window.uteka.loadWidget(widget, {
productId: '216198'
})
})
Запуск виджета с предложением выбрать товар из списка productIds
:
#
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
window.uteka.loadWidget(widget, {
productIds: [
'213126',
'213120',
// и так далее...
]
})
})
Важно: Рекомендуется передавать в виджет не более 15 товаров. Максимальное количество товаров для передачи в виджет – 100.
Запуск виджета с выбранным товаром productId
, пользователь позже может выбрать другой товар из списка productIds
:
#
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
window.uteka.loadWidget(widget, {
productId: '213126',
productIds: [
'213126',
'213120',
// и так далее...
]
})
})
Важно: ID выбранного товара, переданное в productId
, должно так же присутствовать в списке productIds
.
Важно: Рекомендуется передавать в виджет не более 15 товаров. Максимальное количество товаров для передачи в виджет – 100.
6. Дополнительные настройки виджета #
Передвижение карты на мобильных устройствах: По умолчанию перемещение по карте происходит с помощью движения одного пальца по сенсорной панели мобильного устройства (иначе - перетаскиванием карты). Можно настроить передвижение карты виджета двумя пальцами.
Запуск виджета с настройкой draggable
для активации передвижения карты двумя пальцами:
#
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
window.uteka.loadWidget(widget, {
draggable: false,
productId: '213126'
})
})
Запуск виджета с настройкой hideProperties
для скрытия сроки свойств у картоки товара:
#
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
window.uteka.loadWidget(widget, {
productId: '213126',
hideProperties: 'true',
})
})
Обязательные условия установки виджета из договора #
Заказчик обязуется в течение всего срока размещения Виджета на Интернет сайте Заказчика обеспечить его соответствие следующим критериям и условиям:
-
Виджет интерактивной карты интегрируется в Интернет сайте Заказчика в неизменном виде;
-
Виджет интерактивной карты на Интернет сайте Заказчика привязан к географическому контексту по IP адресу Пользователя;
-
ссылка на Интернет-ресурсы Исполнителя не должна содержать атрибута rel со значением “nofollow,noindex”;
-
ссылка не должна быть скрыта скриптом или поставлена через редирект;
-
ссылка должна содержать UTM-метку для отслеживания переходов с Интернет сайта Заказчика на Интернет-ресурсы Исполнителя;
-
При постановке якорной ссылки в «теле» интернет-страницы на Виджет, такая ссылка должна вести к началу Виджета, при клике на ссылку, Виджет должен быть виден полностью, включая все логотипы (бренды, товарные знаки) «Ютека», Uteka.
-
Логотипы, бренды (товарные знаки, знаки обслуживания), а также ссылки на иные сайты (сервисы) бронирования и/или заказа, аналогичные Интернет-ресурсам Исполнителя могут быть расположены исключительно под Виджетом Исполнителя;
-
Заказчик не вправе вносить изменения в оформление Виджета, вносить изменения в программный код Виджета, удалять/изменять товарные знаки (бренды, логотипы) Исполнителя, изменять цветовое и иное визуальное оформление Виджета;.
-
Заказчик не вправе размещать логотипы, бренды (товарные знаки, знаки обслуживания), а также ссылки на иные сайты (сервисы) бронирования и/или заказа, аналогичные Интернет-ресурсам Исполнителя, способные ввести Пользователей в заблуждение относительно принадлежности размещаемого Виджета.
Вопросы и ответы #
Как определяется геолокация пользователя внутри виджета? #
По умолчанию виджет загружает карту с аптеками в городе, который определен по IP адресу пользователя.
Для определения более точного местоположения, пользователь может воспользоваться кнопкой запроса геолокации, находящейся внутри виджета рядом с поиском по адресу.
Как передавать UTM метки в виджет? #
По умолчанию, на страницах где установлен скрипт, он сам устанавливает UTM метки в виджет копируя их с родительского документа.
Как открыть виджет в всплывающем окне (попапе)? #
Для открытия виджета в всплывающем окне используйте эту инструкцию .
Как реализовать переключение товаров в виджете через вкладки (tabs)? #
Необходимо подключить виджет по инструкции до пункта 5.
Далее реализация может выглядеть следующим образом:
<div class="site-tabs">
<a
href="#"
data-product-id="ID товара №1"
>
Название товара №1
</a>
<a
href="#"
data-product-id="ID товара №2"
>
Название товара №2
</a>
</div>
<script>
window.uteka.onReady(function () {
var widget = document.querySelector('.uteka-widget')
var tabs = document.querySelector('.site-tabs')
// Подписываемся на выбор другого товара
tabs.addEventListener('click', function (event) {
if (event.target.tagName !== 'A') return
var productId = event.target.dataset.productId
// Загружаем выбранный товар в виджет
window.uteka.loadWidget(widget, {
productId: productId
})
})
// По умолчанию загружаем в виджет первый товар
var firstTab = tabs.querySelector('a:first-child')
window.uteka.loadWidget(widget, {
productId: firstTab.dataset.productId
})
})
</script>