Кнопка чата на сайт: одна строка кода, QR и Shadow DOM

Что это за кнопка

Один скрипт, который вы вставляете на страницу сайта; он рисует плавающую кнопку в углу экрана (слева внизу или справа внизу, на выбор). По нажатию в новой вкладке открывается https://koratland.com/m/<слаг вашего заведения>, и к адресу всегда добавляется адрес текущей страницы (параметр src), чтобы заведение видело, с какой страницы к нему написали.

Чтобы написать, клиент обязательно должен войти в Korat. Если у него нет аккаунта или он не вошёл в этом браузере, сначала откроется вход — это нормально и сделано намеренно. Если клиент увидел экран входа и не стал продолжать, ничего страшного: система не принуждает и не заманивает идти дальше.

Поэтому у кнопки есть и встроенный QR-код (его рисует сервер Korat, а не сам скрипт): клиент, у которого приложение Korat уже стоит на телефоне и вход выполнен, сканирует код и сразу попадает в переписку, ничего не набирая на компьютере. На Android с установленным приложением та же ссылка открывает приложение напрямую.

Это не инструмент слежки за посетителями

Скрипт не отправляет ни одного запроса при загрузке страницы: не собирает поведение посетителей, не ставит куки и ничего о посетителе не читает. Единственное, что происходит, — когда клиент сам нажал кнопку, панель подгружает картинку QR с сервера Korat (один запрос, без кук, без параметров, кроме src). А по ссылке «Открыть чат в Korat» браузер просто переходит на koratland.com. До нажатия кнопки не работает ничего.

С чего начать — скопировать одну строку

Вставьте этот код перед закрывающим </body> (или в любом месте страницы), заменив kofeynya-na-uglu-42 на слаг своего заведения (латинские буквы и цифры, а не название на русском). Как его найти — в следующем разделе:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="kofeynya-na-uglu-42" defer></script>

И всё — ставить больше нечего, зависимостей нет, на скорость сайта это не влияет: один небольшой файл с атрибутом defer, который не блокирует отрисовку страницы.

Где взять слаг заведения

Откройте страницу своего заведения в Korat по адресу https://koratland.com/b/<слаг> — слаг это то, что стоит в адресной строке после /b/
Тот же слаг используется и для кнопки чата, и для QR-кода

Куда вставлять в разных конструкторах

Wix — Editor → Add → Embed Code → Custom Embeds → HTML iframe → вставьте код выше
Webflow — Add panel → Embed → Embed an HTML Code → вставьте код → Publish
Shopify — Online Store → Themes → Edit code → откройте theme.liquid → вставьте код перед </body>
WordPress — если сайт на WordPress, лучше поставить отдельный плагин Korat (смотрите общую документацию): у него есть мастер настройки в админке и править код не нужно. Скрипт с этой страницы тоже подойдёт, если хотите вставить вручную
Самописный или заказной сайт — поместите тег <script> прямо в HTML-файл перед закрывающим </body>

Параметры настройки (data-*)

Атрибут	По умолчанию	Что делает
`data-korat`	—	Обязательный. Слаг страницы заведения `/b/<слаг>`, по которому строится ссылка на переписку
`data-name`	равно `data-korat`	Название заведения в панели QR (просто текст, на URL не влияет)
`data-position`	`br`	`br` — справа внизу, `bl` — слева внизу
`data-label`	стандартный текст по языку	Надпись на кнопке, можно задать свою
`data-lang`	`th`	`th` или `en`
`data-qr`	показывать	Укажите `data-qr="0"`, чтобы скрыть панель QR и оставить только ссылку на чат

Параметр src в ссылке на чат и в адресе картинки QR всегда берётся из location.href той страницы, где стоит кнопка: задать вместо него постоянное значение скрипт не позволяет, иначе все кнопки выглядели бы пришедшими с одной страницы, а это лишает смысла саму функцию.

Пример со всеми параметрами:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="kofeynya-na-uglu-42"
        data-name="Кофейня на углу"
        data-position="bl"
        data-label="Написать нам"
        data-lang="en"
        defer></script>

Кнопка — настоящая кнопка: до неё доходит Tab, у неё есть aria-label
Esc закрывает панель QR
Учитывается системная настройка «уменьшить движение» (prefers-reduced-motion)
Контраст достаточен и на светлом, и на тёмном фоне, а отступ от края экрана учитывает безопасную зону (safe-area) современных телефонов и не перекрывает нижнюю полосу жестов

Почему это безопасно для вашего сайта

Интерфейс рисуется в Shadow DOM ⇒ CSS вашего сайта и CSS кнопки гарантированно не конфликтуют
Один файл, внешних зависимостей нет, ни шрифты, ни библиотеки дополнительно не грузятся
Сколько бы раз скрипт ни подключили, кнопка не нарисуется дважды
Значения ваших data-* всегда экранируются перед выводом

Поставить кнопку чата на сайт заведения