Как добавить Google Call Widget на сайт

Быстрые ссылки

• Добавление Google Call Widget
• Проверка и тестирование
• Решение проблем
• Альтернативы
• Заключение

Как работает Call Widget

Call Widget (виджет звонка) использует Google Voice как посредника. Последовательность упрощённо такая:

1. Посетитель вводит свой номер в форме виджета и нажимает «Connect».
2. Google Voice сначала звонит на введённый посетителем номер и проверяет соединение.
3. После подтверждения Google Voice инициирует звонок на номер, который вы настроили для виджета.
4. Два звонка соединяются, и разговор начинается, при этом реальный номер вашей компании остаётся скрыт.

Преимущества: простая интеграция, отсутствие раскрытия личного номера, базовая маршрутизация звонков и голосовая почта через Google Voice.

Добавление Google Call Widget

Ниже — пошаговая инструкция с визуальными подсказками.

1. Войдите в Google Voice и нажмите значок шестерёнки в правом верхнем углу. Выберите «Voice settings».

2. На вкладке «Phones» нажмите «Add another phone», чтобы добавить номер, на который будет перенаправляться виджет. Если вы хотите использовать сам номер Google Voice, этот шаг можно пропустить (при этом вы будете принимать вызовы на компьютере или в приложении Google Voice).

3. Заполните имя, номер и тип телефона. Для мобильного номера можно включить приём SMS. Нажмите «Save», чтобы вернуться на вкладку «Phones».

4. Подтвердите номер: нажмите «Verify Now» рядом с добавленным номером, затем «Connect», чтобы инициировать верификационный звонок. Google Voice позвонит и попросит ввести код. После подтверждения номер можно использовать с виджетом.

5. Выберите галочкой номер, на который должен звонить виджет. Если вы хотите использовать сам Google Voice‑номер, не отмечайте никаких номеров. Перейдите на вкладку «Call Widgets».

6. Нажмите «Add a new Call Widget», чтобы создать новый виджет для вашего сайта. Виджет будет использовать номер, отмеченный на предыдущем шаге.

7. Заполните имя виджета, выберите, как вы хотите принимать звонки, тип приветствия или запишите собственное, а также настройте способ отображения звонка при соединении. Нажмите «Save changes».

8. На странице виджета выделите и скопируйте весь текст в поле «Embed» — это HTML/JS‑код, который нужно вставить на страницу вашего сайта.

9. Откройте HTML‑редактор страницы, куда хотите добавить виджет (например, страницу продажи, боковую панель или страницу контактов). Найдите место в коде, где должен появиться виджет, и вставьте код, скопированный в шаге 8. Сохраните файл и обновите страницу на сайте.

Пример места вставки (замените на код из поля Embed):

Примечание

Большинство платформ для блогов имеют виджет «HTML» или «Текст», куда можно вставить скрипт виджета. Для WordPress выберите «Внешний вид → Виджеты → HTML‑код», вставьте код и сохраните.

Проверка и тестирование

Чтобы убедиться, что виджет работает:

1. Откройте страницу с виджетом.
2. Нажмите на изображение/кнопку виджета, введите имя и тестовый номер (например, ваш мобильный).
3. При желании поставьте флажок «Keep number private», чтобы скрыть номер звонящего от получателя.
4. Нажмите «Connect».
5. Проверьте, что Google Voice совершает два звонка и соединяет их. Если вы не ответили, звонок должен попасть на голосовую почту, а на вашу почту придёт уведомление.

Решение распространённых проблем

• Виджет не отображается: убедитесь, что вставили код в секцию, доступную для скриптов (не в комментарий) и что ваш сайт не блокирует внешние скрипты (Content Security Policy).
• Посетителю не приходит звонок: проверьте правильность введённого номера и формат (включая код страны).
• Номер не проходи верификацию: удостоверьтесь, что телефон доступен для входящих во время проверки и что вы следуете голосовым подсказкам для ввода кода.
• Звонки не соединяются: проверьте, не блокирует ли ваш телефон входящие автоматические вызовы или настройки Do Not Disturb.

Короткий чеклист для тестирования:

• Виджет виден на целевой странице.
• При клике открывается форма ввода.
• Посетитель получает тестовый звонок.
• Вы (или ваш указанный номер) получаете входящий вызов, и разговор соединяется.
• Если никто не отвечает, голосовая почта и уведомление по электронной почте работают.

