Send a message to Whatsapp via site

Asked

Viewed 83,416 times

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.

  • 1

    It doesn’t exist because it violates terms of use of the application.

  • 1

    Enjoy and read this answer

  • I believe you can find the answer you seek in that post.

  • 2

    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

  • 2

    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.

  • 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/

  • 4

    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).

  • 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

  • 1

    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!

  • 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.

Show 5 more comments

1 answer

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 WhatsApp to send it.

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:

  • 1: before the user uses the WhatsApp Web
  • 2: that the user has the application WhatsApp on your mobile device

This 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:

inserir a descrição da imagem aqui

On the website the interface will show the user the number and the text thus requiring confirmation of the action...

inserir a descrição da imagem aqui

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

  • 2

    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

  • 1

    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?

  • 1

    @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".

  • 1

    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

You are not signed in. Login or sign up in order to post.