Виджеты Pipeline24 — простая инструкция

Как вставить на сайт форму заказа, отзывы, обратную связь, кнопку «перезвоним» и онлайн-чат.

Что можно добавить

Нужные виджеты должны быть включены в CRM. Готовый код подключения выдаёт менеджер (или он уже есть в кабинете).

Шаг 1. Вставить общий скрипт

Один раз на страницу (или во все страницы сайта).

1. Откройте HTML-код страницы.
2. Найдите закрывающий тег `` — он в самом низу страницы.
3. Перед `` вставьте скрипт:

  Мой сайт

  

  
  

Замените:

• ВАШ_КАБИНЕТ — поддомен вашего аккаунта (как в адресе CRM)
• ВАШ_КЛЮЧ, sourceId, countryId — значения из кабинета / от менеджера

Если сайт на конструкторе (Tilda, WordPress и т.п.) — ищите блок «HTML-код» / «Вставка в footer» / «Код перед » и вставьте туда тот же `

---

## Как стилизовать

Цвета, скругления и отступы задаются **прямо в блоке виджета** — отдельный CSS не нужен.

### Самые нужные настройки

| Что хотите | Добавьте в блок | Пример |
| ---------- | --------------- | ------ |
| Цвет кнопок | `data-accent` | `#2f6fed` |
| Скругление углов | `data-radius` | `12` |
| Фон | `data-bg` | `#ffffff` |
| Цвет текста | `data-text` | `#111111` |
| Ширина формы | `data-max-width` | `480` |
| Маска телефона | `data-phone-mask` | `+375(00)000-00-00` или `+7 (000) 000-00-00` |
| Позиция кнопки | `data-position` | `bottom-right`, `bottom-left`, `top-right`, `top-left` |
| Отступ от края | `data-inset` | `30` (чем больше — тем дальше от края) |
| Поднять кнопку выше | `data-inset-bottom` | `96` |
| Слой FAB | `data-z-index` | `9999` (открытый диалог / форма всегда сверху) |
| Ширина контента (ультраwide) | `data-fab-rail` | `1280` |

Для телефона можно добавить суффикс `-mobile` — настройка только для мобильных:

- `data-accent-mobile`
- `data-inset-mobile`
- `data-inset-bottom-mobile`
- `data-position-mobile`

---

### Примеры оформления

#### Цвета под сайт

```html

Тёмный чат

Кнопка не перекрывает нижнее меню на телефоне

Если на телефоне снизу своё меню — поднимите кнопку выше:

Число 96 можно менять: обычно подходит от 72 до 120.

Поменять чат и звонок местами

Обе кнопки справа, одна над другой

Кнопки сверху

Тексты у «Перезвоним»

Форма на всю ширину на телефоне

Готовый набор: чат + звонок

Краткая памятка

1. Скрипт — один раз, перед ``.
2. Блоки виджетов — там, где нужны на странице.
3. Внешний вид — через data-accent, data-position, data-inset и похожие атрибуты.
4. Если виджет не появился — проверьте, что он включён в CRM, и что в скрипте правильные ключ и кабинет.

Внизу у виджетов может быть подпись: «Сервис предоставлен pipeline24.net».