VKWebAppShowStoryBox

VKWebAppShowStoryBox открывает редактор историй.

Пример

JavaScript

bridge.send("VKWebAppShowStoryBox", { 
  "background_type" : "image", 
  "url" : "https://sun9-65.userapi.com/c850136/v850136098/1b77eb/0YK6suXkY24.jpg"
});

Платформы

Android, iOS, Mobile Web, Web

Параметры

•
background_type (string, обязательный)

Тип истории. Возможные значения: image (платформы: iOS, Android, Web, Mobile Web); video (платформы: iOS, Android); none (для случая передачи стикера непосредственно на камеру, платформы: iOS, Android).

•
url (string)

Ссылка на изображение или видео (нужно указать прямую ссылку на MP4).

•
blob (string)

Base64-строка с BLOB (поддерживается только для image). Перед строкой необходимо добавить следующий префикс: data:image/png;base64,<blob-base64> или data:image/jpeg;base64,<blob-base64> в зависимости от типа изображения.

•
locked (bool)

Можно ли перемещать фотографию.

•
attachment (attachment)

Описание объекта, присоединённого к истории.

•
stickers (sticker_container [])

Массив объектов sticker_container.

Результат

После начала загрузки истории возвращается событие VKWebAppShowStoryBoxResult.

JSON

{
  "type": "VKWebAppShowStoryBoxResult",
  "data": {
    "result": true
  }
}

После успешной загрузки истории возвращается событие VKWebAppShowStoryBoxLoadFinish.

JSON

{
  "type": "VKWebAppShowStoryBoxLoadFinish",
  "data": {
    "story_owner_id": 212424,
    "story_id": 123322,
  }
}

VKWebAppShowStoryBoxLoadFinish будет работать только при наличии request_id.

В случае неудачи возвращается событие VKWebAppShowStoryBoxFailed.

JSON

{ 
  "type": "VKWebAppShowStoryBoxFailed", 
  "data": {
     "error_type": "..."
     "error_data": {
        ...
     }
  }
}

Объект `sticker_container`

•
sticker_type (string, обязательный)

Тип стикера. Возможные значения: native, renderable.

•
sticker (renderable_sticker или native_sticker, обязательный)

Объект cтикера. См. renderable_sticker.

Объект `service_info`

•
mask_id (string)

Полный ID маски в формате ${owner_id}_${mask_id}. Например: 148038958_18424.

•
effect_id (string)

Полный ID эффекта в формате ${owner_id}_${effect_id}.

•
user_id_birthday (int)

ID пользователя, у которого день рождение.

•
open_text_editor (boolean)

Открытие текстового редактора при переходе в камеру (с готовой историей, background != none), по умолчанию false.

•
situational_suggest_id (int)

ID события от пользователя.

Объект `native_sticker`

•
action_type (string, обязательный)

Тип стикера. Возможные значения: text, hashtag, mention, time, place, question, emoji, sticker, market_item.

•
action (action_*, обязательный)

Данные для стикера.

•
transform (transform)

Описание объекта трансформации объекта.

•
can_delete (boolean)

Может ли стикер быть удален с экрана, по умолчанию true.

Объект `attachment`

•
text (string, обязательный)

Ключ для текста кнопки (см. link_text в stories.getVideoUploadServer)

•
type (string, обязательный)

Тип объекта. Возможные значения: url, audio, video, photo.

•
url (string)

Ссылка на объект.

•
owner_id (int)

Идентификатор владельца объекта.

•
id (int)

Идентификатор объекта.

•
access_key (string)

Ключ доступа для вложения.

Объект `renderable_sticker`

•
content_type (string, обязательный)

Тип истории. Возможное значение: image, gif (в формате webp), video (не поддержан на клиентах).

•
url (string)

Ссылка на контент. Обязательна, если не указано поле blob.

•
blob (string)

Base64-строка с BLOB. Обязательна, если не указано поле url.

•
transform (transform)

Описание возможностей трансформации объекта.

•
clickable_zones (clickable_zone [])

Массив областей контента, нажатие на которые может вызвать какое-либо действие. См. объекты action.

•
can_delete (bool)

Может ли стикер быть удалён с экрана, по умолчанию true.

Объект `clickable_zone`

•
action_type (string, обязательный)

Описывает тип действия на нажатие. Возможные значения: app, hashtag, mention, link, place, question, market_item.

•
action (action, обязательный)

Необходимые данные для действия.

•
clickable_area (clickable_area_coordinate [])

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

Объект `clickable_area_coordinate`

•
x (int, обязательный)

Координата X (от 0 до ширины переданного контента).

•
y (int, обязательный)

Координата Y (от 0 до высоты переданного контента).

Объект `transform`

•
rotation (int)

Градусы. От 0 до 359. Вращение против часовой стрелки.

•
relation_width (float)

Желаемая ширина стикера относительно экрана — (0, 1), высота будет рассчитана с учётом сохранения соотношения сторон контента.

•
translation_x (float)

От -1 до 1. От ширины экрана.

•
translation_y (float)

От -1 до 1. От высоты экрана.

•
gravity (string)

Расположение. По умолчанию: center. Возможные значения: left_top, left_center, left_bottom, center_top, center, center_bottom, right_top, right_center, right_bottom.

Для расчёта итоговой позиции: x = начальная_позиция_x + artboard_width * translation_x y = начальная_позиция_y + artboard_height * translation_y

Объекты `action`

Объект `action_link`

В ближайшем будущем объект action_link перестанет поддерживаться. Вместо него рекомендуем использовать action_app.

•
link (string, обязательный)

Ссылка на объект.

•
tooltip_text_key (string)

