Подключение Perla к сайту клиники
От регистрации до живого чата на вашем сайте. Пошагово, со скриншотами и примерами для каждой популярной платформы.
Как это работает
Три части, которые стоит понимать, прежде чем что-то вставлять.
Профиль клиники — это источник правды
Часы работы, адрес, врачи, услуги с ценами, способы оплаты и правила передачи администратору. Perla отвечает пациентам только из этих данных и ничего не выдумывает. Чем полнее профиль — тем точнее ответы.
Ключ связывает виджет именно с вашей клиникой
Каждая клиника получает собственный ключ вида pk_live_… Он публичный: лежит в коде сайта, и это нормально. Ключ даёт ровно одно право — вести чат от имени вашей клиники, ничего больше.
Виджет изолирован от вашего сайта
Чат загружается в отдельном окне (iframe) с домена getperla.eu. Поэтому стили вашего сайта никогда не сломают чат, а стили чата никогда не заденут ваш сайт. Одна строка кода — и всё.
Шаг за шагом
Скриншоты из реального интерфейса. Оранжевым отмечено, куда нажимать.
Нажмите «Начать бесплатно»
Откройте getperla.eu/ru и нажмите кнопку в правом верхнем углу. Карта на старте не нужна.
Создайте аккаунт клиники
Укажите название клиники, рабочий email и пароль не короче 8 символов. Название потом появится в шапке чата, который видят пациенты, — пишите его так, как хотите показать людям.
Заполните профиль и скопируйте ключ
После входа вы попадёте в «Обзор». Пройдите четыре пункта чек-листа — профиль, часы работы, врачи, услуги с ценами. Дальше прокрутите страницу вниз: там будет блок «Ключ интеграции». Нажмите «Копировать».
Заполните профиль до запуска
Если прайс или часы работы пустые, Perla честно скажет пациенту, что цену уточнит администратор — вместо того чтобы выдумать цифру. Это правильное поведение, но лучший результат вы получите, когда профиль заполнен полностью.
Вставка кода на сайт
Выберите свою платформу — покажу, куда именно вставлять.
Ваша платформа
- 1Откройте файл страницы — обычно index.html или общий шаблон (footer, layout).
- 2Вставьте код непосредственно перед закрывающим тегом </body>.
- 3Если страниц несколько и общего шаблона нет — добавьте код на каждую страницу.
- 4Сохраните и загрузите файлы на хостинг.
- Если у вас есть общий файл подвала — вставьте туда один раз, и чат появится везде.
<!-- Perla -->
<script
src="https://getperla.eu/widget.js"
data-perla-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
defer
></script>Замените pk_live_… на ключ из своего дашборда. Код одинаковый для всех страниц сайта.
Параметры виджета
Настраивается прямо в теге скрипта.
| Атрибут | Обязательный | Что делает |
|---|---|---|
data-perla-key | Да | Ключ вашей клиники из дашборда. Без него виджет не запустится. |
data-perla-lang | Нет | Язык интерфейса чата: ru, en, uk и другие. Если не указать — берётся язык страницы или первый язык из профиля клиники. На сам ответ не влияет: Perla всегда отвечает на том языке, на котором написал пациент. |
defer | Нет | Советуем оставить. Виджет загрузится после основного содержимого и не замедлит показ страницы. |
Отслеживание конверсий в Google Analytics
Чат живёт в iframe на домене Perla, поэтому ваша аналитика не видит, что происходит внутри. Поэтому виджет сам сообщает о ключевых действиях на вашу страницу — в dataLayer и в gtag, если он есть. Ничего настраивать с нашей стороны не нужно, события отправляются сразу.
perla_chat_opened | Пациент открыл окно чата |
perla_message_sent | Пациент написал первое сообщение — одно событие на разговор, не на каждую строку |
perla_booking_request | Пациент оставил имя и телефон — это и есть конверсия |
Как настроить в GA4 через Google Tag Manager
- 1В GTM создайте триггер: Trigger → New → Custom Event, в поле Event name укажите perla_booking_request.
- 2Создайте тег: Tag → New → Google Analytics: GA4 Event, выберите свой конфигурационный тег, Event Name — perla_booking_request.
- 3Назначьте тегу созданный триггер и опубликуйте контейнер (Submit → Publish).
- 4В GA4 откройте Администратор → События и убедитесь, что событие появилось после первой заявки. Затем отметьте его как ключевое событие (Mark as key event).
Как завести это в Google Ads
- 1В GA4 отметьте perla_booking_request как ключевое событие — без этого Ads его не увидит.
- 2В Google Ads: Цели → Конверсии → Импорт → Google Analytics 4 → выберите perla_booking_request.
- 3Дождитесь первой реальной заявки: до неё событие не появится в списке для импорта.
Персональных данных события не содержат — ни имени, ни телефона, ни текста разговора. Передаётся только название события и идентификатор разговора, чтобы вы могли сопоставить конверсию с заявкой в кабинете.
Проверка, что всё работает
Три минуты после вставки кода.
- 1
Кнопка появилась
Откройте сайт клиники в новой вкладке. В правом нижнем углу должна появиться круглая кнопка с роботом. Если вы только что вставили код — обновите страницу с Ctrl+Shift+R (Cmd+Shift+R на Mac).
- 2
Чат отвечает вашими данными
Нажмите кнопку и спросите то, что есть в вашем профиле: «Сколько стоит гигиена?» или «Когда вы работаете в субботу?». Ответ должен совпадать с тем, что вы заполнили в дашборде.
- 3
Диалог появился в дашборде
Вернитесь в дашборд, раздел «Диалоги». Ваш тестовый разговор должен быть там. Попробуйте также записаться — назовите имя и телефон, и в том же разделе появится заявка на запись.
Что Perla умеет, а что нет
Честно, чтобы не было сюрпризов перед пациентами.
Умеет уже сейчас
- Отвечает на вопросы о ценах, часах работы, адресе, врачах и способах оплаты — из вашего профиля
- Общается на языке пациента: русском, казахском, узбекском, английском и других
- Собирает заявку на запись: имя, телефон и удобное время, и показывает её в дашборде
- Передаёт разговор администратору по вашим правилам — например, при острой боли или жалобе
- Работает круглосуточно, в том числе ночью и в выходные, когда ресепшн недоступен
Чего она не делает
- Без подключённой CRM не записывает пациента в календарь сама — заявку подтверждает администратор звонком
- Не ставит диагнозов и не советует лечение: это работа врача, а не ресепшена
- Не называет цен, которых нет в вашем прайсе — честно скажет, что уточнит администратор
- Не принимает оплату онлайн
Частые вопросы
Безопасно ли держать ключ в коде сайта?+
Да. pk_live_… — публичный ключ, он и должен быть виден в коде страницы, так же как ключи Google Maps или Stripe. Он позволяет только одно: вести чат от имени вашей клиники. Прочитать ваши диалоги, изменить профиль или попасть в дашборд с ним невозможно. Кроме того, стоит ограничение на количество сообщений в минуту, чтобы никто не мог злоупотреблять.
Замедлит ли виджет мой сайт?+
Нет. Файл весит несколько килобайт и загружается с атрибутом defer — то есть уже после того, как страница показалась пользователю. Сам чат загружается в отдельном окне и не блокирует ваш сайт.
Виджет не появился. Что делать?+
Проверьте три вещи. Первое: код должен стоять перед закрывающим тегом </body>, а не в HEAD. Второе: на Tilda и Webflow нужно отдельно опубликовать сайт после сохранения кода. Третье: обновите страницу с очисткой кеша (Ctrl+Shift+R). Если не помогло — откройте консоль браузера (F12) и поищите сообщение, которое начинается с [Perla].
Можно ли изменить цвет кнопки?+
Да. В дашборде откройте раздел «Виджет» и выберите цвет — из готовой палитры или свой. Там же можно поставить свою картинку и имя ассистента. Изменение применится на сайте сразу, код трогать не нужно.
Можно ли поставить виджет на несколько сайтов одной клиники?+
Да, один ключ можно использовать на любом количестве страниц и доменов. Все диалоги соберутся в один дашборд.
Где хранятся данные пациентов?+
Диалоги и заявки на запись хранятся на серверах в Европейском союзе. Perla не просит у пациента номер карты, паспортные данные или медицинскую историю — только имя и телефон для обратного звонка.
Что-то не сходится?
Напишите нам — разберёмся вместе и, если нужно, подключим виджет за вас.