jQuery-мастер #4. Основные методы
Лично на мой взгляд решение не идеальное. Но другого я не вижу, если вы конечно не используете какие-то плагины на WordPress, и то сомнительно)
Собственно, вся суть находится на этой странице. Нужно по сути отправлять запрос по ссылке, передавая номер телефона (обязательно уже зарегистрированного в WhatsApp и текст письма). Конечно, в плане больших данных придется довольствоваться только строчным представлением, типа: Телефон: 123456, Имя: Алексей, email: alexey@gmail.com. По крайней мере пока я не разобрался с переносами)
Итак, нам нужно сперва создать html-разметку:
HTML
1 2 |
<inputtype="text"><ahref="#">Отправить</a> |
Отправить
Простая разметка, ссылка (ну или можно взять кнопку) и инпут.
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function sendToWhatsapp(text, phone) { text = encodeURIComponent(text); let url = `https://web.whatsapp.com/send?phone=${phone}&text=${text}&source=&data=`; window.open(url); } $('a').click(function(e){ e.preventDefault(); let phoneNumber = '7911352392'; let text = $('input').val(); sendToWhatsapp(text, phoneNumber); });
|
function sendToWhatsapp(text, phone) { text = encodeURIComponent(text); let url = `https://web.whatsapp.com/send?phone=${phone}&text=${text}&source=&data=`; window.open(url); } $('a').click(function(e){ e.preventDefault(); let phoneNumber = '7911352392'; let text = $('input').val(); sendToWhatsapp(text, phoneNumber); });
Пишем функцию sendToWhatsapp, передавая два параметра — текст и телефон. Внутри обрабатываем текст с помощью encodeURIComponent(), чтобы убрать пробелы и верно закодировать строку для урла. Далее формируем сам урл, с помощью шаблонных строк вставляем наши текст и телефон. После этого через window.open() переходим по этой ссылке в новой вкладке.
Ниже же получаем при клике на кнопку телефон и текст и вызываем написанную функцию sendToWhatsapp.
Собственно, этот код перебросит нас сразу в чат с собеседником, останется только нажать кнопку «отправить». Ну и нужно понимать, что у отправляющего тоже должна быть настроена web-версия. Как я и говорил, способ не идеальный, но самый простой.
Всем успехов в применении 🙂
Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/
Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика 🙂
maxgraph.ru
Скрипты для uKit9
WhatsApp, пожалуй, самый популярный мессенджер в России, среди общего количества пользователей. Для многих не секрет, что в uKit вышло новое обновление и теперь в виджете «Соц. Сети» можно указать ссылку на WhatsApp по номеру телефона. Но мы решили дать возможность пользователям написать сообщение прямо с вашего сайта.
Поэтому, специально для пользователей uKit мы решили написать скрипт, который будет генерировать сообщение в мессенджер WhatsApp.
Настройки данного виджета: https://ukit.top/screen/76.png.
- Укажите свой номер в WhatsApp
- Задержка появления формы в миллисекундах
- Текст приветствия, при открытии формы WhatsApp
Код
Здравствуйте! Напишите нам сообщение в WhatsApp
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец
Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). Демо страницаНаписать автору статьиПохожие материалы:
–>Всего комментариев–>: 9 |
<label>Порядок вывода комментариев:</label> |
–>
Содержание
- Отправка сообщений в WhatsApp с сайта.
- 1. Первый вариант. Chat-api
- 2. Второй вариант. Готовые плагины
Отправка сообщений в WhatsApp с сайта
1. Первый вариант. Chat-api
Chat-api это неофициальный шлюз для отправки сообщений в WhatsApp с сайта. Он платный. Можно использовать в php скриптах. Подходит для массовой рассылки одно и того же сообщения пользователям/клиентам. Или для уведомлений о каком-нибудь событии(к примеру: отработал cron по расписанию.)
2. Второй вариант. Готовые плагины
В интернете очень много различных WhatsApp плагинов для WordPress. Что бы вы не тратили время на поиск и тестирование, рекомендую вам плагин WhatsApp Contact Button 2.0
В настоящее время WhatsApp считается одним из лучших приложений для обмена сообщениями в мире и используется многими людьми. Использование мессенджеров стало новым прорывом для компаний в сфере общения с клиентами. А знаешь почему? Клиенты не всегда готовы ждать информации по электронной почте или по телефону, им требуется мгновенное обслуживание, мгновенный ответ и информация. И WhatsApp – один из самых привлекательных каналов связи: более высокая скорость открытия и больше доверия.
Рынок разработки чат-ботов для WhatsApp быстро развивается. Это руководство для программистов поможет сделать первый шаг в создании бота.
Я расскажу вам, как отправить сообщение WhatsApp на PHP с помощью Chat API. Кстати, вы можете посмотреть видео версию данной статьи.
Для начала
Убедитесь, что в вашей локальной среде разработки установлен PHP.
Создайте свою учетную запись в Chat-Api. Это бесплатно! После этого вы будете перенаправлены на панель администратора, где будет создан ваш ключ.
Перейдите в свой личный аккаунт и получите там QR-код. Затем откройте WhatsApp на своем мобильном телефоне, перейдите в «Настройки» -> WhatsApp Web -> Сканируйте QR-код.
Всё просто. Теперь используйте этот код:
$data = [ 'phone' => '79995253422', // Телефон получателя 'body' => 'Привет, Андрей!', // Сообщение ]; $json = json_encode($data); // Закодируем данные в JSON // URL для запроса POST /message $token = '83763g87x'; $instanceId = '777'; $url = 'https://api.chat-api.com/instance'.$instanceId.'/message?token='.$token; // Сформируем контекст обычного POST-запроса $options = stream_context_create(['http' => [ 'method' => 'POST', 'header' => 'Content-type: application/json', 'content' => $json ] ]); // Отправим запрос $result = file_get_contents($url, false, $options);
Вам нужно будет только заменить свой токен из своего личного аккаунта на переменную $token и номер инстанса (или ApiURL) Получить ключ API , попробуйте прямо сейчас!
Не стесняйтесь обратиться и поделиться своим опытом или задать любые вопросы.
Используемые источники:
- https://blog.maxgraph.ru/2019/07/11/otpravka-soobshheniya-s-sajta-v-whatsapp/
- https://ukit.top/scripts/skript_dlja_otpravki_soobshhenij_s_sajta_na_whatsapp
- https://cms3.ru/otpravka-soobshhenij-v-whatsapp-s-sajta/
- https://blog.chat-api.com/ru/manuals_and_tutorials/send-message-whatsapp-php-chat-api/