Расширенный метод установки
Виджет позволяет выбрать аптеку и оформить заказ без перехода на сайт Ютеки.
Минимально поддерживаемые размеры виджета: 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'
})
})
Обязательные условия установки виджета из договора
Заказчик обязуется в течение всего срока размещения Виджета на Интернет сайте Заказчика обеспечить его соответствие следующим критериям и условиям:
Виджет интерактивной карты интегрируется в Интернет сайте Заказчика в неизменном виде;
Виджет интерактивной карты на Интернет сайте Заказчика привязан к географическому контексту по 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>