2
I wonder if there is how to send message to Whatsapp through website. Example: The customer is there on the site and there is a field to enter a message and click "send" and I receive the message on my Whatsapp.
2
I wonder if there is how to send message to Whatsapp through website. Example: The customer is there on the site and there is a field to enter a message and click "send" and I receive the message on my Whatsapp.
21
Interesting normal question from the point of view that there is possibility yes to write a message on a website and using the official mechanisms of
In a comment by @Gabriel Moodlight references the following post: Script that sends Whatsapp message? however it is an old post and as referenced in the first comments the following post: How to integrate the application with Whatsapp? [closed] has a more recent response and explains that the library Whatsapi was discontinued.
How then?
It is possible to use the endpoint "send" of the web interface of WhatsApp
or even the link send in the case of mobile access.
The valid parameters are phone and text may use both or only one.
Here we presume 2 paradigms:
WhatsApp Web
WhatsApp
on your mobile deviceThis approach is exactly the same as the endpoints used by various networks and large-volume websites on the web where the service provides a URL
for accesses via method GET
or POST
for sharing external content to the platform.
To use this endpoint in the WhatsApp Web
(or mobile) one can send only the text and this will cause the user to select from his contact list the number to which he will send or, set a number in international format (only numbers).
Either the message or the number should be encoded with URL-encode
.
An example that can be used in front-end:
// um número no formato internacional (ativo no WhatsApp)
let number = '55519xxxxxxxx'
// o texto ou algo vindo de um <textarea> ou <input> por exemplo
let msg = 'Um texto qualquer'
// montar o link (apenas texto) (web)
let target = `https://api.whatsapp.com/send?text=${encodeURIComponent(msg)}`
// montar o link (número e texto) (web)
let target = `https://api.whatsapp.com/send?phone=${encodeURIComponent(number)}&text=${encodeURIComponent(msg)}`
// montar o link (texto) (app)
let target `whatsapp://send?text=${encodeURIComponent(msg)}`
// montar o link (número e texto) (app)
let target `whatsapp://send?text=${encodeURIComponent(msg)}`
These examples can be used by a apication "web" (website) either by accessing a desktop or mobile browser.
If the access is via mobile device the browser will launch the application because of the protocol whatsapp://
already by the desktop access will go to the site.
This will not send a message directly. This will open the interface for user interaction.
Web example:
On the website the interface will show the user the number and the text thus requiring confirmation of the action...
Soon after will open the editor. Just click send and ready.
If the user is not authenticated on the site web.whatsapp.com he cannot proceed (send) and will be informed that you must authenticate in the application. On the device if the user does not have the application the browser will be presented a list of applications with which the system will try to open the protocol (usually bad is not standard).
To define the approach (URL or protocol) could simply check whether the access is mobile or not:
// fonte: http://detectmobilebrowsers.com/
let isMobile = (function(a) {
if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)) ) {
return true
} else {
return false
}
})(navigator.userAgent || navigator.vendor || window.opera);
// checar
if ( isMobile ) {
// usar o protocolo
} else {
// usar o URL
}
Whether to use a link or open a modal is at the programmer’s discretion.
using URL (link):
let a = document.createElement('a')
a.target = '_blank'
a.href = target // o link URL do api.whatsapp.com
a.click() // simular o evento de "click"
using window.open()
let h = 650,
w = 550,
l = Math.floor(((screen.availWidth || 1024) - w) / 2),
t = Math.floor(((screen.availHeight || 700) - h) / 2)
// definir
let options = `height=600,width=550,top=${t},left=${l},location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=0`
// abrir
let popup = window.open(target, 'self', options)
// forçar o focus()
if ( popup ) {
popup.focus()
}
Mobile browsers may have stricter restrictions when launching window.open()
so using a link might be more useful.
Cannot attach files with this method or add extra parameters!
Run the code below to test:
let phone = document.getElementById('phone')
let message = document.getElementById('message')
// buttons
let linkHandler = document.getElementById('by-link')
let popUpHandler = document.getElementById('by-popup')
// font:
let isMobile = (function(a) {
if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)) ) {
return true
} else {
return false
}
})(navigator.userAgent || navigator.vendor || window.opera)
const makeLink = function(mode) {
let mount = function() {
if ( isMobile ) {
let target = `whatsapp://send?`
if ( !!phone && phone.value !== '' ) {
target += `phone=${encodeURIComponent(phone.value)}&`
}
if ( !!message && message.value !== '' ) {
target += `text=${encodeURIComponent(message.value)}`
}
return target
} else {
let target = `https://api.whatsapp.com/send?`
if ( !!phone && phone.value !== '' ) {
target += `phone=${encodeURIComponent(phone.value)}&`
}
if ( !!message && message.value !== '' ) {
target += `text=${encodeURIComponent(message.value)}`
}
return target
}
}
let openLink = function() {
$('#console-container').append(`<span class="col px-0"><b>Link</b>: ${mount()}</span><br><br>`)
}
let openPopUp = function() {
let h = 650,
w = 550,
l = Math.floor(((screen.availWidth || 1024) - w) / 2),
t = Math.floor(((screen.availHeight || 700) - h) / 2)
// open popup
let options = `height=600,width=550,top=${t},left=${l},location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=0`
$('#console-container').append(`<span class="col px-0"><b>PopUp URL</b>: ${mount()}</span><br><span class="col px-0"><b>PopUp options</b>: ${options}</span><br><br>`)
}
switch (mode) {
case 'link':
openLink()
break
case 'popup':
openPopUp()
break
}
}
// events handler(s)
linkHandler.addEventListener('click', function(e) {
makeLink('link')
}, false)
popUpHandler.addEventListener('click', function(e) {
makeLink('popup')
}, false)
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- CONTAINER -->
<section class="container-fluid px-0 pt-5">
<div class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">
<form accept-charset="utf-8">
<div class="form-group mb-2">
<label>Phone (international)</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 fa fa-whatsapp"></span>
</div>
<input id="phone" type="phone" class="form-control rounded-0">
</div>
</div>
<div class="form-group mb-2">
<label>Message</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0 fa fa-pencil-square-o"></span>
</div>
<input id="message" type="text" class="form-control rounded-0">
</div>
</div>
<div class="form-group mb-2">
<label>Enviar</label>
<div class="col px-0">
<button id="by-link" type="button" class="btn btn-info">Link</button>
<button id="by-popup" type="button" class="btn btn-info">PopUp</button>
</div>
</div>
</form>
</div>
<div id="console-container" class="col col-sm-8 col-md-5 col-lg-4 mx-auto px-0 mb-5">
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
The above section runs on a sandbox
so I added the events to the simple "output"... to test realment through window.open()
or by simulating the event click()
: see this demo
The upload API is being created, but it’s for businesses. Link to the API: https://www.whatsapp.com/business/api Link to the registration form for use of the API (want approval from Facebook): https://www.facebook.com/business/m/whatsapp/business-api
guy found excellent, very enlightening, I’m trying to figure out if it’s like after the person click on the link, when opening on the mobile that is sent automatically without needing to click send, will be possible?
@Wpfan short answer: nay. User interaction is required so that the user can see the text and the recipient ... otherwise it would be an open/wide security breach for "Spamers".
I saw a desktop system doing this guy, a lead capture system doing this stop there, why I’m in the pursuit to find out how it was done!!! @Lauromoraes so I think it is possible somehow to create this bot!
Browser other questions tagged php javascript jquery api whatsapp
You are not signed in. Login or sign up in order to post.
It doesn’t exist because it violates terms of use of the application.
– Woss
Enjoy and read this answer
– user28595
I believe you can find the answer you seek in that post.
– Gabriel Moodlight
Hi, there is already a Whatsapp API: https://api.whatsapp.com/send?phone=15551234567 this is the legal way to do this, follow the link explaining how it works: https://faq.whatsapp.com/pt_br/android/26000030/? Category=5245251
– JonesSantos
Whether it is allowed to use a certain resource or not unknown, although information is never enough. I thank you for all the information and answers. I particularly thought mimimi the closure of this question, because as far as I know it is a question that seeks information about programming.
– Anderson Brunel Modolon
I found this method interesting. I did it a little differently, but it already adds the number to the contacts. For those who want to see more details, follow the link: https://lucianobragaweb.github.io/post/whatsapp-no-site/
– Luciano Braga
So far I do not understand the reason for the closure of this question, whose content is of legitimate interest to Fullstack Developers. (Voting to reopen).
– Allan Andrade
The upload API is being created, but it’s for businesses. Link to the API: https://www.whatsapp.com/business/api Link to the registration form for use of the API (want approval from Facebook): https://www.facebook.com/business/m/whatsapp/business-api
– Jhonatan Pereira
Tbm I found very mimimi the question to have been closed, because it is of great interest to programmers, including I am with this demand currently!
– WPfan
He also wants to understand why the question was closed, @Allanandrade. Until today it could be being improved, since a lot of new things were done in that time.
– Fernando Kosh