Шорткоды — справочник для техписателей

Справочник шорткодов

1. Callout — предупреждение / важная информация

Подключение к платформе MAX для партнёров доступно для юрлиц и ИП, которые являются резидентами РФ

callout с переменной из assets/css/callout-colors.css

callout с переменной из assets/css/callout-colors.css

callout с переменной из assets/css/callout-colors.css

Callout с произвольным hex-кодом цвета

Параметры:

Доступные именованные цвета (из assets/css/callout-colors.css):

Новые цвета можно добавить в файл assets/css/callout-colors.css в блок :root.

2. Карточки навигации

Иконки: bot, partners, platform

cell-grid — обёртка-контейнер:

Параметров нет. Принимает один или несколько cell в теле

cell — одна карточка-ссылка:

3. FAQ — раскрывающийся вопрос-ответ

Параметры:

4. HTTP-метод бейдж

GET/messages

POST/messages

DELETE/subscriptions

PATCH/me

Методы: GET, POST, PUT, DELETE, PATCH

Параметры:

5. API-параметры — «таблица без заголовка»

Структура:

• api-params — обёртка секции: рисует верхнюю черту и группирует строки. Внутри размещаются только api-param / api-param-children
• api-param — строка-параметр
• api-param-children — поддерево разворачиваемой строки (скрыто, пока строка не развёрнута кнопкой)

Параметры api-param:

6. Табы с кодом

curl -X POST "https://platform-api.max.ru/messages" \
 -H "Authorization: <token>" \
 -H "Content-Type: application/json" \
 -d '{"chat_id": 123, "text": "Hello"}'

import requests

requests.post(
"https://platform-api.max.ru/messages",
headers={"Authorization": token},
json={"chat_id": 123, "text": "Hello"}
)

code-tabs — контейнер с переключателем вкладок:

code-tab — одна вкладка с кодом:

7. Блок кода

import requests

requests.post(
"https://platform-api.max.ru/messages",
headers={"Authorization": token},
json={"chat_id": 123, "text": "Hello"}
)

Параметры:

8. Карточка с логотипами:

Jivo

Перейти

Jivo — это платформа для эффективной работы с клиентами, где все обращения из MAX и других каналов собираются в одном окне. Менеджеры отвечают быстрее, не теряют заявки и ведут переписку.

Webim

Перейти

Омниканальная чат-платформа для общения с клиентами. Она позволяет операторам отвечать на обращения из одного окна чата и сохранять единую историю переписки.

cards — контейнер для нескольких карточек:

card — одна карточка:

9. Одинокая карточка.

Smartbot

Перейти

Smartbot — конструктор чат‑ботов с ИИ для мессенджеров и сайтов

Параметры: те же, что у card в пункте 8.

10. Просмотр изображения

Параметры:

Markdown-синтаксис (зум + декорация):

Все markdown-изображения автоматически поддерживают зум по клику. Декорация задаётся в поле title (третий параметр) в формате ключ:значение, пары разделяются ;:

![Описание](/assets/image.png 'width:300')
![Описание](/assets/image.png 'width:50%;border:#DBE2E9;radius:16px')
![С тенью](/assets/image.png 'border:none;shadow:0 4px 12px rgba(0,0,0,.12)')
![Тематическое](/assets/about/miniapps_{theme}.png 'width:400;border:#DBE2E9;radius:31px')

Доступные ключи: width, border, radius, shadow (правила нормализации те же, что у параметров шорткода). Число без единиц → пиксели. Если title НЕ начинается с ключ: — он трактуется как обычная всплывающая подсказка.

Подпись под одиночной картинкой

Если после картинки (markdown или шорткода {{< image-zoom >}}) следующей строкой написать курсивную подпись _текст_, она автоматически оформится как подпись: по центру, 14px, цвет вторичного текста темы — как на портале dev.max.ru. Работает и внутри {{< details >}}:

![](/assets/bot_card_{theme}.png)

_Данные и профиль бота_

Данные и профиль бота

Подпись можно писать и в той же строке сразу после картинки — ![...](src)_Подпись_ — оформление будет тем же.

11. Слайдер изображений

Лента изображений (layout="strip")

Горизонтальная прокручиваемая лента — несколько изображений видны одновременно, прокрутка нативная (с «прилипанием» к слайдам). Кнопки навигации и точки скрыты.

Подпись под слайдером

Если сразу после {{< /slider >}} следующей строкой написать курсивную подпись _текст_, она автоматически оформится как подпись под слайдером: по центру, 14px, цвет вторичного текста темы — как на портале dev.max.ru:

{{< slider layout="strip" >}}
{{< slide src="..." alt="..." >}}
{{< /slider >}}

_Подпись под слайдером_

slider — контейнер слайдера:

slide — один слайд с изображением:

12. Расширенные возможности таблиц

Markdown-таблицы поддерживают дополнительный синтаксис для переноса строк, списков и объединения ячеек.

Переносы строк

В ячейках таблиц можно использовать <br> для переноса строк:

| Поле | Описание |
| --- | --- |
| `param` | Первая строка<br><br>Вторая строка |

Списки в ячейках

Если ячейка начинается с - или * , она преобразуется в маркированный список. Элементы разделяются <br> + маркер:

| Поле | Значения |
| --- | --- |
| `type` | - `DIALOG`<br>- `CHAT`<br>- `CHANNEL` |

Выравнивание колонок

Стандартный Markdown-синтаксис выравнивания в строке разделителя задаёт text-align для заголовка и ячеек колонки: :--- — влево, :---: — по центру, ---: — вправо:

| Поле | Количество |
| :--- | :---: |
| Значение 1 | 10 |

Colspan (горизонтальное объединение)

Пустая ячейка || объединяется с предыдущей непустой ячейкой, увеличивая её colspan:

| A | B | C | D |
| --- | --- | --- | --- |
| Объединённая на 3 колонки ||| Последняя |

Rowspan (вертикальное объединение)

Ячейка, начинающаяся с ^^, объединяется с ячейкой выше:

| Группа | Поле |
| --- | --- |
| Пользователь | `user.id` |
| ^^ | `user.name` |
| ^^ | `user.photo` |

13. Иконка

Вставляет SVG-иконку из набора VK Icons инлайном в текст. Цвет наследуется от текста (currentColor) — в ссылке иконка будет акцентной, в обычном тексте — цветом текста.

Успешно отправлено Открыть платформу

Цвет можно задать параметром color — любое CSS-значение цвета: #2688EB, red, var(--accent).

Синяя Красная Акцентная

Без параметра цвет наследуется от текста: в ссылке иконка акцентная, в обычном тексте — цвет текста.

Параметры:

Доступные иконки

Все уже скачанные иконки — в каталоге ниже. Если нужной нет, найдите её на vkcom.github.io/icons и просто вставьте шорткод с её именем — при следующей сборке (npm run dev или npm run build) SVG скачается автоматически.

Как вставить иконку:

1. Найдите нужную иконку в каталоге выше (или на vkcom.github.io/icons) и скопируйте её имя.
2. Вставьте шорткод {{< icon name="имя" size="16" >}} в нужную страницу.

Если сборка упала с ошибкой «icon not found» — проверьте имя по ссылке из ошибки и запустите npm run icons:sync. Не забудьте закоммитить скачанный SVG-файл из assets/icons/vk/.

Стандартный Markdown (без шорткодов)

Блок кода

def hello():
    print("Hello!")

Таблица