← База знаний

Установка чата на сайт

Установка — это вставка одного сниппета. Разработчик не нужен.

Шаги

  1. Скопируйте сниппет из настроек проекта (с его публичным ключом).
  2. Вставьте его перед закрывающим тегом </body>.
  3. Обновите сайт — в углу появится кнопка чата.
<script>
  (function(w,d,s,u){w.LiveContext=w.LiveContext||function(){(w.LiveContext.q=w.LiveContext.q||[]).push(arguments)};
  var j=d.createElement(s);j.type='module';j.async=true;j.src=u;d.head.appendChild(j);
  })(window,document,'script','https://livecontext.ru/embed/embed.js');
  LiveContext('init','pk_live_ВАШ_КЛЮЧ',{apiUrl:'https://livecontext.ru'});
</script>

Для приложений со сборкой (React, Vue, Next)

Если у вас SPA или SSR-приложение, вместо сниппета можно поставить типизированный npm-пакет — тот же транспорт и API, но с автодополнением и типами:

npm install @livecontextapp/sdk
import { createLiveContext } from '@livecontextapp/sdk';

const lc = createLiveContext({ publicKey: 'pk_live_ВАШ_КЛЮЧ', apiUrl: 'https://livecontext.ru' });
lc.identify('user-42', { email: 'anna@shop.ru', name: 'Анна' });
lc.track('purchase', { amount: 4990 });
lc.page();

createLiveContext безопасен для SSR (Next/Nuxt): на сервере методы — no-op, инициализация ленивая в браузере. Для чат-виджета всё равно нужен сниппет — npm-пакет отправляет только события, атрибуты и идентификацию.

Платформы

Несколько сайтов

Каждому сайту — свой проект: свой сниппет, свои настройки виджета и отдельные контакты с диалогами. Создать проект можно в разделе «Проекты», а переключаться между ними — в левом верхнем углу кабинета. В Инбоксе есть режим «Все проекты», где видны обращения со всех сайтов сразу, с пометкой проекта у каждого диалога.

Проверка

Напишите тестовое сообщение в чат — оно придёт в Inbox. В настройках проекта статус сменится на «события поступают».