Agentfy · демо встраивания

Агент на вашем сайте

Три способа поставить чат с агентом на чужую страницу. На этой странице каждый из них не описан, а работает: пузырь в углу, встроенное окно и чат, нарисованный целиком своей вёрсткой, — это три разных подключения к одному и тому же агенту.

Проверяем настройку…

1

Тег <script> и плавающий пузырь

Одна вставка в шаблон сайта. В правом нижнем углу появляется кнопка, по нажатию открывается чат. Ничего собирать не нужно — подойдёт любому сайту, хоть на WordPress, хоть на голом HTML.

вживую на этой странице

Пузырь в углу — это он. Нажмите и напишите что-нибудь.

Что вставить в шаблон 
<script>
(function () {
  var SDK   = "https://bridle.cleanslice.org/sdk/latest.js";
  var HUB   = "https://хаб.вашей.установки";
  var AGENT = "agent-…";
  var PAGE_TOKEN = "<билет из кабинета>";

  var sdk = document.createElement("script");
  sdk.src = SDK;
  sdk.onload = function () {
    window.Bridle.init({
      apiUrl: HUB,
      agentId: AGENT,
      token: PAGE_TOKEN,
      mode: "floating",
      title: "Поддержка"
    });
  };
  document.head.appendChild(sdk);
})();
</script>

Кабинет собирает эту вставку сам — экран агента «Сайт», кнопка «Скопировать». Там она чуть длиннее: в неё добавлена функция, которая меняет общий билет страницы на билет конкретного посетителя, чтобы двое открывших сайт не оказались в одном разговоре. Копируйте оттуда, а не отсюда.

2

Пакет в вашей сборке

Если у сайта есть сборка — Vite, Next, Nuxt, Webpack, — виджет ставится пакетом и вызывается из кода. Так чат можно вмонтировать в конкретное место страницы, а не только повесить в угол, и передать токен функцией, которую спросят при каждом переподключении.

вживую на этой странице
Что написать в коде 
npm i @cleanslice/bridle
import { init } from '@cleanslice/bridle'

init({
  apiUrl: import.meta.env.VITE_AGENTFY_HUB_URL,
  agentId: import.meta.env.VITE_AGENTFY_AGENT_ID,
  token: () => fetch('/api/agent-token').then((r) => r.json()).then((t) => t.token),
  mount: '#chat',
  mode: 'inline',
  title: 'Поддержка',
})

Что здесь настоящее, а что показано. Окно выше поднято тем же самым init() с mode: "inline" и mount — то есть ровно тем, ради чего этот способ и выбирают. Единственное отличие: демо берёт init из бандла по адресу, а не из node_modules, потому что у демо намеренно нет своей сборки. Строчка npm i — единственное, что здесь описано, а не выполнено.

3

Свой интерфейс поверх клиента

Готовый виджет можно не брать вовсе. Клиент даёт соединение и события — «печатает», «пришёл кусок ответа», «ответ закончился», — а как всё это выглядит, решает ваша вёрстка. Так чат встраивают в уже нарисованный интерфейс: в панель поддержки, в карточку товара, в мобильное приложение.

вживую на этой странице
Что написать в коде 
import { BridleClient } from '@cleanslice/bridle'

const client = new BridleClient({ apiUrl: HUB, agentId: AGENT, token })

client.on('typing',     ()  => showTypingIndicator())
client.on('stream',     (m) => renderPartial(m.text))
client.on('stream_end', (m) => commit(m.text))
client.on('message',    (m) => commit(m.text))
client.on('error',      (e) => showError(e.code))

await client.connect()
client.send('Здравствуйте')

Вся вёрстка чата выше — этой страницы, а не виджета: сообщения, пузыри, индикатор «печатает». Из Agentfy сюда приходят только события.

Чего этот разговор не умеет — и почему

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

Каждый из четырёх запретов владелец может снять с экрана «Сайт» поштучно — и каждый стоит того, чтобы понимать, чем это грозит. Подробный разбор — в разделе документации «Встраивание → Границы и права».