Значение строки, которая будет отображаться на клиенте при нажатии на тултип. Возможные значения: tooltip_open_post — открыть запись, tooltip_open_photo — открыть фотографию, tooltip_open_page — открыть страницу, tooltip_open_default — перейти (по умолчанию).

Объект `action_app`

•
app_id (int, обязательный)

Идентификатор приложения.

•
app_context (string)

Если приложение открывается из истории, то в параметрах запуска, в vk_ref, приходит значение story{owner_id}_{story_id}_{access_key}_{sticker_id}_{context}. context — Base64-строка, максимум — 500 символов.

Объект `action_hashtag`

•
hashtag (string, обязательный)

Текст хештега.

•
style (string)

Стиль хештега. По умолчанию: blue_gradient. Возможные значения: transparent, blue_gradient.

Объект `action_mention`

•
mention (string, обязательный)

Текст в формате меншена: для профилей людей "[id123|name]", для групп/сообществ/событий - "[club123|name]".

•
style (string)

Стиль хештега. По умолчанию: red_gradient. Возможные значения: transparent, red_gradient.

Объект `action_place`

•
place_id (integer, обязательный)

ID места.

•
title (string, обязательный)

Название места.

•
category_id (integer)

ID категории места.

•
style (string)

Стиль. По умолчанию: blue. Возможные значения: transparent, blue, green, white.

Объект `action_time`

•
style (string)

Стиль стикера времени. По умолчанию: date. Возможные значения: black, white, green, text, date.

•
timestamp_ms (long)

Unix timestamp в миллисекундах.

•
date (string)

Дата (альтернатива timestamp_ms) в формате yyyy:MM

HH:mm

(такой формат выбран для унификации даты из exif полей).

•
title (string)

Верхний тайтл стикера, значим только для стиля date.

Объект `action_question`

•
place_id (integer, обязательный)

ID места.

•
title (string, обязательный)

Название места.

•
category_id (integer)

ID категории места.

•
style (string)

Стиль. По умолчанию: blue. Возможные значения: transparent, blue, green, white.

Объект `action_text`

•
text (string, обязательный)

Текст, может содержать меншены/хештеги в форматах указанных с соответствующих объектах.

•
style (string)

Стиль текста. Возможные значения: classic, cursive, marker, italics, typewriter, poster, retro.

•
background_style (string)

Стиль фона/обводки. По умолчанию: none. Применимость стиля фона зависит от исходного стиля текста. Возможные значения: none, alpha, solid, sticker, neon.

•
alignment (string)

Выравнивание. Возможные значения: center, left, right.

•
selection_color (string)

Цвет в формате: #ff0000. Если background_style задан none, то значение будет определять цвет текста, иначе будет означать цвет, применяемый к стилю.

Поддерживаемые стили фона относительно стиля текста

Имя `style`	Поддерживаемые `background_style`
classic	none, solid, alpha, sticker
cursive	none, solid
marker	none, neon
italics	none, solid
typewriter	none, solid
poster	none, solid
retro	none, solid

Объект `action_emoji`

•
emoji (string, обязательный)

Символ emoji.

Объект `action_sticker`

•
sticker_id (int, обязательный)

ID стикера.

•
pack_id (int, обязательный)

ID набора стикера.

Объект `action_market_item`

•
title (string, обязательный)

Текст для тайтла товара.

•
product_id (int)

ID продукта для товаров ВКонтакте.

•
owner_id (int)

ID владельца для товаров ВКонтакте.

•
link (string)

Ссылка на товар aliexpress.

Объект `poll`

•
poll_id (int, обязательный)

ID опроса.

•
owner_id (int)

ID владельца.

•
is_board (Boolean)

Из обсуждений ли опрос.

Пример объекта `story_box`

JSON

{
  "background_type": "image",
  "url": "https://sun9-65.userapi.com/c850136/v850136098/1b77eb/0YK6suXkY24.jpg",
  "stickers": [
    {
      "sticker_type": "renderable",
      "sticker": {
        "can_delete": 0,
        "content_type": "image",
        "url": "https://upload.wikimedia.org/wikipedia/commons/c/c7/Dialog.png",
        "clickable_zones": [
          {
            "action_type": "link",
            "action": {
              "link": "https://vk.com/wall-166562603_1192",
              "tooltip_text_key": "tooltip_open_post"
            },
            "clickable_area": [
              {
                "x": 17,
                "y": 110
              },
              {
                "x": 97,
                "y": 110
              },
              {
                "x": 97,
                "y": 132
              },
              {
                "x": 17,
                "y": 132
              }
            ]
          }
        ]
      }
    }
  ]
}

Песочница

VKWebAppShowStoryBox

VKWebAppShowStoryBox

Пример

Платформы

Параметры

Результат

Объект sticker_container

Объект service_info

Объект native_sticker

Объект attachment

Объект renderable_sticker

Объект clickable_zone

Объект clickable_area_coordinate

Объект transform

Объекты action

Объект action_link

Объект action_app

Объект action_hashtag

Объект action_mention

Объект action_place

Объект action_time

Объект action_question

Объект action_text

Поддерживаемые стили фона относительно стиля текста

Объект action_emoji

Объект action_sticker

Объект action_market_item

Объект poll

Пример объекта story_box

Песочница

Объект `sticker_container`

Объект `service_info`

Объект `native_sticker`

Объект `attachment`

Объект `renderable_sticker`

Объект `clickable_zone`

Объект `clickable_area_coordinate`

Объект `transform`

Объекты `action`

Объект `action_link`

Объект `action_app`

Объект `action_hashtag`

Объект `action_mention`

Объект `action_place`

Объект `action_time`

Объект `action_question`

Объект `action_text`

Объект `action_emoji`

Объект `action_sticker`

Объект `action_market_item`

Объект `poll`

Пример объекта `story_box`