Сниппеты мини-приложений

Что такое сниппеты

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

Пример сниппета в сообщенииПример сниппета в сообщении

Способы создания сниппетов

Указать параметры сниппета можно визуально в настройках мини-приложения либо программно через API ВКонтакте.

  • •

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

  • •

    При помощи API вы можете создать дополнительные версии сниппета и указать критерии их использования: сообщества, в которых сниппеты будут отображаться, либо хеш (часть URL после символа #), при наличии которого сниппет должен использоваться. Можно создать до 10 таких сниппетов. Таким образом, для одного мини-приложения вы можете создать несколько версий сниппетов, которые будут лучше подходить к той или иной ситуации. Например, можно:

    • •

      Создавать сниппеты для использования в сообществах, которые будут лучше соответствовать стилю сообществ.

    • •

      Создавать разные точки входа в мини-приложение (deep links, диплинки) для разных групп пользователей и использовать специальные сниппеты для каждой такой точки.

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

Подробнее об отображении сниппетов — в разделе Как ВКонтакте выбирает сниппет для показа.

С помощью API вы также можете указать произвольный заголовок сниппета и дополнительное описание. Сниппет, созданный в настройках, в качестве заголовка использует название мини-приложения, а в качестве описания — его категорию.

Создание сниппетов в настройках мини-приложения

Требования

Настройки сниппетов доступны администраторам мини-приложения со следующими правами:

  • •

    Создатель мини-приложения.

  • •

    Администратор с полным доступом.

  • •

    Администратор с частичным доступом, с правом «Редактирование».

Как создать сниппет

  1. 1.

    Перейдите в список приложений.

  2. 2.

    Откройте настройки нужного приложения.

  3. 3.

    В меню слева выберите Настройки → Оформление.

  4. 4.

    Загрузите изображение в блоке Иконка для каталога и сниппетов. Такой сниппет будет отображаться в сообщениях.

    Загрузить иконку для каталога и сниппетовЗагрузить иконку для каталога и сниппетов

  5. 5.

    Сохраните изменения. Сниппет готов к использованию.

Создание сниппетов через API

Требования и ограничения

  • •

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

  • •

    Через API можно создать не более 10 сниппетов.

1. Настройте приложение

  1. 1.
    Перейдите в список приложений.
  2. 2.
    Откройте настройки нужного приложения.
  3. 3.
    В меню слева выберите Настройки → Дополнительные.
  4. 4.
    В блоке Кастомные сниппеты установите Включены. Изменения сохранятся автоматически.

2. Вызовите API-запрос

Чтобы добавить сниппет, вызовите API-запрос apps.addSnippet. В параметрах запроса можно указать изображение сниппета и название его кнопки. Кроме того, вы можете использовать дополнительные параметры, чтобы настроить критерии показа сниппета:

Параметр
Описание
group_id
Массив идентификаторов сообществ, в которых сниппет будет отображаться.
hash
Массив хешей, с которыми будет связан сниппет. Хеш — часть URL после символа #, например, в адресе https://vk.com/app12345#start-page хеш равен start-page. Если ссылка на приложение содержит один из хешей, указанных в массиве, сниппет будет отображён при использовании этой ссылки. Важно. Значения чувствительны к регистру. В массиве можно указать значения с маской — символом *. Маска означает любое количество символов или пустую подстроку. Например, значение join* соответствует следующим ссылкам:  •  https://vk.com/app123#join_invite  •  https://vk.com/app123#join_msg  •  https://vk.com/app123#join Элемент массива без * соответствует ссылкам, в которых хеш точно совпадает со значением элемента. Например, join соответствует ссылке https://vk.com/app123#join, но не https://vk.com/app123#join_invite. Максимальная длина — 100 символов.

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

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

Другие запросы для работы со сниппетами

Как ВКонтакте выбирает сниппет для показа

Для выбора сниппета платформа анализирует ссылку на мини-приложение, контекст запуска и параметры сниппета:

  • •

    Хеш в ссылке должен совпадать со строками, указанными в параметре hash.

    Если вы использовали маску для хеша, обратите внимание, в каком месте хеша стоит символ *.

  • •

    Если при создании сниппета вы указали параметр group_id, ВКонтакте проверит идентификатор сообщества. Сниппет будет использован, только если идентификатор был упомянут в group_id.

Пример https://vk.com/app12345?ref=snippet_im#screen1 https://vk.com/app12345?ref=snippet_post#screen1 ```

Когда указан этот параметр, ВКонтакте не проверяет место вызова, а выбирает сниппет с соответствующим `vk_ref`.
 Если после всех проверок окажется, что контексту соответствует несколько сниппетов, ВКонтакте покажет сниппет, созданный последним. Если же найти сниппет, соответствующий контексту, не получится, ВКонтакте покажет сниппет, созданный в настройках мини-приложения. ## Материалы по теме * [Настройки мини-приложений | Информация](mini-apps/settings/general/information) * [Механика пользовательских рекомендаций](mini-apps/promotion/social-mechanics/user-recommendation) * [apps.addSnippet](method/apps.addSnippet) * [apps.getSnippets](method/apps.getSnippets) * [apps.deleteSnippet](method/apps.deleteSnippet) <!-- СТАРЫЙ ТЕКСТ ПРО OTG, ПРОВЕРЯТЬ ЕГО НЕ НАДО. `` Вы можете создавать уникальные сниппеты мини-приложения или игры на основе тегов [Open Graph](https://ogp.me/) в HTML-разметке мини-приложения или игры. Контент сниппета может зависеть от его размещения. Так, для стены сообщества сниппет может адаптировать своё содержание под конкретное сообщество. Также можно изменить сниппет под конкретного пользователя, добавляя персонализированное обращение на изображение сниппета или в его заголовок. Вы можете интегрировать сниппеты следующими способами: * [Через WebView](#Через%20WebView) * [Через API](#Через%20API) ## Случаи использования * Пользователь поделился мини-приложением в личном сообщении. В личные сообщения будет отправлен сниппет со ссылкой на мини-приложение. Пример. Пользователь отправил другу сниппет вызова из мини-приложения «Шаги ВКонтакте». :::carousel ![alt=Внешний вид сниппета в личном сообщении;title=Сниппет в личном сообщении;](5350806ea416a736de5ce711715a8c8df8e76293062e8dc9f3a7f41b "1754452342000775498") ![alt=Внешний вид уникального сниппета в личном сообщении;title=Уникальный сниппет в личном сообщении;](afdd33865d951e276e4cc92f7ccbefe17ecf1324184663f12d652489 "-3574514221255695047") ::: * Пользователь поделился мини-приложением в ленте: на своей странице или странице сообщества. В записи отображается сниппет со ссылкой на мини-приложение. Пример. Пользователь поделился в ленте сниппетом вызова из мини-приложения «Шаги ВКонтакте». :::carousel ![alt=Внешний вид сниппета в ленте;title=Сниппет в ленте;](2f3233dd5afd1362bbdad0742c9ca434f669ab4bdb4b41e002d238f7 "8262453587009032103") ![alt=Внешний вид уникального сниппета в ленте;title=Уникальный сниппет в ленте;](dfafea47476c0348e22a9917505d5e05ff106cc841892a3352d50a10 "3250953683935731728") ::: ## Интеграция ### Через WebView Добавьте в HTML-код страниц вашего мини-приложения следующие теги. Теги не обязательны. #### Тип `og:type` — тип сниппета. ```HTML <meta property="og:type" content="website" />

URL

og:url — URL, по которому доступно мини-приложение.

HTML
<meta property="og:url" content="https://vk.com/app5748831/" />

Описание

og:description — описание мини-приложения. Максимальная длина — 80 символов.

HTML
<meta property="og:description" content="Рассылки сообщений от сообщества"/>

Изображение

og:image — URL изображения сниппета (обложка).

HTML
<meta property="og:image" content="https://sun1-93.userapi.com/impf/c857720/v857720395/d362e/vrnBsBqgE8Y.jpg?size=347x752&quality=96&sign=b6f83cb2dbb2756427c842629a6d669c&type=app"/>

Квадратное изображение

og:small_image — URL квадратного изображения сниппета (квадратная обложка для каталога).

HTML
<meta property="og:small_image" content="https://sun9-81.userapi.com/impf/c850536/v850536397/129314/X1-mG-HKPmk.jpg?size=278x278&quality=90&sign=b389b59c126122cc6b8f1d0a0b1fac19"/>

Кнопка

og:button_title — текст кнопки сниппета.

HTML
<meta property="og:button_title" content="Подписаться"/>

Через API

Чтобы интегрировать сниппет мини-приложения или игры, передайте данные сниппета с помощью метода apps.addSnippet.

Смотрите также методы:

-->