Виджет на сайт

Виджет ATLA AI - это плавающая кнопка чата в углу страницы, которая открывает диалог с ИИ-сотрудником. Подключение занимает 1 минуту: достаточно вставить два <script> перед закрывающим тегом </body> - никаких разработчиков и сборок не нужно.

Все диалоги, открытые через виджет, попадают в общий чат-центр платформы и обрабатываются ровно так же, как сообщения из WhatsApp, Instagram или Telegram: ИИ-сотрудник отвечает, ведёт карточку клиента в ATLA AI CRM и при необходимости передаёт диалог оператору.

Боевой пример

Посмотрите, как виджет работает на реальном проекте: myphone.kg.

Шаг 1. Получите Organization ID

organizationId - это уникальный идентификатор вашей компании в ATLA AI. Скопировать его можно в личном кабинете: Настройки → Каналы → Виджет на сайт.

Шаг 2. Вставьте код на сайт

Откройте HTML-шаблон вашего сайта (или PHP-файл с </body>) и добавьте перед закрывающим тегом </body> следующий блок:

<script>
  window.AtlaChatConfig = {
    organizationId: 'ВАШ_ORG_ID',
    wsUrl:          'wss://ai.atlabyte.com/api/widget/ws',
    channel:        'widget',

    botName:        'Мой Телефон',
    primaryColor:   '#a91111',
    welcomeMessage: 'Здравствуйте! 👋 Чем могу помочь?',
  };
</script>
<script src="https://ai.atlabyte.com/static/atlabyte-chat-widget.js"></script>

Это минимально достаточная конфигурация - виджет уже появится в правом нижнем углу страницы и начнёт отвечать клиентам.

Важно

Объект window.AtlaChatConfig должен быть объявлен до подключения скрипта виджета. Если поменять порядок <script>-тегов, виджет инициализируется с настройками по умолчанию.

Полный пример со всеми параметрами

<script>
  window.AtlaChatConfig = {
    // — Обязательные —
    organizationId: '40c0ec7d-e27c-4660-ad9b-d4100a970249',

    // — API / WebSocket —
    wsUrl:          'wss://ai.atlabyte.com/api/widget/ws',
    channel:        'widget',
    leadUsername:   'Гость',

    // — Внешний вид —
    botName:        'Мой Телефон',
    avatarUrl:      'https://example.com/avatar.jpg',
    avatarInitials: 'МТ',
    primaryColor:   '#a91111',
    primaryHover:   '#8b0d0d',
    position:       'right',
    zIndex:         99999,

    // — Тексты —
    launcherText:   'Написать нам',
    welcomeMessage: 'Здравствуйте! 👋 Чем могу помочь?',
    placeholder:    'Введите сообщение...',
    todayLabel:     'Сегодня',
    onlineLabel:    'Онлайн',
    typingLabel:    'печатает...',
    errorMessage:   'Что-то пошло не так. Пожалуйста, попробуйте позже.',

    // — Брендинг —
    poweredBy:      'ATLABYTE',
    poweredByUrl:   'https://atlabyte.com',

    // — Быстрые кнопки —
    quickReplies: [
      { label: 'Что в наличии?', text: 'Что у вас есть в наличии?' },
      { label: 'Часы работы',    text: 'Какие у вас часы работы?' },
      { label: 'Кто работает?',  text: 'Кто сейчас работает?' },
      { label: 'Цены',           text: 'Расскажите о ценах' },
    ],
  };
</script>
<script src="https://ai.atlabyte.com/static/atlabyte-chat-widget.js"></script>

Описание параметров

Обязательные

Параметр	Назначение
organizationId	UUID вашей компании в ATLA AI. Без него виджет не запустится.

API / WebSocket

Параметр	По умолчанию	Назначение
wsUrl	wss://ai.atlabyte.com/api/widget/ws	Адрес WebSocket-сервера ATLA AI. Меняется только в Enterprise-инсталляциях с собственным сервером.
channel	widget	Метка канала в CRM. Можно задать любое значение, чтобы отличать виджеты на разных сайтах одной компании (например, widget-landing, widget-shop).
leadUsername	Гость	Имя посетителя по умолчанию, пока он не представился. Отображается в панели операторов.

Внешний вид

Параметр	Назначение
botName	Имя бота в шапке окна чата.
avatarUrl	URL аватара бота. Если пусто - используются avatarInitials.
avatarInitials	Инициалы бота (1-2 символа), показываются вместо аватара.
primaryColor	Основной цвет бренда: кнопка запуска, шапка чата, пузыри сообщений бота.
primaryHover	Цвет при наведении. Если не задан - вычисляется автоматически из primaryColor.
position	right или left - в каком углу страницы показывать кнопку.
zIndex	z-index контейнера виджета. Поднимите, если поверх виджета оказываются другие элементы сайта.

Тексты интерфейса

Все тексты можно переопределить под язык и тон вашего сайта:

Параметр	По умолчанию
launcherText	Написать нам (передайте '', чтобы оставить только иконку)
welcomeMessage	Первая фраза бота при открытии чата
placeholder	Подсказка в поле ввода
todayLabel	Разделитель «Сегодня» между сообщениями разных дат
onlineLabel	Статус под именем бота
typingLabel	Статус, пока бот формирует ответ
errorMessage	Сообщение при потере связи с сервером

Брендинг

Параметр	Назначение
poweredBy	Подпись внизу окна чата. Передайте '', чтобы скрыть её.
poweredByUrl	Ссылка на подписи. По умолчанию ведёт на atlabyte.com.

Быстрые кнопки

quickReplies - массив подсказок, которые появляются под приветственным сообщением. Каждая кнопка - объект с двумя полями:

• label - короткий текст на самой кнопке.
• text - сообщение, которое реально отправится боту, когда посетитель кликнет по кнопке.

quickReplies: [
  { label: 'Цены',        text: 'Расскажите о ценах' },
  { label: 'Часы работы', text: 'Какие у вас часы работы?' },
]

Это сильно сокращает путь до первого ответа: посетитель не печатает, а ИИ сразу получает понятный запрос.

Что происходит после подключения

• Виджет работает в режиме 24/7 и сам начинает диалог, как только посетитель открыл окно чата.
• Все чаты сразу видны в общей панели чатов вместе с WhatsApp, Telegram, Instagram.
• В ATLA AI CRM автоматически создаётся карточка лида с UTM-метками, источником и страницей, с которой пришёл посетитель.
• Если клиент пришлёт ссылку на товар - ИИ перейдёт по ней и проконсультирует именно по этому продукту.
• Оператор может в любой момент перехватить чат прямо из CRM-карточки - подробности в разделе Перехват чатов.

Несколько сайтов в одной компании

Количество виджетов не ограничено. Чтобы аккуратно разводить их в CRM, задавайте разные значения channel - например, widget-landing для лендинга и widget-shop для интернет-магазина. Лиды и аналитика будут разделяться автоматически.