Кнопки «Запитати ШІ»
Додайте кнопку будь-де на сайті, яка одним кліком надсилає запитання в чат
Кнопку або посилання можна розмістити будь-де на сайті — поруч із товаром, у таблиці тарифів чи в розділі поширених запитань — вона відкриває чат і миттєво ставить запитання за відвідувача. Один клік надсилає повідомлення, і ШІ відповідає, тож відповіді можна отримати, нічого не друкуючи.
Порада: Ідеально для таблиць цін, поширених запитань і сторінок товарів — розмістіть кнопку «Запитати ШІ» поруч з усім, про що відвідувачі часто запитують.
Як це працює
Після встановлення скрипта віджета Asyntai на вашій сторінці він надає глобальний JavaScript API за адресою window.AsyntaiWidget. Ви можете викликати його методи для програмного керування віджетом чату.
Щоб надіслати запитання, викличте window.AsyntaiWidget.ask() з повідомленням, яке хочете надіслати:
// Open the chat and send a question
window.AsyntaiWidget.ask("What are your shipping times?");
Базовий приклад
Додайте кнопку будь-де у вашому HTML і передайте запитання, яке вона має надіслати:
<button onclick="window.AsyntaiWidget.ask('What are your shipping times?')">
Ask about shipping
</button>
Коли відвідувач натискає кнопку, чат відкривається і запитання надсилається автоматично.
Приклад текстового посилання
Додайте текстове посилання, яке під час натискання надсилає запитання:
<a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.ask('Do you offer refunds?');">
Ask about refunds
</a>
Примітка: Використовуйте event.preventDefault() на якірних посиланнях, щоб запобігти прокрутці сторінки вгору при натисканні.
Приклад стилізованої кнопки
Створіть більш помітну CTA-кнопку з власними стилями:
<style>
.ask-ai-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.ask-ai-btn:hover {
background: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
}
</style>
<button class="ask-ai-btn" onclick="window.AsyntaiWidget.ask('How does pricing work?')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2l1.9 4.8L18.7 8l-4.8 1.9L12 14.7l-1.9-4.8L5.3 8l4.8-1.2L12 2z"/>
</svg>
Ask AI
</button>
Завантажується автоматично
Метод ask() перед надсиланням очікує повного завантаження віджета, тож він працює, навіть якщо відвідувач натискає в момент завантаження сторінки — вам не потрібно перевіряти, чи готовий віджет.
Повна довідка API
| Метод | Опис |
|---|---|
AsyntaiWidget.ask("message") |
Відкриває чат і надсилає повідомлення так, ніби його ввів відвідувач |
AsyntaiWidget.open() |
Відкриває віджет чату |
AsyntaiWidget.close() |
Закриває віджет чату |
AsyntaiWidget.toggle() |
Перемикає чат між відкритим та закритим станом |