Skip to content
Moon AI docs

Чат для сайта

Здесь мы рассмотрим процесс подключения агента к сайту, а также возможности кастомизации чата.

Подключение Чата на сайт

Section titled “Подключение Чата на сайт”

После нажатия кнопки “Подключить” появятся два блока - “Разрешенные домены” и “Скрипт для сайта”.

В разделе “Разрешенные домены”:

  1. Укажите домен вашего сайта, где будет отображаться виджет агента. Проверьте, чтобы домен не содержал дополнительный слэш в конце. Например: alt text
  2. Нажмите Enter, чтобы добавить домен в список разрешенных доменов.

В разделе “Скрипт для сайта”:

  1. Ознакомьтесь с кодом для вставки в HTML разметку сайта и инструкцией. По инструкции вы можете отредактировать виджет: alt text
  2. Чтобы изменить клавиши для отправки сообщения, добавьте поле ‘send_keys’. Без этого поля сообщения в чате будут отправляться при нажатии Enter.
  3. По умолчанию в чате стоит светлая тема. Чтобы поменять на темную, добавьте поле ‘theme’ и укажите значение ‘dark’.
  4. Добавьте объект ‘header’, чтобы изменить заголовок и иконку чата.
  5. Добавьте объект ‘colors’, чтобы изменить цвета чата (по умолчанию цвет фиолетовый).

Чат выглядит по умолчанию так: alt text

Добавим все возможные изменения. Для этого можете использовать следующий шаблон:

Шаблон для редактирования
<script
  src="https://dashboard.mooonai.com/cdn/moon-ai-chat-plugin/v1.1.0/moon-ai-site-chat.min.js"></script>
<script defer>
    initMoonAIChat({
      uuid: 'your uuid',
      start_message: 'Здравствуйте, я ИИ-агент компании Moon AI, чем я могу вам помочь?',
            send_keys: ['Control', 'Enter'],    // отправка сообщений по Ctrl+Enter
            theme: 'light',
            lang: 'kk',     // казахский язык
            header: {
                title: 'Moon AI — ИИ-агент',
                icon_url: 'https://your-site.com/logo.png'      // url на ваше лого
            },
            colors: {
                '--mai-bg-color': '#FFFFFF',
                '--mai-fg-color': '#1F2937',
                '--mai-primary-bg-color': '#2563EB',
                '--mai-primary-fg-color': '#FFFFFF',
                '--mai-muted-bg-color': '#F3F4F6',
                '--mai-muted-fg-color': '#6B7280'
            }
    });
</script>

После редактирования чат на сайте можеть выглядеть так: alt text