Интеграция in-app уведомлений

Интеграция и управление попапами в мобильном приложении.

Инициализация Android SDK

При инициализации задаётся контекст для доступа к ресурсам Android, а также компонентам приложения.

Указание shopId нужно для связи приложения с аккаунтом в административной панели магазина.

sdk.initialize(
  context = YOUR_CONTEXT, 
  shopId = YOUR_SHOP_ID  
)

Следующим шагом должна стать настройка Fragment Manager, который используется SDK для отображения уведомлений внутри приложения.

Он позволяет отображать три вида уведомлений:

1. По центру экрана
2. В нижней части экрана
3. Полноэкранное уведомление

sdk.initializeFragmentManager(fragmentManager = fragmentManager)

Дальнейшие настройки будут доступны в административной панели магазина. Как это работает:

1. Основные настройки задаются в административной панели, формируется JSON
2. SDK на устройстве получает этот JSON и передаёт в систему отображения уведомлений
3. Fragment Manager отвечает за рендеринг уведомления с учётом переданных параметров, такие как кнопки, позиция на экране и так далее

Пример JSON, который передаётся SDK

{
  "popup": {
    "id": 1234,
    "channels": [],
    "position": "centered",
    "delay": 0,
    "html": "<div class=\"popup-sample\"><div class=\"popup-sample__wrap\" id=\"popup-sample-modal\"><div class=\"popup-sample__content\"><div class=\"picture-preview\" id=\"popup-sample-image\"></div><div id=\"popup-sample-content\"><div class=\"popup-title\" id=\"popup-sample-header\">Sample Popup</div><p class=\"popup-sample__intro\" id=\"popup-sample__intro\">This is a sample text for demonstration purposes.</p></div><span class=\"popup-sample__close\" id=\"popup-sample-close\"></span></div></div></div>",
    "components": "{\"text\": \"This is a sample text for demonstration purposes.\", \"button\": \"Sample Button\", \"header\": \"Sample Popup\", \"text_enabled\": \"1\", \"image_enabled\": \"0\", \"header_enabled\": \"1\"}",
    "web_push_system": false,
    "popup_actions": "{}"
  }
}

Заполнение поля Стрим в административной панели

Для приложения на Android обязательно указывайте "android" в поле Стрим. Не оставляйте поле пустым.

Инициализация iOS SDK

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

1. shopId - для связи приложения с аккаунтом в административной панели магазина
2. apiDomain - адрес сервера, откуда SDK будет получать данные уведомлений
3. parentViewController - для отображения уведомления, выполняет ту же роль, что и Fragment Manager в Android SDK - опционален
4. stream - обязателен при использовании parentViewController
5. onError - хендлинг ошибок

sdk = createPersonalizationSDK(
  shopId: "YOUR_SHOP_ID",
  apiDomain: "YOUR_API_DOMAIN",
  parentViewController: rootViewController, 
  stream: "ios", 
  onError: { error in }
)

Заполнение поля Стрим в административной панели

Для приложения на iOS обязательно указывайте "ios" в поле Стрим. Не оставляйте поле пустым.

Программная настройка расположения попапа

Кастомизировать попап можно, используя методы showAlert(), showTopDialog(), showBottomDialog():

/*

Alert managment in iOS SDK

titleText - required
messageText - required
imageUrl - optional
confirmButtonText - optional
dismissButtonText - optional

*/

notificationWidget?.showTopDialog(
  titleText: "title",
  messageText: "message",
  imageUrl: "image url",
  confirmButtonText: "custom confirm button text",
  dismissButtonText: "custom dismiss button text",
  onConfirmButtonClick: {
  print("confirm clicked")
  }
)

notificationWidget?.showAlert(
  titleText: "title",
  messageText: "message",
  imageUrl: "image url",
  confirmButtonText: "custom confirm button text",
  dismissButtonText: "custom dismiss button text",
  onConfirmButtonClick: {
  print("confirm clicked")
  }
)

notificationWidget?.showBottomDialog(
  titleText: "title",
  messageText: "message",
  imageUrl: "image url",
  confirmButtonText: "custom confirm button text",
  dismissButtonText: "custom dismiss button text",
  onConfirmButtonClick: {
  print("confirm clicked")
  }
)

Все параметры, кроме titleText и messageText, являются опциональными

Обратите внимание

Настройки через админ-панель переопределяют программные параметры. Используйте их совместно с осторожностью.

Интерфейс настройки попапа в мобильном приложении

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

После нажатия появится окно с опциями: Для сайта и Для мобильного приложения. Вам нужен второй вариант. После выбора появится интерфейс настройки мобильного попапа:

В настройках указывается:

1. Название
2. Расположение попапа
3. Дата начала
4. Дата окончания
5. Переключатели кнопок закрытия, а также перехода или действия, с возможностью задать их текст, ссылки и диплинки для Android и iOS

Заданные настройки кнопок и расположения будут переданы в SDK и обработаны parentViewController или Fragment Manager, в зависимости от платформы.

После того как пользователь заполнил форму, открывается следующий интерфейс:

Часть значений настроек из первой формы, уже будет занесена в поля этой. Особое значение имеют поля Стрим и Событие вызова .

В поле Стрим нужно обязательно указать параметр, соответствующий вашей платформе: "ios" или "android"

В Событие вызова нужно указать условия, при которых будет показываться попап в приложении. Доступные опции:

1. При загрузке страницы
2. При вызове трекинга события
3. В полном поиске
4. Ручной вызов

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

Под заголовком Лицевая сторона находятся переключатели, которые позволяют добавлять новые элементы в попап.

1. Заголовок
2. Изображение
3. Основной текст
4. Кнопка закрытия
5. Кнопка перехода или действия
6. Подписка на мобильный пуш

При активации переключателей, станут доступны новые поля настроек, как в случае с кнопками, форма загрузки изображений или же просто отобразятся новые элементы на окне представления попапа слева.

Заменить содержимое текста можно прямо в графическом редакторе слева. Более гибкие настройки доступны во вкладке Оформление. После выбора темы, нажмите на значок редактирования и можно будет изменить:

1. Цвет фона
2. Цвет текста
3. Размер шрифта
4. Размер текста в форме
5. Размер заголовка
6. Основной цвет
7. Выравнивание текста

Эти изменения можно осуществлять как в базовом, так и в CSS редакторе.

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