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

Расширенный метод установки #

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

Минимально поддерживаемые размеры виджета: 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>