Создание приложения компании в VK
Нет времени читать?
Статья в разработке!
Функционал доступен начиная с релиза 2.8.3 в рамках комплексной подписки "Контакт-центр 5S Chat" (актуальные тарифы см. в Каталоге услуг)
Содержание
Введение
См. основную статью: Интеграция с сообществом ВКонтакте (VK).
В процессе настройки интеграции с сообществом компании VK предусмотрено подключение веб-приложения 5S Link. По умолчанию подключается приложение в стандартном виде без оформления. При необходимости подключения брендового приложения требуется произвести дополнительные настройки.
См. документацию на сайте VK:
● https://dev.vk.com/ru/mini-apps/settings/general/information
● https://dev.vk.com/ru/mini-apps/getting-started#2.%20Зарегистрируйте%20мини-приложение%20ВКонтакте
Настройка
1. Создание приложения VK
1) Регистрация приложения
Для создания приложения необходимо перейти на портал разработчиков dev.vk.com и нажать кнопку “Создать приложение”:
В появившемся окне создания приложения требуется ввести название приложения и выбрать категорию:
После заполнения реквизитов следует нажать кнопку “Создать”. Во всплывающем окне “Подтверждение действия” необходимо выбрать способ подтверждения и одобрить действие.
Регистрация приложения завершена. Откроется панель управления приложением:
При регистрации приложения платформа автоматически генерирует его идентификатор. Он будет необходим для дальнейшей настройки интеграции (см. ниже).
2) Информация о приложении
В разделе “Информация” следует заполнить описание и краткое описание приложения:
- Описание отображается в разделе “О приложении” (см. ниже). Здесь рекомендуется пояснить, для чего можно использовать приложение и кому оно пригодится;
- Краткое описание видно пользователям на экране запуска и в каталоге сервисов (см. ниже). Здесь рекомендуется описать задачу, которую решает приложение, и добавить призыв к действию.
Ниже на этой же странице следует заполнить параметр “Официальное сообщество” – выбрать сообщество своей компании:
От имени официального сообщества можно будет публиковать новости и писать пользователям в личные сообщения, также выбранное сообщество будет указано в строке “Автор приложения”/"Разработчик" (см. ниже).
Также необходимо активировать переключатель “Запуск приложения из сообщества” и выбрать название кнопки, например “Открыть приложение”:
Данная настройка необходима для добавления приложения в сообщество, выбранное название будет отображаться на кнопке запуска приложения в меню в верхней части сообщества под обложкой и названием – см. ниже в разделе “Добавление приложения в сообщество”.
Внесенные изменения необходимо записать нажатием на кнопку “Сохранить” внизу раздела настройки “Информация”.
3) Настройка размещения приложения
Для дальнейшей настройки следует перейти в раздел “Размещение”.
В блоке “Состояние для пользователей” необходимо переключить состояние на “Включено”:
В блоках “Мобильное приложение”, “Десктопная версия сайта” и “Мобильная версия сайта” необходимо прописать URL-адрес приложения 5S Link (см. в статье “Настройка приложения 5S LINK v2 → DNS-имя”):
Внесенные изменения необходимо записать нажатием на кнопку “Сохранить” внизу раздела.
4) Оформление приложения
Далее следует перейти в раздел “Оформление”:
В данном разделе необходимо загрузить все иконки и обложки для узнаваемости приложения (см. ниже). Требования к размерам и форматам изображений прописаны в разделе для каждого вида иконок.
Примечание: При загрузке “Универсальной иконки” маленькие подгружаются автоматически.
Можно использовать логотип компании или другое изображение в стилистике вашего бренда:
На вкладке “Изображения” необходимо загрузить следующие изображения:
- Большой сниппет – изображение, которое отображается, если ссылку на приложение публикуют на стене пользователя или сообщества;
- Скриншоты – изображения, которые отображаются во всплывающей карточке мини-приложения, на экране “О приложении” в каталоге мини-приложений и на экране “О приложении” в каталоге плагинов для сообществ:
Требования к размерам и форматам изображений указаны в каждом разделе настройки. Подробное описание см. на сайте сервиса:
● https://dev.vk.com/ru/mini-apps/settings/general/design#Изображения;
● https://dev.vk.com/ru/mini-apps/settings/design-examples#Карточка%20мини-приложения.
5) Модерация
Требования к обязательным настройкам приложения прописаны в разделе “Модерация”:
После завершения всех обязательных настроек данный раздел выглядит следующим образом:
При нажатии кнопки “Отправить заявку” производится переход к заполнению заявки на модерацию. Проверка приложения и подтверждение может занять несколько часов.
В случае успешного подтверждения приложения приходит оповещение от техподдержки VK (перейти к переписке можно по кнопке в разделе “Модерация” → блок “Тикет”), статус проверки заявок по платформам изменяется на “Проверено”, статус приложения – на “Проверенное приложение”:
После этого можно переходить к подключению созданного приложения в сообщество (см. далее).
2. Добавление приложения в сообщество
Для подключения приложения в сообщество следует открыть созданное приложение в браузере и перейти по кнопке “Действия → Добавить в сообщество”:
Открывается страница в контексте добавляемого приложения со списком сообществ, в которых текущий пользователь является администратором. Требуется выбрать нужное сообщество и нажать кнопку “Добавить”:
Выходит сообщение об успешном добавлении приложения 5S Link в сообщество.
В меню сообщества (под обложкой и названием) появляется кнопка запуска приложения:
3. Настройка обложки для кнопки
Для кнопки есть возможность добавить обложку через настройки пунктов меню – см. инструкцию на сайте сервиса.
Меню – это навигационный блок вверху страницы сообщества, который содержит основные тематические разделы. Пункты располагаются в карусели и визуально напоминают кнопки. Меню может быть не только функциональным, но и поддерживать визуальную концепцию сообщества.
Для настройки меню следует нажать кнопку “Настроить” в данном блоке либо перейти в раздел сообщества “Управление → Меню”:
Примечание: Настраивать меню можно только через компьютерную версию сайта VK.
Открывается страница настройки пунктов меню. Напротив пункта с приложением нужно нажать кнопку “Изменить” – при этом разворачиваются параметры настройки:
Есть возможность изменить название пункта меню – описание длиной до 20 символов, и добавить обложку – иконку, фото или картинку:
Скачать предлагаемую в примере обложку можно по ссылке: Обложка для меню.
Также есть возможность сделать обложку в индивидуальном оформлении своей компании. Обычно меню стилизуют под общее оформление сообщества. Если нет возможности привлечь профессионального дизайнера, можно сделать обложки самостоятельно в любом удобном редакторе изображений.
Также есть специализированные веб-сервисы, в которых можно самостоятельно разработать обложки для меню, например, вкменю.рф, одобренный VK. В конструкторе обложек можно выбрать цвет, сделать надпись одним из встроенных шрифтов, использовать иконки ВКонтакте.
ВКонтакте разрешает использовать в меню иллюстрации с минимальным разрешением 376х256 пикселей. Можно загружать файлы в форматах JPG, GIF или PNG.
Несколько советов для тех, кто создает обложки самостоятельно:
- Используйте иллюстрации с минимальным количеством деталей и максимально простыми шрифтами. Разглядывать мелочи на экране смартфона пользователям будет сложно.
- Если планируете сделать навигационную панель из иконок, оформите их в виде кнопок. Посетители сообщества подсознательно захотят на них нажать.
- Протестируйте обложки и названия на компьютере и мобильном устройстве. В разных версиях они могут отображаться некорректно, поэтому лучше сразу увидеть ошибки и заменить элементы.
В результате загруженная обложка появится на кнопке перехода в приложение в меню сообщества:
4. Настройка интеграции в программе
После подключения приложения в сообществе требуется изменить настройки интеграции с сообществом VK в программе.
Для этого следует скопировать ID приложения ВКонтакте:
Затем перейти в программе в настройках интеграции с VK к редактированию учетной записи (подробнее см. в основной статье), переключить флаг “Приложение → Индивидуальное” и ввести скопированный ID в поле “Идентификатор приложения”:
Внесенные изменения необходимо сохранить и нажать кнопку “ОК” в окне выбора настройки подключения.
После этого при переходе клиентами в приложение по кнопке в меню сообщества, в чате или в сообщении они будут видеть брендированное приложение с фирменными иконками компании, заданным наименованием приложения и указанием названия сообщества в строке “Разработчик приложения”.
Примеры отображения:
1) Иконка на странице загрузки:
2) Информация о приложении:
3) Информация о разработчике приложения:
Файлы для скачивания
-
Необязательно:
-
Уточните, пожалуйста, почему: