Истории в профиле пользователя

Пользователи могут делиться достижениями и другой информацией с друзьями в историях. Добавьте возможность делиться записями в истории — это мощный инструмент распространения мини-приложения. Даже если ваш сервис не развлекательный, мы рекомендуем использовать эту механику.

Например, мини-приложение может показывать кнопку «Рассказать» или «Поделиться историей». Нажатие на эту кнопку будет открывать редактор истории с текстом и скриншотом приложения.

Пример редактора истории Пример редактора истории

Пользователь может изменить картинку или текст и опубликовать историю в своём профиле. Его друзья увидят эту публикацию.

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

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

Как реализовать

1.

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

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

Чтобы показать редактор истории на экране, вызовите событие VKWebAppShowStoryBox библиотеки VK Bridge. В параметрах события укажите картинку или видео, текст и другие визуальные элементы.

У события много параметров. Вот некоторые, которые используются наиболее часто:

Параметр	Описание
`background_type` и `url`	`background_type` указывает тип фона: изображение или видео, `url` — ссылку на файл изображения или видео.
`locked`	Если этот параметр равен `false`, пользователь может изменять размер фонового изображения и перемещать его в редакторе истории. Если параметр равен `true`, изображение растягивается на весь экран истории и изменить его размер и положение нельзя. Мы рекомендуем использовать `locked: true`.
`attachment`	Объект, который описывает изображение, видео или ссылку, которые можно дополнительно прикрепить к истории. Этот объект удобно использовать для создания кнопки, которая будет показана в нижней части истории, чтобы зрители могли перейти в мини-приложение. Пример использования — ниже. Обратите внимание, что кнопка не видна в редакторе историй, но зрители увидят её в опубликованной истории.
`stickers`	Массив, который задаёт дополнительные стикеры — визуальные элементы в истории, такие как изображения, тексты, хештеги, время и другие. Поле `transform` стикера определяет его положение и угол поворота на экране истории. Для добавления текстов используйте стикеры вида `native` и подтипа `action_text`. Пример ниже показывает, как это сделать.

Обратите внимание. Некоторые виды стикеров и атрибутов оформления могут не поддерживаться на платформе, на которой пользователь запускает мини-приложение. Учитывайте это при создании шаблонов. Мы рекомендуем разработать разные шаблоны для разных платформ.

Пример вызова события

JavaScript

bridge.send('VKWebAppShowStoryBox', {
  // Задаёт фон истории
  "background_type": "image", // Тип фона — картинка
  "url": "https://example.com/v850136098/story-1.jpg", // Адрес картинки
  "locked": true, // Блокируем изменение размеров и положения фона 

  // Кнопка внизу истории для перехода в приложении
  "attachment": {
    "type": "url",  // Тип объекта — ссылка
    "text": "open", // Константа, которая определяет текст ссылки
                    // "open" — «Открыть»
                    // "game" — «Играть»
    "url": "https://vk.com/app12345" // Адрес приложения
  },

  // Дополнительные изобразительные элементы
  "stickers": [
    // Текст в верхней части экрана
    {"sticker_type": "native",
      "sticker": { 
        "action_type": "text", 
        "action": { // Текст и его атрибуты
          "text": "Купил классные стикеры", 
          "style": "classic",
          "background_style": "none",
          "selection_color": "#FF8080"
        },
        "transform": { // Определяет положение текста
          "gravity": "center_top",
          "translation_y": 0.25
        }}
    },
    // Текст в нижней части экрана
    {"sticker_type": "native",
      "sticker": { 
        "action_type": "text", 
          "action": { // Текст и его атрибуты
            "text": "в приложении «Стикер дня»!",
            "style": "classic",
            "background_style": "none",
            "selection_color": "#40FFF0"
          },
        "transform": { // Определяет положение текста
          "gravity": "center_bottom",
          "translation_y": -0.25
        }}
    }]
  })
  .then( (data) => {
    // История размещена...
  })
  .catch( (e) => {
    console.log("Ошибка!", e);
  })

Если вы подключили библиотеку VK Bridge в HTML-коде страницы, используйте в вызове имя объекта vkBridge вместо bridge.

Особенности использования

•

История показывается в течение 12 секунд.
•

Если создать несколько историй, они будут отображаться последовательно друг за другом.
•

История доступна в течение 24 часов с момента публикации и потом автоматически удаляется.
•

Событие VKWebAppShowStoryBox не требует каких-либо прав для работы. Его можно использовать в десктопной или мобильной версии сайта или в мобильном приложении ВКонтакте для Android и iOS. Однако, оно не поддерживается на iPad.
•

Разместить историю можно также с помощью события VKWebAppShare. Доступно только приложениям для Android.

Истории в профиле пользователя

Как реализовать

Пример вызова события

Особенности использования

Рекомендации по содержанию

Материалы по теме

Технические работы