Отправка сообщения в WhatsApp без добавления контакта

78
.
seg0ro
Let Mortal Kombat begin
Иногда по долгу работы сталкиваюсь с необходимостью отправлять сообщения в WhatsApp, но нет желания добавлять контакт ради одного-двух сообщений. Погуглив, я нашёл возможность создавать чат с помощью ссылки вида api.whatsapp.com/send?phone=... где ... - это номер телефона без знака + в международном формате. Но вводить такое каждый раз в адресную строку долго, и поэтому было решено написать небольшую страничку, в которую было бы удобно вводить только номер, а по нажатию на кнопку был бы переход в чат.
Вот ссылка на пример, а ниже будет немного кода.
<!DOCTYPE html>
<html>
  <head>
    <meta http–equiv="Content–Type" content="text/html; charset=UTF–8">
    <meta name="viewport" content="width=device–width, initial–scale=1, shrink–to–fit=no">
    <title>Написать в WhatsApp</title>
    <style>
      body {align–items: center; background–color: #f8f9fa; display: flex; font–family: Roboto,sans–serif; font–size: 1.5rem; height: 100vh; justify–content: center; line–height: 1.3; margin: 0;}
      form {position: relative;}
      input, button {border: 1px solid black; padding: 0.5rem;}
      button {background–color: #01e675; color: #ffffff; font–weight: bolder;}
      div {opacity: 0; font–size: 0.75rem; margin–top: 0.5rem; position: absolute; text–align: center; transition: 1s; width: 100%}
      input:focus ~ div {opacity: 1;}
    </style>
  </head>
  <body>
    <form action="https://api.whatsapp.com/send?" method="get">
      <label for="phone">Номер</label><br>
      <input type="tel" name="phone" autocomplete="off" pattern="7[0–9]{10}" placeholder="7..." required /> <button>Написать</button>
      <div>7, затем 10 цифр номера без пробелов и тире</div>
    </form>
  </body>
</html>

Страница с минимальным оформлением, если вы живёте не в России, то цифру 7 нужно заменить тут pattern="7[0-9]{10}", тут placeholder="7..." и тут 7, затем... на нужную.
Поскольку используется только html+css, то страницу можно сохранить на устройство и иметь к ней доступ всегда.
Оригинальная статья
Всего: 1