Виджет-Студия — конструктор виджетов сообщества ВКонтакте

Форма

Код виджета (VKScript)

Правки в редакторе не теряются: они запоминаются по кнопке «Применить» и переносятся на новые версии кода, когда вы меняете форму. Если перенести не удалось — приложение честно скажет об этом.

Установка в сообщество

Проверьте, что в шапке стоит ваше сообщество.
Нажмите «Предпросмотр и установка в VK» — ВКонтакте покажет готовый виджет.
Подтвердите установку — блок появится на странице сообщества.

Если приложение ещё не добавлено в сообщество: нажмите «Добавить в сообщество» в шапке, затем откройте приложение из сообщества — vk.com/app<ID приложения>_-<ID сообщества>.

Установленные виджеты

Покажу, какие виджеты уже стоят в сообществе, и дам обновить их текущим кодом — без окна предпросмотра.

Токен сообщества

Нужен, чтобы менять содержимое виджета без захода в приложение: обновить сейчас, по расписанию или с сервера. Токен выдаётся администратору сообщества.

Журнал

Сервер Виджет-Студии

Сервер держит общую библиотеку виджетов, хранит токен сообщества и обновляет виджет по расписанию — например, показывает счёт матча или сумму сбора из вашей базы. Запуск: node server/server.mjs.

адрес сервера секрет сервера (если задан STUDIO_SECRET)

Проверяю сервер…

Библиотека в облаке

В облаке библиотека общая: её видят с любого компьютера и из любого браузера.

Обновление виджета

«Обновить сейчас» вызывает appWidgets.update с токеном сообщества — окно предпросмотра ВКонтакте не открывается.

Расписание

когда интервал, секунды время cron

источник данных (необязательно)

Если указан источник, сервер скачает с него JSON и подставит значения в код: пишите в коде {{score_a}} — получите число из JSON. Обновлять виджет ВКонтакте разрешает не чаще одного раза в 30 секунд.

Задания

Мои виджеты

Виджеты хранятся в этом браузере (localStorage) — у каждого сообщества своя полка. Файл .vks — готовый скрипт виджета, файл .json — вся библиотека. В облако можно выложить копию: вкладка «Облако».

Что это и зачем

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

Четыре шага

Выберите тип или рецепт. Рецепты — уже наполненные виджеты: меню, афиша, прайс, правила, отзывы, сбор средств, матч дня.
Заполните форму. Счётчики показывают лимиты VK: в списке — до шести строк, в плитках — от трёх до десяти, в таблице — до одиннадцати строк вместе с шапкой.
Включите живые данные, если нужны. Блоки берут данные ВКонтакте при каждом показе страницы — и это видно в превью.
Установите. «Предпросмотр и установка в VK» — ВКонтакте показывает окно, вы подтверждаете.

Живые данные

Блок	Что делает	Как устроено
`[name]`, `[greet]`	имя зрителя и «Доброе утро / день / вечер» по его времени	запрос к `API.users.get` по `Args.uid`
Строка «Подписаться»	кнопка в конце списка — только неподписанным	`API.groups.isMember`
Последние записи	строки собираются из свежих постов сообщества	`API.wall.get`, ссылки на записи
Счётчик участников	живое число подписчиков в шапке виджета	`API.groups.getById`
Свежее обсуждение	строка-ссылка на последнюю тему	`API.board.getTopics`
Последнее видео	строка-приглашение на свежее видео	`API.video.get`
Случайные тексты	разный текст при каждом показе	`Math.random` в виджетах нет — время визита зрителя

Если ВКонтакте не пропустит какой-то вызов, сбросьте галочку блока и соберите виджет заново: блоки независимы. Ошибка предпросмотра приходит текстом — смотрите окно установки и вкладку «Код и установка» → «Журнал».

Редактор кода

Код — обычный VKScript, его можно править прямо в приложении. Правки запоминаются кнопкой «Применить» и переносятся на новые версии кода, даже когда вы продолжаете менять поля формы (трёхстороннее слияние). «Разобрать в форму» работает в обратную сторону: понимает собранный приложением скрипт, чужие скрипты того же вида, восстанавливает подставки [name]/[greet] и включает опознанные блоки. Если в коде есть вычисляемые поля, которых форма не знает, приложение скажет, какие именно, и ничего не перезапишет.

Фотографии сообщества

В полях «Обложка» и «Иконка» есть кнопка выбора из сообщества: приложение покажет альбомы и фотографии и подставит идентификатор вида -123456_457239123. Нужно право photos: включите «Фотографии» в правах приложения на dev.vk.com. Есть и быстрый вариант — «Аватар сообщества»: подставляется club<id>.

Облако и автообновление

Сервер (node server/server.mjs) даёт три вещи: общая библиотека виджетов, хранение токена сообщества и расписание обновлений. Расписание понимает «каждые N секунд», «каждый день в 10:00» и cron-выражения (0 10 * * *). Если указать источник данных, сервер подставит значения из его JSON в код виджета: пишете в коде {{score_a}} — сервер отправит число. ВКонтакте разрешает обновлять виджет не чаще одного раза в 30 секунд, планировщик это соблюдает.

Что ВКонтакте не пропустит

Ссылки только на домены VK — vk.com, vk.ru, vkontakte.ru, vkvideo.ru, vk.me, vk.cc, vk.link. Внешний сайт в виджете невозможен: ведите на запись, товары или в сообщения.
Лимиты строк и символов — счётчики в форме показывают остаток.
Кнопка и иконка — у всех строк или ни у одной.
Обновление не чаще одного раза в 30 секунд.
Права: установить виджет может администратор сообщества.

Как опубликовать приложение у себя

Выложите проект на HTTPS-хостинг: GitHub Pages, VK Hosting, Netlify или свой сервер. Для облака и расписания понадобится сервер с Node (можно тот же).
На dev.vk.com создайте приложение типа мини-приложение.
В разделе «Web» укажите адрес страницы (iframe и мобильная версия). Размер 650×630 — стартовый, дальше приложение расширяет окно само.
В правах приложения включите «Фотографии», если нужен выбор фото. В разделе «Информация» разрешите установку в сообществах и выберите своё сообщество.
Открывайте из сообщества: vk.com/app<ID>_-<ID сообщества> — тогда VK сообщает сообщество и доступна установка виджета.

Полная инструкция — в файлах НАСТРОЙКА.md (что и где настраивать) и README.md рядом с проектом.

Где что настраивается

Что	Где
Сообщество	Поле id в шапке (внутри ВК подставляется само)
Тип и содержимое виджета	Левая колонка (тип, рецепт) и форма по центру
Живые данные	Раздел «Живые данные» внизу формы, галочки и настройки блоков
Проверка внешнего вида	Колонка справа: подписчик/гость, имя, время
Обложки и иконки	Кнопка «выбрать из сообщества» у поля; нужен доступ «Фотографии»
Код	Вкладка Код и установка: применить, разобрать в форму, форматировать
Библиотека	Вкладка Мои виджеты, выгрузка в файл и загрузка обратно
Токен, виджеты сообщества	Вкладка Код и установка → «Токен сообщества», «Установленные виджеты»
Сервер, расписание, источник данных	Вкладка Облако и расписание
Приложение в ВК (права, адреса)	Кабинет dev.vk.com