Настройте внешний вид, поведение и функциональность вашего виджета через систему конфигурации.
Все настройки виджета управляются через конфигурацию виджета в вашей панели управления. Конфигурация включает настройки внешнего вида, параметры поведения и настройку контента.
Думайте о конфигурации как о ДНК вашего виджета — она определяет все, от цветов и шрифтов до потоков разговоров и начальных сообщений. Лучшая часть? Изменения в вашей конфигурации вступают в силу немедленно, не требуя изменений в коде на вашем веб-сайте.
🎨 Живое изменение
Используйте наш визуальный редактор конфигурации в панели управления, чтобы видеть ваши изменения в реальном времени. Не нужно догадываться, как будут выглядеть цвета или как будут вести себя кнопки — предварительно просматривайте все перед публикацией.
Визуальный внешний вид имеет решающее значение для того, чтобы виджет выглядел естественной частью вашего веб-сайта. Наши настройки внешнего вида дают вам полный контроль над каждым визуальным аспектом.
Выбирайте цвета, которые соответствуют вашей фирменной идентичности. Все значения цвета должны быть в шестнадцатеричном формате (например, #FF5733).
Совет: Используйте инструмент проверки контраста цветов, чтобы убедиться, что ваш текст остается читаемым на фоне, который вы выбрали. Это особенно важно для соблюдения доступности.
В разделе Внешний вид вы можете установить отдельную цветовую палитру для светлой и темной темы — каждая тема имеет свои предустановки и цвета. Какую из них увидит посетитель, выбирается при встраивании с помощью data-theme="light|dark|system" (система следует за устройством посетителя) или во время выполнения с помощью CompaninWidget.setTheme(). Оставьте темную палитру пустой, чтобы автоматически вывести ее из ваших светлых цветов.
Размерьте ваш виджет соответственно для вашего случая использования и аудитории. Большие размеры обеспечивают больше контекста для разговора, в то время как меньшие размеры кажутся менее навязчивыми.
Учет мобильных устройств: Виджет автоматически масштабируется на мобильных устройствах, но протестируйте вашу конфигурацию на различных размерах экрана, чтобы обеспечить хороший опыт для всех пользователей.
Настройки поведения контролируют, как виджет взаимодействует с пользователями и реагирует на различные контексты.
⚠️ Рекомендация
Большинство сайтов должны начинать с виджета, свернутого (<code>start_open: false</code>), чтобы избежать навязчивости. Пользователи, которым нужна помощь, естественным образом нажмут кнопку. Для специализированных страниц помощи/поддержки открытие может быть полезным.
Приветственное сообщение — это первое, что видят пользователи, когда открывают виджет. Сделайте его приветливым, ясным и действенным. Вы можете включить интерактивные кнопки, чтобы направить пользователей к общим задачам.
Хорошее приветственное сообщение должно:
Пример: "Привет! 👋 Я здесь, чтобы помочь с вопросами о наших продуктах, ценах или аккаунте. Как я могу помочь вам сегодня?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Потоки разговоров — это предопределенные пути, которые направляют пользователей через общие сценарии. Они идеально подходят для часто задаваемых вопросов, устранения неполадок или многоступенчатых процессов, таких как возвраты или бронирования.
Потоки активируются определенными ключевыми словами или нажатиями кнопок. Когда они активируются, они отображают серию ответов с необязательными кнопками действий, создавая направленный опыт общения без необходимости в обработке ИИ.
Лучшие практики для потоков:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Настройте текст для нескольких языков:
Добавьте пользовательский CSS для расширенной стилизации:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Настройте внешние конечные точки API для улучшенной функциональности: