Кастомный модуль Drupal 9/10/11. Плавающая кнопка в правом нижнем углу страницы, по клику открывающая модальное окно со ссылками на мессенджеры.
- Кнопки для Max, Telegram, WhatsApp и кликабельного номера телефона
- Каждый канал показывается только если заполнен в настройках
- Анимированное открытие/закрытие модала
- Закрытие по клику на фон или клавишей Escape
- Виджет телепортируется в
<body>через JS — не перекрывается другими элементами сайта - Настройки хранятся в Config API, экспортируются через
drush cex - SCSS-исходник в
scss/messenger-widget.scss
vendor/bin/drush en messenger_widget
vendor/bin/drush cr- Перейти на
/admin/structure/block - Найти блок Messenger Widget и разместить в регион Page bottom (или любой другой глобальный регион)
- Сохранить
Регион влияет только на место первоначального рендера — JS сразу перемещает кнопку и оверлей напрямую в <body>.
/admin/config/user-interface/messenger-widget (Управление → Конфигурация → Интерфейс пользователя → Messenger Widget)
| Поле | Описание |
|---|---|
| Title | Заголовок модального окна |
| Subtitle | Подзаголовок / пояснительный текст |
| Max URL | Ссылка на профиль в Max (ex-VK Мессенджер) |
| Telegram URL | Ссылка вида https://t.me/username |
| WhatsApp URL | Ссылка вида https://wa.me/79001234567 |
| Phone | Номер для tel: ссылки, например +79001234567 |
| Phone display | Отображаемый текст номера, например +7 (900) 123-45-67 |
Незаполненные поля скрывают соответствующую кнопку.
messenger_widget/
├── config/
│ ├── install/
│ │ └── messenger_widget.settings.yml # Дефолтные значения конфига
│ └── schema/
│ └── messenger_widget.schema.yml # Схема конфига (типы полей)
├── css/
│ └── messenger-widget.css # Скомпилированный CSS
├── scss/
│ └── messenger-widget.scss # Исходник стилей
├── js/
│ └── messenger-widget.js # Логика открытия/закрытия + телепорт в body
├── src/
│ ├── Form/
│ │ └── MessengerWidgetSettingsForm.php # Форма настроек (/admin/config/...)
│ └── Plugin/Block/
│ └── MessengerWidgetBlock.php # Drupal-блок
├── templates/
│ └── messenger-widget.html.twig # Разметка кнопки и модала, SVG-иконки
├── messenger_widget.info.yml
├── messenger_widget.libraries.yml
├── messenger_widget.links.menu.yml # Пункт меню в /admin/config/user-interface
├── messenger_widget.module # hook_theme()
├── messenger_widget.permissions.yml # Право: administer messenger widget
└── messenger_widget.routing.yml # Маршрут страницы настроек
SCSS компилируется отдельно от темы. Из директории с доступным sass:
sass scss/messenger-widget.scss css/messenger-widget.css --style=expandedПосле изменения стилей очистить кеш:
vendor/bin/drush cr| Право | Описание |
|---|---|
administer messenger widget |
Доступ к странице настроек модуля |