Чем удобнее людям пользоваться вашим сообществом ВКонтакте, тем выше вероятность конверсии, уровень вовлеченности и лояльность пользователей к бренду.
Сделать группу ВКонтакте удобнее и функциональнее помогут виджеты. В этой статье вы узнаете:
Для более быстрого просмотра расписания лекций я использую простого чат-бота ВК, которым, помимо меня, пользуется вся учебная группа. Зачем каждый раз заходить на сайт университета, когда можно проверить расписание в беседе группы, просто написав в сообщении нужный день?
Когда мы разобрались с тем, зачем нам нужен такой чат-бот, давайте приступим к его созданию.
Мы протестировали 11 приложений для групп ВКонтакте. Рассказываем, что это, зачем нужно и какое из них подойдёт вашему бизнесу.
Приложения ВКонтакте — способ расширить функционал сообщества. Их можно посмотреть в разделе «Приложения» в управлении группой. Сделать это может только администратор группы или её владелец.
Перейдя в каталог, вы увидите все приложения, которые предоставляет социальная сеть. Выбрав нужное, добавьте его в группу. Учтите, что в группу можно установить максимум три приложения. Как исключение, четвертым можно добавить только приложение «Форма сбора заявок».
Не путайте приложения с виджетами. Виджет — это графический элемент, который располагается на главной странице группы. Он может содержать как графические, так и текстовые элементы. Также в виджетах обычно присутствует кнопка действия, нажав на которую человек переходит в определённый раздел.
Важно: не у всех приложений есть виджеты. Но даже если они есть, на странице можно установить не более одного.
Мы сделали обзор самых популярных приложений, которые можно использовать в разных тематиках. Читайте и применяйте на практике!
Что такое виджеты и зачем они нужны в группах ВКонтакте
Простыми словами виджеты — это отдельные блоки в сообществах, которые могут служить для разных целей:
-
создание базы для рассылок,
-
показ каталога товаров,
Ниже — несколько примеров виджетов из нашего сообщества ВКонтакте.
Виджет с меню
Виджет с рассылками
Виджет с каталогом товаров
Благодаря виджетам оформление группы становится более приближенным к сайту, и для пользователей это удобно: проще разобраться, что и где найти. К тому же, с помощью виджетов можно персонализировать предложения для пользователей, добавив их имена в обращения — так сообщение привлечет больше внимания. Главное — чтобы в обращении сохранялся основной tone of voice бренда: общайтесь с подписчиками так же, как и в постах.
Отвечаем на популярный вопрос: виджеты для сообществ ВКонтакте — то же самое, что и приложения? И да, и нет. Виджеты устанавливаются с помощью внутренних приложений ВКонтакте. То есть приложения — это способ добавить дополнительные разделы в сообщество, а виджеты — это сами дополнительные блоки.
Максимально можно установить шесть виджетов в одном сообществе — таково ограничение по количеству установленных приложений в одной группе.
Инструкция по установке Google-календаря на страницу сообщества «ВКонтакте»
Самое главное условие, соблюдение которого обязательно, – Вы должны обладать правами администратора группы, в которую хотите установить «Календарь».
1. Зарегистрируйтесь в Gmail.
2. Перейдите во вкладку «Сервисы».
4. Во вкладке «Мои календари» выберите пункт «Создать календарь».
5. Отредактируйте по своему усмотрению название, описание календаря, местоположение. ОБЯЗАТЕЛЬНО поставьте галочку напротив пункта «Открыть общий доступ к этому календарю».
6. Нажмите кнопку «Создать календарь». Созданный Вами календарь отобразится в меню «Мои календари».
7. Выберите созданный Вами календарь (квадратик рядом с его названием станет зеленым). Перейдите в «Настройки календаря», кликнув на стрелке справа от названия.
8. В пункте «Адрес календаря» нажмите кнопку «HTML». Во всплывающем окне отобразится ссылка для Вашего календаря. Скопируйте её.
9. Зайдите на сайт социальной сети «ВКонтакте» по ссылке https://vk.com/dev. Выберите пункт «Создать приложение».
11. В открывшемся окне введите свой номер телефона. Нажмите кнопку «Получить код». После этого станет активной строка «Код подтверждения». В нее необходимо ввести пришедший по СМС код. После этого нажмите кнопку «Отправить код».
12. Если код введен верно, откроется окно редактирования приложения. Обязательно выберите группу, в которой будет отображаться созданный Вами календарь. Для продолжения нажмите кнопку «Сохранить изменения».
13. В открывшемся окне отобразится ID вашего приложения. В пункте «Настройки контейнера» выберите «Тип приложения» — IFrame. В строки «Адрес IFrame» и «HTTPS-адрес IFrame» вставьте скопированную ссылку (см. пункт 8). В стоку «Размер IFrame» введите необходимые размеры окна календаря. Нажмите «Сохранить изменения».
14. Созданный Вами календарь отобразится в выбранном сообществе. Внесение изменений в календарь осуществляется через «Календарь Google».
Инструкция по установке гугл-календаря на страницу сообщества «ВКонтакте»
Для начала вам нужен календарь, который вы будете встраивать. Для этого у вас должен быть гугл-аккаунт.
1) Заходите в гугл-календарь и создаёте календарь, который будете размещать в приложении.
2) Заполняете сведения календаря по своему усмотрению.
3) Ниже, в разделе «Адрес календаря» жмёте на кнопку «HTML» и сохраняете в блокнот ссылку, которая выскочит — она вам ещё пригодится.
4) На соседней вкладке обязательно открываете общий доступ к календарю. Тут же можете добавить в календарь редакторов, если над ним будете работать не только вы. Сохраняете.
5) Теперь, создавая мероприятия, которые вы хотите отобразить в вашем календаре, указывайте название календаря, чтобы они попали в нужный календарь.
6) Переходим ко Вконтакту. Зайдите на страницу создания приложения Вк и нажмите «Создать приложение».
9) Теперь выберите группу, в которой хотите разместить виджет приложения (возможно только для групп, где вы являетесь администратором), заполните дополнительную информацию, загрузите обложки и прочее, что доступно на этой странице.
10) На вкладке «Настройки» вставьте ранее сохранённую ссылку в обе графы «Адрес IFrame» и «HTTPS-адрес IFrame», можете поменять размер приложения на нужный, затем выберите в графе «Состояние» пункт «Приложение включено и видно всем» и нажмите «Сохранить изменения».
Как сделать меню ВКонтакте. Полное руководство
Расскажем простыми словами обо всем, что связывает бизнес и интернет. О рекламе, CRM, сайтах, фрилансерах и всем таком прочем. Будет полезно и интересно, 100%.
Дата последней проверки актуальности статьи: 30 июля 2020 г.
На вопрос «как создать меню для группы ВКонтакте» есть три основных варианта ответа: заказать у специалиста, создать с помощью онлайн-конструктора или повозиться, вникнуть в некоторые тонкости вопроса и сделать все самостоятельно.
В этой статье мы последовательно рассмотрим все три варианта. Кстати, если вы все еще сомневаетесь, в необходимости меню для вашей группы или паблика, то обязательно прочтите эту короткую статью.
Итак, вот три пути создания меню:
У каждого из них, разумеется, есть свои достоинства и недостатки. Ниже мы расскажем о первых двух чуть подробнее. А для тех, кто все-таки решит пойти по третьему пути и сделать все самостоятельно, мы написали подробный гайд (инструкцию).
Ну а если вы все-таки предпочитаете читать, то начнем.
Путь #1. Заказать создание меню у дизайнера-специалиста
Плюсы этого способа — относительная быстрота и минимальное участие с вашей стороны. Минусы — самая высокая цена и шанс получить красивое, но неправильное меню (об основных ошибках при создании меню мы подготовили отдельную статью). Кроме того, нужно еще найти исполнителя. Тут мы можем рекомендовать искать его на сервисе kwork.ru, в разделе «Дизайн групп в соцсетях».
Путь #2. Использование онлайн-конструктора
Тут мы, конечно, порекомендуем свой конструктор, на сайте которого вы сейчас находитесь. Попробовать его можно бесплатно. Оплата производится только если результат вас устроит и вы решите загрузить получившиеся меню в вашу группу. Плюсы этого пути — он самый быстрый. Кроме того, при необходимости, вы всегда можете также быстро отредактировать и перезагрузить ваше меню за половину стоимости создания. Это удобнее, чем каждый раз искать дизайнера, когда вам необходимо, например, добавить или удалить пункт из меню. Минусы способа — тут уже придется совсем чуть-чуть, но потрудиться самостоятельно.
Путь #3. Сделать все самостоятельно
Плюсы этого пути очевидны: он бесплатен, а вы преобретаете новые умения. Минусы такие: вам необходимы некоторые умения и довольно много времени (в первый раз). Вот, что вам необходимо:
- Уметь уверенно пользоваться графическим редактором. Например, PhotoShop. При изготовлении меню вам нужно будет сначала сделать изображение правильных размеров (до пикселя, никаких «примерно»!), а затем правильно его нарезать (разбить на фрагменты)
- Уметь вникать в инструкции и читать их внимательно
- Не сдаваться и не отчаиваться, если что-то не получается с первого раза
Если вы считаете, что вам все это по плечу, то давайте приступим.
Шаг #0. Общие сведения о том, как устроены меню групп ВК
Меню для группы делают из wiki-страниц, создание которых поддерживает ВК. Вики-страницы — это специальные страницы, которые можно создавать только в пабликах. От обычных постов они отличаются тем, что в них можно применять так называемую wiki-разметку. Эта разметка — специальный код, который преобразовывается в объекты дополнительного форматирования. Чтобы было понятнее, поясним. Например, в обычных постах вы можете использовать только простой текст, а вики-разметка позволяет выделять части текста жирным или курсивом. То есть, она вводит дополнительные возможности оформления. В частности — возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен по ссылке. Именно эти дополнительные возможности форматирования и используются для того, чтобы делать меню пабликов ВК. Как именно это делать мы расскажем ниже.
Шаг #1. Подготовительный этап
Если у вас есть уже действующая группа, мы рекомендуем создать новую. Для тестирования и опытов. Иначе в процессе обучения вы рискуете завалить своих подписчиков странными и ненужными им обновлениями.
Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы — это ее уникальный номер ВКонтакте. Зайдите в свою группу и нажмите на «Записи сообщества» (если записей в группе нет, то вместо «Записей сообщества» будет «Нет записей»). В Вы перейдете на новую страницу с адресом такого вида:
Вместо XXX у вас будет набор цифр (и только цифр!). Это и есть ID вашего сообщества. Например в нашей тестовой группе это 154457305.
Теперь давайте создадим в группе новую вики-страницу. Для этого составим ссылку такого вида:
Подставьте в эту ссылку ID своей группы, а название страницы укажите как «Меню». У нас получилась такая ссылка (обратите внимание на минус перед ID группы! Не удалите его случайно!):
Редактор вики-страниц ВК имеет два режима: графический и режим разметки. Переключаются режимы кнопкой в правой верхней части редактора (). Когда кнопка подсвечена синим, это значит, что включен режим разметки. Режим визуального редактирования удобнее, т.к. позволяет обходится без знания синтаксиса вики-разметки, но его функционал крайне ограничен: в нем можно сделать только самые простые вещи. В основном вам придется иметь дело с режимом разметки.
Обратите внимание на две вещи. Во-первых, слева от кнопки переключения режимов редактирования есть кнопка вызова справочной информации по wiki-разметке (). Очень полезная вещь, особенно для начинающих. Второй момент, на который нужно обратить внимание — это адрес вики-страницы. В адресной строке вашего браузера вы увидите что-то такое:
Часть адреса до знака «?» — это адрес вашей вики-страницы. Запишите его где-нибудь: в ВК нет возможности посмотреть список ваших вики-страниц и ссылок на них. Чтобы перейти на нужную, вам необходимо знать ее адрес или снова воспользоваться ссылкой создания вики-страницы. При использовании последнего способа имейте в виду, что страницы, если они уже существуют, не пересоздаются.
Шаг #2. Делаем простое меню для группы ВКонтакте
Итак, у нас есть созданная вики-страница «Меню». Перейдите в режим разметки редактора и добавьте следующий код:
Нажмите на кнопку «Предпросмотр», которая находится снизу редактора. Вы должны увидеть список из трех ссылок. Первые две — внешние и ведут на главные страницы «Яндекса» и Google соответственно. Третья ссылка — внутренняя. Она ведет на паблик ВК с ID «1» (это официальная группа ВК для разработчиков). Если у вас в предпросмотре отображается вас код, а не ссылки (на которые можно нажимать) — значит вы ввели код в режиме визуального редактирования, а не в режиме разметки. Будьте внимательны!
Обратите внимание, что внешние ссылки в вики-коде ВК оформляются одинарными скобками, а внутренние — двойными. При этом внутренние ссылки ВК указываются не как привычный адрес веб-сайта, а как указатель на тот или иной объект ВК. Например, указатель на группу имеет такую форму записи:
Во ВКонтакте существуют указатели не только на группы, но и на отдельные фотографии, посты, вики-страницы, страницы пользователей, аудиозаписи и т.д. У каждого указателя своя форма записи. Позже мы будем использовать некоторые из них и рассмотрим их подробнее.
Обязательно сохраните страницу. В принципе, мы только что создали простейшую навигационную страницу. Которая является ни чем иным, как простейшим меню для группы ВКонтакте. Конечно, это еще не графическое меню, но даже оно может справляться с основной задачей меню — быстро направлять пользователей в нужное им место паблика. Как сделать графическое меню мы рассмотрим чуть позже.
А сейчас давайте разберемся как и где можно использовать вики-страницы.
Шаг #3. Где можно размещать вики-страницы ВКонтакте
Основных мест два: вы можете создать пост со ссылкой на вики-страницу или разместить ее в разделе «Материалы» вашего сообщества.
Начнем с первого варианта. Начните добавлять новую запись на стене своей группы. Сначала прикрепите к ней любую фотографию. Лучше взять достаточно большую фотографию у которой ширина больше высоты. Затем вставьте в текст создаваемой записи ссылку на созданную вами вики-страницу с простейшим меню. Именно ее мы просили вас записать чуть раньше. Напомним, что ссылка имеет такой вид (у вас будут другие цифры):
После вставки ссылки в текст под ранее добавленной фотографией должна появиться ссылка на вашу вики-страницу. Это выглядит так:
Теперь удалите текст ссылки из поля ввода. Сама ссылка под фотографией от этого не исчезнет. Но если вы оставите в текстовом поле адрес ссылки, то он будет отображаться как текст в посте. Опубликуйте пост, перезагрузите страницу браузера с главной страницей вашей группы и закрепите созданный пост. Еще раз перезагрузите страницу. В результате этих манипуляций у вас должно получиться что-то такое:
Нажмите на фотографию в закрепленном посте: должна появится ваша вики-страница с простейшим меню группы.
Итак, мы узнали, что вики-страницы можно прикреплять к постам. В частности — к закрепленному посту. Второе место, где можно использовать вики-разметку это раздел «Материалы».
Перейдите в настройки сообщества и найдите там управление разделами (сервисами) сообщества. Отметьте «Материалы» как «Ограниченные». Теперь в верхней части главной страницы вашего сообщества появится новый пункт. Он располагается справа от пункта «Информация». При первом включении материалов в группе этот пункт по умолчанию называется «Свежие новости». Вот как это выглядит:
Перейдите в этот новый пункт. Нажмите на плашку «Редактировать». В результате вы окажитесь в уже знакомом вам редакторе вики-страницы. Единственное отличие — тут есть поле ввода названия страницы. Поменяйте его со «Свежих новостей» на «Меню2». В режиме редактирования разметки введите следующий код:
Сделайте предпросмотр (должны появится уже знакомые нам ссылки) и сохраните страницу. По сути, эта страница — главная (корневая) вики-страница вашей группы. Правда, никакого особого практического смысла в этом ее отличии от остальных вики-страниц нет.
Перейдите на главную страницу своей группы, перезагрузите ее и посмотрите, что получилось. Рекомендуем посмотреть вашу группу из мобильного браузера и из приложения ВК. Вы заметите, что везде расположение элементов и логика работы немного разная. Нужно хорошо понимать, что к чему относится и где как показывается.
Мы узнали, что меню можно размещать в двух местах. Предпочтительнее сделать его и в виде закрепленной записи и в разделе «Материалы». Помните о двух нюансах:
- Закрепленную запись увидят 98% ваших посетителей, а в раздел материалы попадут только 25-40% самых любопытных, а также преданные старые пользователи вашей группы, которые знают, что там находится что-то полезное.
- Закрепленную запись с картинкой для вызова меню можно дополнить текстом. Таким образом вы не потеряете эту возможность закрепленной записи. Но переусердствовать тоже не стоит: чем больше текста, тем ниже будет ссылка на открытие вашего меню.
Вики-разметка — не самый мощный инструмент и не самый удобный. Его функционал сильно ограничен. Кроме того, он разрабатывался на заре развития «ВКонтакте» и исключительно для его браузерной версии на стационарных компьютерах и ноутбуках. Поэтому его работа в приложении и на мобильных устройствах лучше всего описывается выражением «как бог на душу положит». К сожалению, ничего лучше в ВК пока нет.
Кстати. Вы можете делать ссылки с одних вики-страниц на другие. Работает это примерно так: пользователь открывает (например, с помощью изображения-ссылки в посте) первую вики-страницу. А в ней есть ссылки на другие вики-страницы. При нажатии на эти ссылки будет открыта соответствующая вики-страница. Таким способом можно создавать довольно сложные и многоуровневые меню и, например, инструкции. Однако мы не советуем вам слишком увлекаться этим без лишней надобности.
Шаг #4. Как сделать меню в группе ВКонтакте. Графическое
Итак, основные принципы освоены. Перейдем к конструированию графического меню. Сразу оговоримся, что делать мы будем довольное простое меню: вертикальный ряд кнопок со ссылками. Но не спешите говорить «нет, я хотел суперсложное меню» и закрывать этот гайд. Сейчас объясним, почему.
Во-первых, движение от простого к сложному — обычно самый эффективный путь освоения новых знаний. Научившись делать относительно простое меню вы научитесь 90% приемов создания меню для групп ВК.
А во-вторых, как мы уже говорили, вики-разметка ВК внедрялась во времена, когда про мобильные приложения мало кто вообще слышал. Наше условно «простое» меню будет работать максимально правильно и эффективно везде: в браузерной версии ВК, в мобильных браузерах и, наконец, в приложении. Многие «сложные» меню не могут этим похвастаться. Более того, в большинстве случаев «простое» меню будет работать лучше «сложного», которое «разваливается» при его просмотре в официальном приложении ВКонтакте. Чаще всего лучше остановится именно на таком варианте меню. Да, существуют довольно витиеватые реализации меню. Вы можете поэкспериментировать и с ними. Но наш опыт говорит, что реальной пользы — конверсий, покупок и репутации они практически не добавят. А проблем — вполне могут.
Наше тестовое меню будет выглядеть так:
Всего две кнопки. Первая будет вести на главную страницу «Яндекса», а вторая — на группу ВК «Команда ВКонтакте».
Вертикальное графическое меню в ВК — это разрезанное на полосы изображение. Эти полосы помещают с помощью разметки друг под другом на вики-странице. Некоторым из этих «полос» назначают ссылки. При нажатии на такое изображение-ссылку происходит, собственно, переход по этой ссылке. Одна полоса — это одна ссылка. Некоторым полосам (например, промежуточным, которые располагаются между пунктами) наоборот, назначается отсутствие ссылки. Такие полосы становятся «некликабельны».
Изготовление вертикального графического меню для группы ВК сводится к следующей последовательности действий:
- Первым делом нужно нарисовать меню. Шириной оно должно быть строго 600px (пикселей). По высоте рекомендуем делать меню не более 900px. Результат лучше всего сохранять в формате PNG, в крайнем случае —JPG. Воспользуйтесь знакомыми и удобными вам инструментами для рисования (например Photoshop или GIMP). Результат тут на 95% зависит от ваших творческих и технических умений. Даже если вы совсем не умеете пользоваться графическими редакторами — не отчаивайтесь. Умения, которых будет достаточно приобретаются за максимум пару часов. В интернете есть огромное количество справочной и обучающей информации. Кроме того, умение хотя бы немного пользоваться графическим редактором очень и очень полезно для администраторов пабликов. Вы не потратите время зря.
- Далее рисунок с меню нарезается на горизонтальные полосы. Делать это можно любым удобным для вас способом: от привычного многим Photoshop до различных онлайн-сервисов. Если у вас нет идей, как это делается — просто задайте вопрос любимому поисковику. Мы не будем подробно описывать техническую часть процесса нарезания: способов десятки, некоторые подходят одним пользователям, но не подходят другим. При нарезке необходимо соблюдать одно простое правило: высота одной полосы не должна быть менее 60px. Иначе у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: появятся т.н. «белые полосы» между изображениями.
- Нарезанные «полосы» загружаются в альбом группы или альбом на странице администратора группы. Мы рекомендуем второй вариант. В любом случае, альбом с нарезанными частями меню должен быть в открытом доступе. Иначе, те пользователи для которых изображения альбома недоступны не увидят ваше меню!
- Составляется код вики-разметки, который вставляется в нужную вики-страницу.
- В группе размещается закрепленный пост с изображением-ссылкой на вики-страницу с меню. О том, как делается такой пост мы подробно писали выше. Кроме того, код (с небольшими изменениями) может быть добавлен в корневую вики-страницу (пункт справа от пункта «Информация», появляется при разрешении раздела «Материалы». Подробнее — см. выше).
У нас две «полосы»: верхняя (с кнопкой «Яндекс») и нижняя (с кнопкой «Команда ВК»). Обе будут изображениями-ссылками. В вики-разметке это делается кодом такого вида:
«ССЫЛКА» — это целевая ссылка. Например, https://yandex.ru/. Кроме обычной внешней ссылки это может быть указание на объект ВКонтакте: пост, страницу пользователя или группу. Например, чтобы после нажатия кнопки происходил переход на сообщество «Команда ВКонтакте» можно указать как его адрес (https://vk.com/team), так и указатель на него (club22822305). В принципе, разницы не будет. Внешние ссылки (те, которые ведут не на ресурсы ВК) мы рекомендуем сокращать с помощью https://vk.com/cc.
ID_фото — это указатель на фото, которое будет служить изображением-ссылкой. Чтобы узнать его, откройте нужное фото (например, одну из загруженных частей нашего меню). В адресной строке вашего браузера вы увидите что-то подобное:
Та часть адреса, что выделена (начинается с «photo», далее идут две группы цифр, разделенные подчеркиванием) — это и есть указатель на данное изображение. Важно: если фото хранится в альбоме сообщества, то после «photo» будет стоять знак «минус». Например так: photo-1237112_754439303
Наше меню состоит всего из двух полос-ссылок. Поэтому его код будет выглядеть так:
Замените ID фотографий на свои. Заметьте, что между кодами отдельных полос нет пробелов и переносов строк. Если они там будут, то между частями вашего меню появятся белые полосы. Будьте внимательны! Теперь вставьте получившийся код в разметку той вики-страницы, которую вы собираетесь вызывать по изображению-ссылке. Затем, создайте пост с изображением-ссылкой на стене группы и закрепите его (о том, как это делается мы подробно рассказывали выше). Для изображения используйте файл «open.png» из архива. Его, кстати, желательно загрузить в тот же альбом, что и части меню. Перезагрузите страницу. Теперь при клике на пост у вас должно появляться меню. Если этого не происходит и что-то идет не так — еще раз внимательно прочитайте нашу инструкцию и у вас все получится.
Теперь откройте каталог «2» из архива. В нем другой вариант нарезки: то же самое меню разрезано на пять частей. Две из них — это кнопки, которые должны быть ссылками как в предыдущем примере. Остальные части — это отступы. Вот как в вики-разметке оформляются изображения без ссылок:
В результате код нашего меню из 5 частей будет таким (не забудьте предварительно загрузить новые изображения и заменить в коде ID фотографий на свои):
На самом деле, особенного практического смысла нарезание меню с «бессылочными» частями не имеет. Только чисто эстетический. Не забывайте также, что высота одной «полосы» не должна быть менее 60px.
Теперь откройте для редактирования корневую вики-страницу (пункт справа от пункта «Информация»). Вставьте и туда код меню. Сохраните изменения, перезагрузите страницу и посмотрите на результат. Как видите, меню немного не вписывается по ширине. Исправить это очень просто: в wiki-коде этой страницы замените 600px на 510px. Примерно так:
Теперь ваше меню должно отображаться правильно и в этом пункте.
Вместо заключения
Надеемся, вам помог наш материал. Напомним, что наш сервис делает все описанное выше быстро. Причем, большую часть операций он делает автоматически.
Пишем скрипт чат-бота ВК
Для написания скрипта можно использовать множество языков программирования, но я покажу все на примере node.js.
Создаем файл index.js на компьютере и открываем его редактором кода или IDE (я использую VS Code).
Теперь нам нужно импортировать библиотеку, которую мы установим на сервер позже, и вставить токен (ключ доступа), который мы получили в прошлых шагах:
"сюда вставляем токен"
Чтобы чат-бот отправлял раcписание, ему нужно его знать. Давайте создадим объект с днями и занятиями:
6)Информатика и ИКТ "1)Информатика и ИКТ3)Практ. по матем.4)Алгебра и нач.ан. 2)Алгебра и нач.ан. "1)Общество и чел.
Заполните этот объект вашими данными по вышеуказанному примеру.
Теперь нам нужно, чтобы скрипт получал все сообщения, которые отправляются боту:
//Далее весь код будем писать тут (внутри скобок)
Проверяем, содержит ли сообщение текст и отправляется ли от имени пользователя:
Теперь напишем условие на то, что сообщение содержит название дня недели. Также не забываем отправить сообщение с помощью «context.send» вместе с расписанием. Кроме того, добавляем инлайн-кнопку для просмотра расписания на всю неделю, условие которой мы напишем в следующем шаге:
Теперь можно написать условие для просмотра расписания на всю неделю:
`Расписание на всю неделю:
Сохраняем файл и приступаем к его установке на сервер.
Настройка сообщества ВКонтакте для чат-бота
Для начала нам нужно создать сообщество. Для этого на сайте ВК заходим во вкладку «Сообщества», далее нажимаем кнопку «Создать сообщество».
Выбираем любую тематику и вводим название.
Теперь нам нужно настроить сообщество. Заходим во вкладку «Управление» на странице группы.
Далее переходим во вкладку «Сообщения», включаем возможность отправлять в группу сообщения и сохраняем настройку.
Теперь нам нужно подключить бота в наше сообщество. Переходим во вкладку «Настройки для бота», включаем «» и ставим галочку напротив «Разрешать добавлять сообщество в беседы». Сохраняем настройку.
После этого заходим во вкладку «Настройки», далее во вкладку «Работа с API».
Переходим во вкладку «Long Poll API», включаем Long Poll API, выбираем последнюю версию API и переходим в «Типы событий».
Тут мы выбираем все типы событий, которые связаны с сообщениями.
«» также выбираем последнюю версию API. В типах событий тоже выбираем все, что связано с сообщениями.
Теперь заходим во вкладку «Ключи доступа», нажимаем «Создать ключ», ставим все галочки и нажимаем «Создать». Копируем ключ и сохраняем его в текстовом файле, так как он понадобится нам в следующих шагах.
Настройка группы завершена!
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Виджет «Обложки»
Позволяет показывать в виджете от 1-го до 3-х элементов с фоновым изображением.
Пример виджета “Обложки”
«Голосование»
Приложение ВК “Голосование”
Это приложение носит больше развлекательный характер. Тем не менее, с его помощью вы можете провести опрос и понять, какие товары больше нравятся вашим покупателям. Причём добавлять можно не только картинки, но и видео, вариантов может быть сколько угодно.
Пример голосования Вконтакте
Пример приложения ВК “Голосование”
Приложение также подойдёт для проведения конкурсов. Например, попросите пользователей оценить участников конкурса в приложении. Пусть в опросе участвуют только подписчики группы. Это будет стимулировать людей подписываться на сообщество.
Пример конкурса ВКонтакте
Пример проведения конкурса в группе ВКонтакте
«Тесты»
Приложение ВК “Тесты”
Это приложение поможет вовлечь аудиторию в коммуникацию с брендом. Интересный и качественно сделанный тест позволит не только повысить активность внутри сообщества, но и привлечь новых людей.
Вы можете предлагать пользователям пройти один или несколько тестов.
Пример одного теста в приложении
Как выглядит один тест в приложении
Пример нескольких тестов в приложении
Как выглядят несколько тестов в приложении
При этом вы сами решаете, на какую тему сделать тест, сколько будет вопросов и какие результаты. После создания теста анонсируйте его в сообществе: кратко опишите суть теста и дайте ссылку на приложение.
«Рассылки сообщений»
Приложение ВК “Рассылки сообщений”
Это приложение позволяет отправлять подписчикам таргетированные рассылки. Благодаря этому они всегда будут в курсе важных событий. Например, если вы ведёте сообщество СМИ, сможете рассылать пользователям интересные новости, если сообщество магазина — информацию об акциях и скидках.
Каждый пользователь сам решает, какие новости хочет получать. Это позволяет наладить более доверительные отношения с клиентами. Они видят, что вы заботитесь о каждом и предоставляете актуальную информацию в зависимости от их интересов. Теперь пользователям не нужно поглощать тонны ненужной информации, а сообщения от вашей группы будут у них в диалогах.
Виджет «Плитки»
Отличается от стандартного виджета тем, что картинки квадратные, а не прямоугольные. В бесплатной версии можно добавить максимум 3 плитки. Если купить премиум-версию, то до 10.
Пример виджета “Плитки”
InSearch App
Приложение ВК inSearch App
Это приложение также подойдёт тем, кто регулярно проводит различные мероприятия. Оно помогает людям найти компанию. Например, на квест, концерт, конференцию.
Зачастую люди не решаются пойти на мероприятие в одиночку. В этом приложении они могут найти себе компанию. Благодаря этому шанс, что человек пойдёт на ваше мероприятие, значительно увеличивается. Теперь у него есть ответственность перед тем, с кем он договорился. В итоге вы получаете дополнительную конверсию, а подписчик — новые знакомства и интересное времяпрепровождени.
Само приложение выглядит так:
Пример приложения inSearch App
Пример приложения inSearch App ВКонтакте
Пользователь выбирает интересующее мероприятие. Далее открывается окно, где он может посмотреть список участников и добавить себя в этот список.
Список участников в приложении inSearch App
как выглядит список участников в приложении inSearch App
Перечисленные в статье приложения не исчерпывающие. Мы рассказали лишь о некоторых из них. К тому же, регулярно появляются новые, и, если не хотите их пропустить, обращайте внимание на пометку «новые» в каталоге приложений.
Больше подробной информации о работе с соцмедиа найдёте в нашей книге «ВКонтакте для бизнеса: подробное практическое руководство».
«Анкеты»
Приложение ВК “Анкеты”
Хороший способ ближе узнать аудиторию — установить приложение «Анкеты». В нём вы сможете прописать абсолютно любые вопросы, как с вариантами ответов, так и без. Когда подписчик заполнит анкету, администратору группы в личные сообщения придёт оповещение. Все данные по заполнению также можно посмотреть в самом приложении.
А чтобы пользователи охотнее заполняли анкету, предложите им взамен приятный бонус. Например, скидку на товар или эксклюзивную новость о новинках. В настройках пропишите, чтобы после заполнения анкеты пользователь получал личное сообщение от вашей группы. В нём вы сможете рассказать, как воспользоваться бонусом.
Пример анкеты в приложении
Пример приложения “Анкеты” ВКонтакте
«Виджет в сообществе»
Виджет в сообществе
Приложение ВК “Виджет в сообществе”
Это одно из самых популярных и простых приложений. Оно позволяет установить виджет в сообщество, который привлекает внимание подписчиков к определённым разделам в группе. Заходя на страницу, человек будет сразу видеть ваше сообщение. Если информация его заинтересует, он сможет нажать на кнопку виджета и перейти в нужный раздел.
В настройках виджета вы сами определяете текст сообщения, название кнопки и ссылку, по которой будут переходить подписчики. Единственное условие — ссылка может вести только на материалы ВКонтакте.
Вот несколько примеров:
Приветственный виджет “Почты Банка”
Пример приветственного виджета “Почты Банка”
«Тинькофф Банк» разместил в приветственном виджете сразу несколько вариантов того, что может заинтересовать подписчиков. А яркие изображения помогают ещё больше привлечь их внимание.
Приветственный виджет “Тинькофф Банка”
Пример приветственного виджета “Тинькофф Банка”
А такой виджет, как, например, у музыкального фестиваля «Дикая мята», передаёт атмосферу мероприятия и предлагает сразу купить билет.
Приветственный виджет “Дикой мяты”
Пример приветственного виджета “Дикой мяты”
Менять информацию в виджете можно хоть каждый день. Поэтому если у вас появляется крутая акция, ей самое место в этом виджете. Кроме того, очень удобно размещать информацию о других установленных на странице приложениях и зашивать в кнопку переход на них.
Полезные виджеты для групп ВКонтакте и как их настроить
Расскажем про шесть главных из них и объясним, как добавить и настроить виджеты в сообществе ВКонтакте:
Сразу ответим на вопрос, где искать бесплатные виджеты: на специальной странице приложений ВКонтакте для сообществ. За сами виджеты не нужно платить, они доступны всем. Но в некоторых из них есть платные функции.
Виджет «Магазин товаров»
Это такая онлайн-витрина вашего магазина. Виджет есть в базовых настройках группы — дополнительная установка приложения не нужна. Достаточно просто подключить «Магазин товаров» в настройках:
-
Выбрать поле «Разделы».
-
Перейти в блок «Товары».
-
Выбрать режим работы — базовый или расширенный:
-
в базовом режиме доступны витрина и карточки товаров;
-
в расширенном — витрина, карточки товаров, корзина и заказы.
-
После этого в сообществе появится виджет «Магазин товаров», куда вы сможете загрузить всю информацию о ваших продуктах.
Виджет «Сообщения сообщества»
Он поможет проще и быстрее отвечать на сообщения пользователей. Окошко для общения будет показываться в правом нижнем углу группы.
Чтобы создать такой виджет, нужно:
-
Зайти в настройки сообщества в раздел «Сообщения».
-
Поставить галочку в поле «Разрешить использование виджета».
-
Указать краткую информацию, которая поможет пользователю задать вопрос, сообщение для статуса «Не в сети» и список разрешенных доменов — адрес сайта, где должен отображаться виджет.
-
Затем нужно скопировать код для вставки на страницу, на которой вы хотите разместить виджет. Подробнее об этом — в справке ВКонтакте.
<script type=”text/javascript” src=”https://vk.com/js/api/openapi.js?169″></script>
<!— VK Widget —>
Виджет «Заявки»
Настройка этого виджета займет буквально пару минут:
-
Установите приложение «Заявки».
-
Зайдите в настройки сообщества в раздел «Приложения».
-
Откройте приложение «Заявки» и создайте нужную форму.
После этого лид-форма автоматически начнет показываться в вашем сообществе.
Виджет «Афиша»
Это тот же виджет «Расписание», но его проще подключить. «Расписание» могут настроить только те, кто одновременно являются администратором сообщества и владельцем приложения ВКонтакте.
«Афиша» позволяет анонсировать все предстоящие мероприятия. В такие анонсы можно добавить призывы к действию. У нас есть полезная статья на эту тему — «22 нестандартных призыва к действию».
Чтобы подключить виджет, нужно:
-
Зайти в настройки сообщества в раздел «Приложения».
-
Открыть приложение «Афиша».
-
Переключить чекбокс в поле «Виджет».
-
-
выбрать формат отображения — горизонтальный или вертикальный;
-
указать, сколько мероприятий показывать в группе одновременно;
-
добавить текст для кнопок.
-
Виджет «Меню группы»
Еще один встроенный блок, который не требует дополнительной установки приложения. Он поможет выделить важную информацию в сообществе: ссылки на товары, вебинары, статьи, альбомы, магазин. Но есть одно условие — все ссылки должны вести на внутренние страницы ВКонтакте.
Для каждой ссылки в меню можно добавить название (до 20 символов) и обложку (минимальный размер — 376×256).
Как настроить «Меню группы»:
-
Перейти в настройки сообщества в раздел «Меню».
-
Кликнуть на кнопку «Новая ссылка».
-
Загрузить обложку для ссылки.
-
Вставить саму ссылку.
Можно повторить это действие столько раз, сколько ссылок вам нужно добавить.
Виджет «Рассылки»
-
подборки полезных материалов,
-
обзоры на новые товары и прочее.
Настройка простая. Нужно:
-
Зайти в настройки группы в раздел «Приложения».
-
Настроить внешний вид виджета.
-
Создать рассылку. Или сразу несколько.
маркетолог, блогер, автор сообщества «Жизнь Дмитрова»
Каждому сообществу ВКонтакте я рекомендую подключить следующие виджеты:
«Рассылки». Однозначно в каждой группе должна быть своя рассылка, чтобы вести больше коммуникаций с постоянной аудиторией.
«Заявки». Этот виджет может дополнять рассылки — вы сможете лучше узнать аудиторию и изучить ее предпочтения. Также в виджете «Заявки» можно проводить полноценные исследования. Но учтите, что просто так люди редко заполняют лид-формы и развернутые анкеты — предложите им за это бонус, который их заинтересует. Тогда и заявок будет больше.
«Sugst — Предложить пост». Этот виджет расширяет возможности стандартной функции «Предложить новость» в сообществе — здесь можно самому создать форму, через которую пользователи смогут предлагать новости с нужной информацией и структурированным содержанием. С помощью этого виджета можно запустить акцию: предложить пользователям, купившим ваш продукт, прислать свое селфи с ним и рассказать, понравился он им или нет. А вы за это дадите им какой-то бонус.
Виджеты для розыгрыша призов, если вы постоянно проводите акции. Этот виджет позволит подводить итоги прямо внутри ВКонтакте — сторонние ресурсы не понадобятся.
«Магазин товаров», если продаете продукты через группы.
Виджеты для донатов. Особенно актуальны для сообществ благотворительных организаций и независимых проектов без финансирования. Также этот виджет можно использовать для того, чтобы принимать деньги за платные подписки.
Как я советую подступаться к подключению виджетов в группе:
постройте маршрут: чего вы ждете от виджетов, каких результатов;
выделите бюджет: на подключение и ведение виджетов, на отрисовку креативов для их оформления и прочие затраты;
делегируйте задачу по настройке и ведению виджетов профессионалу — кто-то должен постоянно заниматься этой задачей, актуализировать информацию и следить, чтобы виджеты работали без перебоев. Бывает, что ВКонтакте удаляет некоторые приложения, и можно случайно потерять всю базу подписчиков, просто потому что не уследили за новостями о том, что скоро виджет перестанет работать.
ВКонтакте насчитывает больше 70 виджетов. Я расскажу про свой топ-10 виджетов из каталога, на которые я бы рекомендовала обратить внимание всем, кто хочет увеличить продажи. Эти виджеты помогут на всех уровнях маркетинговой воронки: сформируют знание, заинтересованность пользователей, потребность в продукте, а также будут побуждать аудиторию к покупке.
Все виджеты бесплатные, но у некоторых из них есть дополнительные платные функции👇
Товары — настраиваем витрину.
Приветствие — встречаем пользователя.
Анкеты — изучаем аудиторию и получаем лиды.
Тесты — привлекаем внимание и получаем больше лидов.
Рассылки — прогреваем аудиторию.
Отзывы — подтверждаем свою надежность.
Афиша — вовлекаем подписчика в активность компании.
Калькулятор — готовим пользователя к покупке.
Заявки — принимаем заказы.
Конструктор виджетов — добавляем дополнительные функции вручную.
Как видите, ВКонтакте предлагает разнообразные виджеты для облегчения вашей работы в группе. Главное — выбрать тот, что подходит именно вашему сообществу, и научиться им пользоваться!
Установка виджетов — это несложный способ сделать группу удобнее для пользователей и выгоднее — для бизнеса.
Как создать виджет ВКонтакте самому
Если вы не нашли в каталоге виджетов ВКонтакте то, что вам нужно, вы можете сделать виджет самостоятельно — под свои запросы. В этом поможет специальный конструктор. Там собрано 25 шаблонов: 12 бесплатных и 13 платных.
Что нужно делать:
-
Установить приложение «Конструктор виджетов».
-
Зайти в него в настройках группы через раздел «Приложения».
-
Разрешить приложению доступ к виджетам в сообществе.
-
Создать собственный виджет с помощью шаблонов.
Полезные материалы по теме:
«Конструктор виджетов»
Приложение ВК “Конструктор виджетов”
Это приложение выполняет ту же функцию, что и предыдущее, но в нём можно создавать более разнообразные виджеты.
Рассмотрим несколько стандартных шаблонов, которые есть в приложении:
Расписание мероприятий
Приложение ВК “Расписание мероприятий”
Выглядит это так:
Пример расписания мероприятий в приложении
Расписание мероприятий в приложении ВКонтакте
У приложения есть свой виджет. Установите его в сообщество для трансляции важной информации о грядущем мероприятии на главной странице.
Приложение “Расписание мероприятий” в сообществе
Приложение “Расписание мероприятий” на главной странице в сообществе
«Вакансии»
Приложение ВК “Вакансии”
Если поиск подходящих кандидатов — актуальная проблема, а в личные сообщения и обсуждения в группе приходят постоянные вопросы о вакансиях, установите приложение «Вакансии». В нём пользователь сможет видеть все открытые вакансии вашей компании.
Кнопка на приложение “Вакансии”
Пример кнопки на приложение “Вакансии”
Пример приложения “Вакансии”
Соискатели могут зайти в приложение и сразу откликнуться на нужную вакансию. Оповещения об откликах будут приходить вам на email. Плюс, всех откликнувшихся можно посмотреть в приложении.
Также у приложения есть общий список вакансий со всех регионов России. Поэтому вашу вакансию потенциальный кандидат может увидеть не только в сообществе, но и в приложении. Для этого нужно лишь отсортировать список по нужному городу.
«Цитаты»
Приложение ВК “Цитаты”
Казалось бы, бесполезное приложение, ведь цитаты вряд ли помогут в продвижении бренда. Но вы можете вместо них разместить преимущества вашей компании. Тогда, открыв приложение, пользователь увидит целый список достоинств вашего бренда и с большей вероятностью совершит покупку или закажет услугу именно у вас.
Что касается цитат, не стоит исключать их полностью. Вы можете создать сборник интересных высказываний в приложении сообщества. Если пользователям понравится какая-то из них, они смогут сделать репост на стену. Плюс, у приложения есть виджет, который позволяет автоматически менять цитаты через определённый промежуток времени. Это идеально, например, для книжного магазина: можно заинтересовать читателя нужной книгой, даже не размещая пост.
Пример цитаты в приложении ВК
Пример приложения “Цитаты” ВКонтакте
На главной странице это будет выглядеть так:
Приложение “Цитаты” в сообществе
Как выглядит приложение “Цитаты” в сообществе
Установка и запуск чат-бота
Если у вас еще нет VDS, но вы хотите его приобрести для размещения подобных чат-ботов, я могу порекомендовать вам тариф «Danny» от Timeweb. Для покупки переходим по и нажимаем на кнопку «Заказать» под нужной конфигурацией.
Заполняем контактные данные, затем выбираем, на какой период мы хотим арендовать сервер (чем больше срок, тем меньше цена). Также я рекомендую вам использовать Ubuntu 20.04, так как эта система лучше всего подходит для такого рода задач.
После оплаты мы получаем данные для подключения к серверу. Подключиться можно через разные программы, но я рекомендую использовать . Покажу на ее примере, как подключиться к серверу и скопировать на него наш скрипт.
Скачиваем Termius, устанавливаем программу, далее нажимаем кнопку «+ NEW HOST».
Сохраняем данные и нажимаем на созданное подключение.
Мы попали в консоль. Теперь нам нужно установить node.js и npm на наш сервер, для этого поочередно пишем в консоль:
sudo apt update sudo apt install nodejs
Создадим папку, в которую поместим наш скрипт и зайдем в нее:
Теперь установим библиотеку для работы с VK API:
Переходим во вкладку SFTP в Termius и нажимаем «SELECT HOST».
Выбираем наше подключение и попадаем в папку root на сервере, в которой мы уже создали папку для нашего скрипта. Заходим в нее и путем перетаскивания (Drag’n’Drop) файла перекидываем скрипт с нашего ПК на сервер.
Возвращаемся в консоль и пишем:
Проверяем нашего бота в ВК.
Теперь нам нужно, чтобы скрипт работал даже после закрытия консоли. Для этого я рекомендую использовать PM2 (моя статья об этом софте
Возвращаемся в консоль сервера и пишем:
Далее запускаем скрипт:
Готово! Теперь наш скрипт будет работать в режиме 24/7. Мы можем смотреть расписание прямо из диалога ВК!
Отзывы
Приложение ВК “Отзывы”
В этом приложении подписчики смогут оставлять отзывы о ваших товарах или услугах. Виджет будет транслировать их на главной странице сообщества.
Пример приложения “Отзывы”
Отзывы пользователей в группе
В настройках есть возможность показывать отзывы из обсуждений. Для этого надо отметить, какие отзывы должны быть видны. В виджете отзыв появится только после вашей отметки.
Виджет «Компактный список»
В бесплатной версии также можно добавлять до 3-х ячеек. После покупки премиум-версии — до 6-ти.
Виджет “Компактный список”
Пример виджета “Компактный список”