Весенняя акция
Скидки до 30% на тарифный план и подарки от Яндекса, MPSTATS и Деловой среды. Получить
Реклама
ООО Инсейлс Рус ИНН 7714843760 erid: 2RanykDZ3Ri, ООО "ЯНДЕКС" ИНН 7736207543 erid:2RanymHqCE4, ООО "Мпстатс" ИНН 7804680366 erid: 2RanymKKBWQ, АО Деловая Среда ИНН 7736641983 erid: 2Ranykw5hmA
Перенесем бесплатно ваш интернет-магазин на inSales без потери трафика с любой CMS-платформы
Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2RanymBvZGt

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

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

Для интернет-магазина на inSales можно создать PWA-приложение с помощью модуля Mobsted PWA.

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

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

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

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

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

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

Установка расширения

1. Перейдите в раздел "Расширения → Каталог расширений" из панели администратора сайта.

2. В каталоге найдите интеграцию с Mobsted PWA и установите ее.

Расширение будет добавлено в раздел Расширения → Установленные.

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

Важно: не на всех шаблонах автоматическая установка работает одинаково. Наличие и расположение точек приглашений зависит от шаблона.

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

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

Настройки расширения

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

2. В открывшемся окне можно изменить данные приложения.

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

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

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

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

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

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

Приложение устанавливается из виджета-приглашения к установке:

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

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

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

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

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

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

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

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

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

По умолчанию на страницах расположены две кнопки: основная и нижняя. 

В панели администратора можно настроить внешний вид кнопок. 

Варианты расположения кнопки

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

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

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

bottom_left — рекомендовано, если на сайте размещены чаты справа. Доступно для основной кнопки.

bottom_right — рекомендовано, если на сайте размещены чаты слева. Доступно для основной кнопки.

hidden — скрывает кнопку установки. Доступно для основной и нижней кнопок.

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

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

В блок "HTML-разметка для вывода на всех страницах магазина" добавьте код ниже:

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

Где positionMobstedMainButton устанавливает положение кнопки: 'default', 'bottom_left', 'bottom_right' или 'hidden'.

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

В блок "HTML-разметка для вывода на всех страницах магазина" добавьте код ниже:

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

Где positionMobstedBottomButton устанавливает видимость желаемой кнопки: 'show' — показывать кнопку или 'hidden' — скрыть кнопку.

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

<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>

Где buttonMobstedTop — это управление верхней кнопкой, а buttonMobstedBottom — нижней.

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

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

Названия цветов и HEX-коды можно взять из таблицы.

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

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

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Зарегистрироваться», я принимаю Пользовательское соглашение и Политику конфиденциальности
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie