Как добавить кнопку «Спросить у ИИ» на сайт: готовый код для Яндекс Алисы, ChatGPT, Perplexity и Claude

Две трети пользователей покидают сайт, если не находят ответ за 15 секунд. Они не читают FAQ, не смотрят видео — они хотят спросить у того, кто точно знает. И «тот, кто знает» сегодня это ИИ.

Проблема в другом: вы тратите деньги на контент, а пользователи всё равно уходят к ChatGPT или Perplexity. Почему бы не дать им инструмент прямо на вашем сайте? Кнопка «Спросить у ИИ» — это не фича, а мостик доверия. Человек щёлкает, открывается диалог с уже предзаполненным контекстом вашей страницы, и AI отвечает на его вопрос, используя ваши же материалы. Конверсия растёт, отток падает.

Разберём, как добавить такую кнопку для четырёх популярных AI-помощников: Яндекс Алиса, ChatGPT, Perplexity и Claude. Без SDK, без API-ключей — только HTML и одна строчка JavaScript.

Почему это вообще работает

Классический интернет построен на переходах: пользователь читает, ищет, снова читает. AI-интерфейс — это диалог. Когда вы даёте кнопку «Спросить у ИИ», вы не заставляете человека покидать ваш сайт, а направляете его в диалоговое окно, которое уже знает контекст. Это как если бы вы посадили рядом консультанта, который прочитал вашу базу знаний и готов отвечать на любой вопрос по теме. Диалог с ИИ стал главным интерфейсом эпохи — не игнорируйте тренд.

Исследования 2026 года показывают: сайты с кнопкой «Спросить у AI» увеличивают среднее время сессии на 40%, а конверсию — на 12–18%. Это не магия, а снятие барьера: пользователь доверяет AI-ответу больше, чем незнакомому контенту.

Готовые URL для четырёх AI

У каждой платформы свой формат ссылки. Мы собрали актуальные deeplink-конструкции на июнь 2026 года. Они позволяют открыть диалог с предзаполненным текстом (prompt prefill).

Собираем кнопку: пошагово

Мы сделаем универсальный HTML-блок, который можно вставить на любую страницу. Кнопки будут открывать диалог с предзаполненным запросом, основанным на заголовке и описании страницы.

1 Подготовьте контекст

Сформулируйте системное сообщение, которое ИИ увидит первым. Оно должно объяснять, о чём страница, и предлагать пользователю задать вопрос. Пример:

Я — помощник по статье «Как добавить кнопку Спросить у ИИ». Отвечай на основе текста статьи. Если не знаешь — предложи поискать в Perplexity.

Кодируйте этот текст через encodeURIComponent() для JavaScript или urlencode() на бэкенде.

2 Верстаем кнопки

Каждая кнопка — это обычная ссылка с атрибутами data-ai и data-prompt. JavaScript подставит нужный URL.

<div class="flex flex-wrap gap-3">
  <a href="#" class="btn-ai" data-ai="alice" data-prompt="Расскажи об этой странице">
    Спросить у Алисы
  </a>
  <a href="#" class="btn-ai" data-ai="chatgpt" data-prompt="Что тут полезного?">
    Спросить у ChatGPT
  </a>
  <a href="#" class="btn-ai" data-ai="perplexity" data-prompt="Объясни суть">
    Искать через Perplexity
  </a>
  <a href="#" class="btn-ai" data-ai="claude" data-prompt="Резюмируй статью">
    Спросить у Claude
  </a>
</div>

<script>
  const baseURLs = {
    alice: 'https://alice.yandex.ru/message?text=',
    chatgpt: 'https://chatgpt.com/?q=',
    perplexity: 'https://www.perplexity.ai/search?q=',
    claude: 'https://claude.ai/new?q='
  };
  document.querySelectorAll('.btn-ai').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      const ai = this.dataset.ai;
      const prompt = encodeURIComponent(
        this.dataset.prompt + '\n\nКонтекст: ' + document.title
      );
      window.open(baseURLs[ai] + prompt, '_blank');
    });
  });
</script>

Вот и всё. Три кнопки, один скрипт. Никаких зависимостей.

3 Красим и позиционируем

Добавьте CSS (через Tailwind или свой). Пример с Tailwind:

<a href="#" class="btn-ai inline-block px-5 py-2.5 rounded-lg text-white font-medium shadow hover:shadow-lg transition" 
   data-ai="chatgpt" 
   data-prompt="Помоги разобраться" 
   style="background:#10a37f;">
  🤖 ChatGPT
</a>

Можно вынести стили в CSS-класс, но для демонстрации inline — нагляднее.

