Голосовой агент ElevenLabs на сайте: как подключить на Tilda, WordPress, Framer и Webflow, чтобы он работал у российских посетителей
Пошагово: куда вставлять код виджета ElevenLabs Conversational AI на каждой платформе, какой обязательный атрибут почти всегда забывают и что нужно добавить, чтобы агент заговорил у посетителей из России, а не только у вас под VPN.
Инструкций «как поставить голосового агента ElevenLabs на сайт» много, и почти все они заканчиваются на «вставьте код, готово». В России это заканчивается иначе: код вставлен, кнопка на месте, а у половины посетителей агент не отвечает.
Собрал полный порядок действий по платформам плюс два шага, которых нет в стандартных инструкциях, но без которых в России виджет работать не будет.
Шаг 1. Возьмите код виджета в ElevenLabs
В панели ElevenLabs откройте своего агента, раздел с виджетом, и скопируйте embed-код. Он выглядит так:
<elevenlabs-convai agent-id="agent_xxxxxxxxxxxxxxxxxxxxxxxx"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
Две части: сам тег виджета и скрипт, который его оживляет. Обе нужны, обе идут вместе.
Тут же в панели убедитесь, что ваш домен добавлен в список разрешённых. Если агент настроен только на определённые домены, а вашего в списке нет, виджет не поднимется даже из страны без ограничений, и вы будете искать проблему не там.
Шаг 2. Вставьте код на своей платформе
Tilda
Настройки сайта, раздел с дополнительным кодом, поле для вставки перед закрывающим тегом </body>. Вставляете обе строки туда, публикуете страницы заново.
Важно: изменения в настройках сайта применяются только после переопубликации страниц. Просто сохранить настройки недостаточно, Tilda пересобирает статику при публикации.
Альтернатива, если агент нужен только на одной странице: блок с произвольным HTML (T123) прямо в нужном месте.
WordPress
Три способа, по возрастанию правильности:
- Плагин для вставки кода (WPCode, Insert Headers and Footers и подобные). Код в секцию футера, работает на всех страницах, переживает обновление темы. Рекомендую этот путь.
- Блок «Произвольный HTML» в редакторе, если агент нужен на одной конкретной странице.
- Правка
footer.phpдочерней темы. Работает, но если тема не дочерняя, при первом же обновлении код исчезнет.
Framer
Настройки сайта, раздел с пользовательским кодом, поле «End of <body> tag». Вставляете, публикуете.
Webflow
Настройки проекта, вкладка с пользовательским кодом, поле «Footer Code». Учтите, что пользовательский код доступен на платных тарифах. После вставки обязательно нужна публикация сайта.
Обычный HTML-сайт
Перед закрывающим </body> в шаблоне. Если у вас статический генератор, это общий layout.
Шаг 3. Тот самый атрибут, который забывают
А вот этого нет в стандартных инструкциях, и это первое, что стоит сделать, если аудитория российская.
По умолчанию виджет может выбирать WebRTC для передачи голоса. WebRTC ходит напрямую, минуя любые промежуточные узлы. Пока вы работаете без посредников, это даже хорошо, меньше задержка. Но как только вам понадобится пустить трафик виджета через релей (а для России понадобится), медиапоток уйдёт мимо и вы получите наполовину живого агента: он подключился, но не говорит.
Поэтому транспорт лучше зафиксировать явно:
<elevenlabs-convai agent-id="agent_xxxx" use-rtc="false"></elevenlabs-convai>
Один атрибут, use-rtc="false". Он переводит диалог на WebSocket, который проксируется предсказуемо.
Шаг 4. Проверьте, работает ли агент в России
Вот здесь ломается почти у всех, и ломается тихо.
ElevenLabs ограничивает доступ с российских адресов. Не Роскомнадзор, а сам ElevenLabs, исполняя санкционное законодательство США: Россия перечислена в его официальной справке вместе с Беларусью, Кубой, Ираном, Северной Кореей и Сирией.
Мы замерили это с московского сервера: любой запрос к api.elevenlabs.io с российского адреса получает редирект на страницу справки вместо данных. Скрипт виджета при этом грузится нормально, потому что лежит на нейтральном CDN.
Что видит ваш посетитель: кнопка агента отрисована, он на неё нажимает, ничего не происходит. Ни ошибки, ни объяснения. Он уходит.
Что видите вы: работающего агента, потому что вы почти наверняка сидите под VPN. И это не помогает никак: виджет исполняется в браузере посетителя, ваше подключение к нему отношения не имеет.
Как проверить по-настоящему. Три способа, любой годится:
- Открыть сайт с телефона по мобильному интернету российского оператора, полностью отключив VPN.
- Попросить знакомого без туннеля нажать на кнопку агента и сказать, что произошло.
- Прогнать страницу через наш чекер: он найдёт на ней тег виджета, вытащит
agent-idи постучится к ElevenLabs с российского узла. Бесплатно, регистрация не нужна.
Шаг 5. Что делать, если агент не отвечает
Вариантов ровно три, и выбирать между ними нужно осознанно.
Отказаться от агента для России. Честный вариант, если российская аудитория для вас непрофильная. Тогда виджет лучше просто не показывать посетителям из РФ, чем показывать нерабочую кнопку.
Поднять свой релей. Технически возможно, но заметно сложнее, чем кажется: обычный HTTP-прокси задачу не решает, нужен перехват на стороне страницы плюс честная ретрансляция WebSocket. Разобрал подробно в отдельной статье про свой прокси, там же про то, во что это обходится по времени.
Подставить готовый релей. Меняется одна строка: вместо стандартного скрипта виджета подключается загрузчик, который уводит трафик через узел с чистым европейским адресом.
<elevenlabs-convai agent-id="agent_xxxx" use-rtc="false"></elevenlabs-convai>
<script src="https://cdn.elevenproxy.ru/w/proj_XXXXXXXX.js" async></script>
Аккаунт ElevenLabs остаётся вашим, ключи остаются вашими, за минуты диалога вы платите ElevenLabs напрямую. Меняется только маршрут, которым виджет ходит к API.
Чек-лист перед публикацией
- [ ] Домен сайта добавлен в разрешённые в настройках агента.
- [ ] Код вставлен перед
</body>, а не в произвольном месте страницы. - [ ] На теге стоит
use-rtc="false". - [ ] Страницы переопубликованы (для Tilda, Framer, Webflow это обязательный отдельный шаг).
- [ ] Проверено с российского адреса без VPN, а не только из своего браузера.
- [ ] На странице есть запасной способ связи, если агент по любой причине не поднялся.
Последний пункт недооценивают. Голосовой агент это дополнительный канал, а не единственный. Живой телефон, форма или мессенджер рядом стоят дёшево и спасают, когда виджет молчит по причинам, которые от вас не зависят.
Узнайте, режется ли ваш агент ElevenLabs по гео для РФ — и почините заменой одной строки.