Критерии приёмки

1. Виджет отображается корректно в основных браузерах (Chrome, Firefox, Safari).
2. Успешная проверка номера (верификация прошла).
3. Успешное соединение между тестовым абонентом и назначенным номером.
4. Голосовая почта и письма‑уведомления приходят при недоступности.

Альтернативы и когда это не подходит

Когда стоит рассмотреть альтернативы:

• Нужна более гибкая маршрутизация звонков, запись разговоров или интеграция с CRM — рассмотрите решения на базе Twilio, Vonage или специализированных SIP‑провайдеров.
• Требуется международная поддержка с локальными номерами в нескольких странах — Google Voice может быть ограничен в доступности.
• Высокие требования к безопасности и шифрованию — корпоративные SIP/UC платформы предоставляют более строгие опции.

Альтернативные подходы:

• Click‑to‑Call через телефонный провайдер (SIP API).
• Встроенный callback‑скрипт на сервере, который инициирует исходящий звонок через провайдера.
• Использование виджетов сторонних сервисов для обратного звонка с интеграцией в CRM.

Руководство по внедрению (ролевой чеклист)

Для менеджера продукта:

• Утвердить требования к приватности и доступности.
• Решить, будет ли использоваться Google Voice‑номер или локальный телефон.

Для разработчика / админа сайта:

• Вставить код Embed в нужную область сайта.
• Проверить CSP и настройки хостинга на разрешение внешних скриптов.
• Протестировать на мобильных и десктопных браузерах.

Для службы поддержки / приема звонков:

• Настроить расписание приёма звонков.
• Обучить сотрудников, как работать с Google Voice и голосовой почтой.

Короткая методология развертывания (минимальная)

1. Подготовка: выберите номер, проверьте доступность Google Voice в регионе.
2. Настройка: добавьте/верифицируйте номер, создайте виджет, настройте приветствие.
3. Размещение: вставьте код Embed на страницу/виджет блога.
4. Тестирование: пройдите чеклист тестирования.
5. Мониторинг: проверяйте логи и письма об упущенных звонках.

flowchart TD
  A[Нужен ли простой callback через Google Voice?] -->|Да| B[Подходит Google Call Widget]
  A -->|Нет| C[Рассмотреть Twilio или SIP‑решение]
  B --> D[Добавить и верифицировать номер в Google Voice]
  D --> E[Создать Call Widget и встроить код]
  E --> F[Тестирование и приём в эксплуатацию]

Примечания по приватности и соответствию требованиям

• Google Voice обрабатывает номера и метаданные звонков. Убедитесь, что ваша политика конфиденциальности содержит информацию о сборе телефонных данных.
• Для пользователей из ЕС проверьте соответствие требованиям GDPR: оповещайте о том, какие данные собираются, и при необходимости получите согласие на обработку.
• Если телефонные номера сохраняются в вашей CRM после звонка, обеспечьте их защищённое хранение и ограничьте доступ.

Частые вопросы

Q: Могу ли я использовать виджет без собственного номера и только с Google Voice?
A: Да — если вы не отмечаете никакие проверенные номера, виджет будет использовать ваш номер Google Voice, и вызовы принимаются через приложение/веб‑интерфейс Google Voice.

Q: Виджет работает с мобильными браузерами?
A: Да, но функциональность зависит от того, как мобильный браузер и устройство обрабатывают автоматические вызовы и всплывающие окна. Рекомендуется тестировать на основных устройствах.

Заключение

Google Call Widget — быстрый способ добавить голосовой контакт на сайт без раскрытия реального номера. Это удобное решение для малого бизнеса и отделов поддержки, которым нужны простая интеграция и приватность. При необходимости более продвинутой маршрутизации и масштаба стоит рассмотреть платные API‑решения.

Краткое резюме:

• Настройка занимает несколько шагов в Google Voice.
• Нужна верификация номера для использования произвольных номеров.
• Тестируйте работу виджета на реальных устройствах и учитывайте требования по конфиденциальности.

Вывод: если вам нужна простая, бесплатная опция для обратного звонка с сохранением приватности — Google Call Widget подходит. Для более сложных сценариев выбирайте провайдеров с расширенными функциями.