Виджеты
Виджет позволяет клиентам оставлять заявки через ваш сайт. Заказы автоматически попадают в систему.
Перейдите в Настройки > Виджеты.
Список виджетов
Таблица показывает все созданные виджеты:
| Колонка | Что означает |
|---|---|
| Название | Имя виджета для вашего удобства |
| Сайты | Адреса, на которых виджет работает |
| Создан | Дата создания |
| Ключ | Публичный ключ для встраивания |
Используйте поиск и фильтры, чтобы найти нужный виджет.
Создание виджета
- Нажмите Новый виджет.
- Заполните форму настроек.
- Нажмите Создать.
Параметры виджета
| Раздел | Поле | Для чего |
|---|---|---|
| - | Название | Имя виджета (только для вас) |
| - | Разрешённые сайты | Адреса, где виджет будет работать. Укажите полный адрес с https://, например https://example.com. Можно использовать маску: https://*.example.com |
| Оформление | Основной цвет | Цвет кнопок и акцентов |
| Оформление | Дополнительный цвет | Цвет вторичных элементов |
| Оформление | Тема | Светлая, тёмная или как в системе пользователя |
| Оформление | Язык | Русский или английский |
| Поведение | Тип | Плавающий (кнопка в углу), встроенный (форма на странице) или только API |
| Поведение | Расположение | Угол экрана для плавающего виджета |
| Поведение | Статус заказа | В каком статусе создавать заказы: черновик или на раздаче |
| Тексты | Заголовок | Текст в шапке формы |
| Тексты | Подзаголовок | Описание под заголовком |
| Тексты | Текст кнопки | Надпись на плавающей кнопке |
| Тексты | Иконка | Эмодзи на кнопке |
| Обязательные поля | - | Какие поля клиент должен заполнить: телефон, описание, услуга, адрес |
Предпросмотр
После создания виджета нажмите кнопку с иконкой кода в строке виджета. Окно открывается на вкладке Предпросмотр: это живой виджет с вашими настройками, ровно такой, каким его увидят на сайте.
Предпросмотр работает в демо-режиме, поэтому заявки из него не попадают в CRM. Меняйте цвет, тему и расположение в настройках виджета и открывайте предпросмотр снова, чтобы посмотреть результат.
Если вместо виджета вы видите сообщение о ключе, сохраните виджет: ключ выдаётся при сохранении.
Код для сайта
В том же окне переключитесь на вкладку UMD или HTML-тег.
- Скопируйте код. На вкладке UMD это скрипт вместе с тегом виджета, на вкладке HTML-тег - только сам тег.
- Вставьте код на ваш сайт перед закрывающим тегом
</body>. - Скрипт подключается один раз. Тегов виджета может быть несколько.
На вкладке Руководство собраны те же шаги вместе со списком разрешённых сайтов.
[!TIP] Если виджет не появляется, проверьте: добавлен ли адрес сайта в Разрешённые сайты и нет ли ошибок в консоли браузера.
Обновление ключа
Если ключ виджета скомпрометирован, обновите его:
- Нажмите кнопку с иконкой обновления в строке виджета.
- Подтвердите действие.
[!WARNING] После обновления ключа старый код перестанет работать. Замените код на сайте.
Удаление виджета
- Нажмите кнопку удаления в строке виджета.
- Подтвердите действие.
Виджет перестанет работать на сайте сразу после удаления.