Привет, сообщество Discourse!
Надеюсь, у всех у вас всё отлично!
Я настроил чат-бота с ИИ-персонажем (LLM GPT-4 Omni-Mini), и он работает просто великолепно! Однако я заметил, что количество взаимодействий с клиентами довольно низкое. Сейчас, чтобы пообщаться с ботом, им нужно нажать на маленькую иконку робота в верхней панели, и мне кажется, что это не очень заметно.
Я создал тему с инструкцией, как его найти, но он всё ещё кажется немного скрытым. Не подскажете, есть ли способ разместить более крупную иконку виджета чата в углу экрана, чтобы она бросалась в глаза?
Я читал об интеграции с Help Scout или Zendesk, но предпочитаю использовать уже имеющиеся возможности Discourse, без дополнительных затрат и лишних сложностей.
Есть ли у вас какие-то советы или хитрости, которыми вы могли бы поделиться? Буду очень признателен за любые подсказки! Я всё ещё осваиваю все эти тонкости, поэтому любая помощь для меня очень ценна.
Спасибо, Лилли, это отличная идея!
Это не совсем подойдёт для нашего форума, я убрал боковую панель, думая сделать его менее перегруженным… Возможно, я верну её, если не найду другое решение
Конечно, я бы не против немного масштабировать её…
Я думал использовать своё собственное изображение для этой кнопки (я уже добавил его в свою тему), но не знаю, как подключить это кастомное изображение как иконку в опциях компонента (GitHub - literatecomputing/discourse-custom-components · GitHub).
Также мне не удаётся изменить её положение… Нужно ли мне создать отдельный раздел в коде темы??
После некоторых поисков здесь и там ChatGPT помог мне — почти — достичь цели
Я добавил кнопку, как предложила Лили, и также потратил немало времени на изучение альтернатив здесь и там. В итоге я просто попросил ChatGPT помочь мне написать код для создания такой кнопки, а точнее — плавающего «аватара» на основе изображения, которое я загрузил в свою тему.
Я размещаю здесь код, который использую, на случай, если он поможет кому-то ещё в будущем!
HTML:
<a id="chatbot-avatar" href="https://ВАШ_URL_ЗДЕСЬ" title="AI чат-бот">
<img src="https://ВАША_ССЫЛКА_НА_ИЗОБРАЖЕНИЕ_ЗДЕСЬ__" alt="Аватар чат-бота" />
<div class="tooltip">Начать разговор с AI чат-ботом</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* Фиксирует аватар на месте */
bottom: 50px; /* Расстояние от низа страницы */
right: 50px; /* Расстояние от правого края страницы */
cursor: pointer; /* Меняет курсор на указатель при наведении */
z-index: 1000; /* Гарантирует, что аватар будет поверх другого контента */
text-align: center; /* Центрирует текст подсказки прямо под аватаром */
}
#chatbot-avatar img {
width: 200px; /* При необходимости измените размер */
height: 200px; /* При необходимости измените размер */
transition: transform 0.3s; /* Плавный эффект при наведении */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Немного увеличиваем аватар при наведении */
}
.tooltip {
visibility: hidden; /* Скрыто по умолчанию */
width: 200px; /* Ширина подсказки */
background-color: #000C34; /* Цвет фона подсказки */
color: #fff; /* Цвет текста подсказки */
text-align: center; /* Центрируем текст */
border-radius: 5px; /* Скруглённые углы */
padding: 8px; /* Отступы внутри подсказки */
position: absolute; /* Абсолютное позиционирование */
bottom: 220px; /* Размещаем над аватаром */
right: 50%; /* Центрируем относительно аватара */
transform: translateX(50%); /* Корректировка для центрирования */
opacity: 0; /* Прозрачно по умолчанию */
transition: opacity 0.3s; /* Плавный переход */
z-index: 999; /* Размещаем чуть ниже аватара */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Показываем подсказку */
opacity: 1; /* Делаем её полностью видимой */
}
Вот как это выглядит на странице (Текст «Начать разговор…» появляется только при наведении на аватар).
Есть одна вещь, которую я пока не смог сделать: заставить аватар появляться только на главной странице. В данный момент он отображается на каждой странице, включая страницу обсуждения AI чат-бота, где это явно излишне… Я пробовал добавить скрипт для определения страницы и блокировать аватар везде, кроме главной, и так далее… Пока не получилось. Посмотрю, смогу ли я что-то сделать завтра!
Однако я заметил, что количество взаимодействий с клиентами довольно низкое. Сейчас, чтобы пообщаться с ботом, им нужно нажать на маленькую иконку робота в верхней панели, и мне кажется, что это не очень заметно.
