Top.Mail.Ru

Автоматическое создание PWA-приложения

Внимание: если ранее вы уже создавали PWA-приложение вручную, то необходимо сначала удалить добавленные скрипты и точки вызова из кода сайта. После чего можно использовать автоустановку PWA-приложения.

Вы можете создать мобильное PWA-приложение для своего интернет-магазина на InSales с помощью модуля Mobsted PWA.

PWA (Progressive Web Application) – технология, которая позволяет покупателям установить сайт на смартфон как приложение. PWA-приложение не нужно размещать в AppStore или Google Play, оно устанавливается напрямую с вашего сайта.

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

Демо-сайт: https://www.examplepwashop.xyz/

Видео-демонстрация установки и работы приложения:

Видео-демонстрация настройки:

Содержание:

  1. Установка приложения
  2. Настройки приложения
  3. Настройка основной кнопки установки
  4. Настройка дизайна виджетов-приглашений к установке

Установка приложения

Перейдите в раздел Приложения → Центр приложений из бэк-офиса сайта.

В центре приложений найдите интеграцию с Mobsted PWA и нажмите "Установить приложение".

Приложение будет добавлено в бэк-офис вашего сайта в раздел Приложения → Установленные.

Сразу после установки, ваш сайт станет работать как PWA-приложение и в большинстве шаблонов сразу установятся точки приглашений к установке приложения.

Перечень поддерживаемых автоматических точек приглашений в шаблонах.

Обратите внимание, что не на всех шаблонах автоматическая установка работает одинаково.

Если в шаблоне добавлены какие-либо дополнительные блоки, то авто-размещение кнопок установки может не соответствовать картинкам. В этом случае рекомендуем использовать либо боковую кнопку установки из секции (Модификация расположения кнопки установки), либо написать в техподдержку Mobsted для получения рекомендаций по конкретному случаю.

Также доступно ручное создание любых дополнительных точек вызова приглашений. Инструкция →

Настройки приложения

Перейдите в раздел Приложения → Установленные приложения и нажмите на название приложения Mobsted PWA, чтобы попасть в его настройки.

Здесь вы можете изменить данные для приложения.

Website URL обязательно с https-протоколом. Если у вас не подключен SSL-сертификат, то сначала подключите SSL.

Application name – название вашего приложения при установке. Его будут видеть ваши покупатели в диалогах установки приложения, поэтому указывайте "Application name" со смыслом.

Icon title – название иконки приложения. Выводится вместе с иконкой приложения после установки на устройство. Чаще всего указывают домен или короткое название сайта.

Icon image – иконка вашего приложения. Формат PNG, разрешение 512x512 px.

Нажмите "SAVE" в самом низу страницы, чтобы сохранить настройки приложения.

Настройка основной кнопки установки

Варианты настройки:

1. Стандартный (Default) вариант, подстраивается под дизайн вашего шаблона

2. Если вы используете шаблон с шапкой, которая приклеивается вверху страницы при скролле или кастомный шаблон, то можно получить вот такой результат.

Поэтому приложение позволяет выбрать один из следующих вариантов с полупрозрачной кнопкой установки:

Bottom_left – рекомендовано, если у вас есть чаты справа.

Bottom_right – рекомендовано, если у вас есть чаты слева.

Hidden – скрывает кнопку установки.

Способ настройки

1. Чтобы настроить вид основной кнопки, перейдите в Настройки → Счетчики и Коды.

В блок "JavaScript для всех страниц" скопируйте код ниже:

<script type="text/javascript">
//variables for setup of top button
window.positionMobstedMainButton = 'default';//or 'bottom_left' or 'bottom_right' or 'hidden'
</script>

Где ….Button = "вид желаемой кнопки", a 'hidden' = ее полное скрытие.

2. Чтобы настроить вид нижней кнопки, перейдите в Настройки → Счетчики и Коды.

В блок "JavaScript для всех страниц" скопируйте код ниже:

<script type="text/javascript">
//variable for setup of bottom button
window.positionMobstedBottomButton = 'show'; //or 'hidden'
</script>

Где ….Button = "вид желаемой кнопки", 'show' = показывать кнопку или 'hidden' = скрыть кнопку.

3. Для смены внешнего вида кнопок можно добавить для них стили в блоке "JavaScript для всех страниц":

<style type="text/css">
#buttonMobstedTop {
background-color: Blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#buttonMobstedBottom {
background-color: Red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>

Где buttonTop – это управление верхней кнопкой, а buttonBottom – нижней.

Можно полностью изменить стили кнопок.

Или можно изменить только их цвет или фон. Для этого в стилях измените значения параметров: background-color (цвет фона) и color (цвет шрифта) на название цвета, например "red" или его HEX-код, например "#FF0000".

Названия цветов и HEX-коды можно взять из таблицы: https://html5css.ru/colors/colors_names.php

Настройка дизайна виджетов-приглашений к установке

Чтобы лучше отражать пользу приложения для покупателя, вы можете редактировать внешний вид приглашений и их тексты в личном кабинете сервиса Mobsted.

1. В личном кабинете Mobsted перейдите в раздел Widgets → PWA JS Capsule Widgets.

В этом разделе хранятся все ваши приглашения к установке приложения.

2. Нажмите на панель нужного виджета, чтобы попасть в его настройки.

3. В настройках виджета вы можете изменить его тип, изображение и текст приглашения.

Справа доступен предпросмотр виджета.

Примеры изображений для приглашений:

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Недавно просмотренные статьи