Грабли, на которые наступают все

Я видел десятки сайтов, где такая кнопка висит мёртвым грузом. Вот типичные ошибки.

• Не обработали регион. Алиса Плюс (с улучшенной ИИ-моделью) доступна в России, но в других странах ссылка ведёт в никуда. Обзор улучшений Алисы Плюс показывает, как сильно выросла модель — и именно поэтому пользователи за её пределами разочаруются. Добавьте гео-определение или универсальную кнопку ChatGPT как fallback.
• Слишком длинный prompt. Некоторые платформы обрезают текст после 4000 символов. Лучше отправлять короткий контекст: заголовок + 2-3 предложения из описания.
• Игнорирование мобильных. ChatGPT и Claude на iOS/Android можно открыть через deeplink chatgpt:// / claude://, но они сработают только если приложение установлено. Используйте window.open с проверкой — если не открылось, покажите сообщение «Установите приложение».
• Забыли про privacy. Отправляя свой контент в ChatGPT или Perplexity, вы передаёте данные третьим лицам. Если на странице есть личная информация — не используйте эту кнопку или предупредите пользователя.

Как НЕ надо делать: пример ошибки

Вот кусок кода, который я встречал на реальном сайте. Выглядит безобидно, но ломает всё.

<a href="https://chatgpt.com/?q=Помоги" target="_blank">Спросить AI</a>

Ошибки: русский текст не закодирован, нет контекста страницы, нет fallback для мобильных. Правильно так:

<a href="#" class="btn-ai-pro" data-prompt="Помоги с вопросом">Спросить AI</a>

<script>
  document.querySelector('.btn-ai-pro').addEventListener('click', function(e) {
    e.preventDefault();
    const prompt = encodeURIComponent(
      this.dataset.prompt + '\nКонтекст: ' + document.querySelector('h1').innerText
    );
    // Пробуем открыть приложение, если нет — веб
    const url = 'https://chatgpt.com/?q=' + prompt;
    const appUrl = 'chatgpt://open?q=' + prompt;
    const onFail = function() {
      window.open(url, '_blank');
    };
    try {
      const w = window.open(appUrl);
      if (!w || w.closed) onFail();
    } catch(e) {
      onFail();
    }
  });
</script>

Заметили разницу? Контекст берётся из H1, а не статической строки, и есть попытка открыть приложение перед веб-ссылкой.

Когда кнопка становится частью UX

Одной кнопки недостаточно. Подумайте о позиционировании. Лучшее место — рядом с основным CTA или в плавающей панели после 30 секунд чтения. SEO в эпоху AI-поиска требует пересмотра подхода: вы не просто ранжируетесь, а становитесь источником для AI-диалога. Кнопка «Спросить у ИИ» — один из инструментов этого подхода.

Не забывайте про аналитику. Вешайте на каждую кнопку UTM-метку или событие data-ai-click и отслеживайте, какой AI приносит больше диалогов. ChatGPT обычно лидирует, но Perplexity даёт более точные ответы по документации, а Алиса — лучше для русскоязычной аудитории.

Прогноз: 2027 год — кнопка AI по умолчанию

Уже сейчас многие CMS (например, WordPress с плагинами AI Search) встраивают такие кнопки. Через год это станет стандартом, как иконка поиска или кнопка «Поделиться». Если вы откладываете внедрение — представьте, что пользователь по привычке уходит в ChatGPT, и ваш контент там обрабатывается без контекста вашей страницы. С кнопкой вы контролируете «первое слово» AI.

Кстати, если вы ещё не продумали GEO-стратегию, сейчас самое время: кнопка даёт сигнал поисковым системам, что ваш сайт дружелюбен к AI, а это влияет на ранжирование в AI Overviews.

Часто задаваемые вопросы

Будет ли кнопка работать, если пользователь не залогинен в сервисе?

Да, но откроется страница логина. После авторизации запрос отправится. Чтобы избежать лишнего шага, можно использовать сервисы, которые принимают запросы без авторизации (например, Perplexity в режиме гостя), но это редкость.

Можно ли добавить кнопку без JavaScript?

Да, через обычную HTML-ссылку с URL-кодированным текстом. Но без динамического подхвата контекста страницы кнопка будет менее эффективной.

Какой AI выбрать по умолчанию?

Если аудитория из РФ — Алиса (с учётом гео). Если глобальная — ChatGPT или Perplexity. Claude хорош для аналитики и контента.

Код из этого гайда можно скопировать и вставить на любую страницу за 10 минут. Попробуйте — и вы увидите, как AI-диалоги начнут приносить вам не трафик, а лояльность.

Подписаться на канал