Adding whatsapp button next to cellphone numbers

ERPNext Selling/CRM
, , ,
1

Our customer doc_type has a cellphone field.

I’d like to add a whatsapp button next to it and when I click this button, whatsapp will open and start a chat with the number in the cellphone field.

2

I have accomplished this and I’d like to describe here because it may help someone else.

Steps:

  1. Adding the button in the doc_type and relate it to a function in the client side script
    a. Insert a field with button type and pay attention to the name of the button (ex: btn_whatsapp)

    image
    image1469×306 22.9 KB

    b. Add any label like “call number from whatsapp app”. (mine is in portuguese)

  2. The label will appear when/if the whatsapp image logo fails to load
    image

  3. Find a whatsapp logo in the web and upload it into your public files in erpnext
    example: /files/logo-whatsapp.png
    The image you choose will substitute the label. My example:
    image

  4. Open the client_script for your doc_type and add the following function:

frappe.ui.form.on('Customer',  {
    
    //... [others events of ours...]

    // will be triggered when the page is being loaded
    onload: function(frm) {
        set_whatsapp_logo(frm);
    }
}


// add a logo instead of button's label
var set_whatsapp_logo = function(frm) {
    setTimeout(function() {
        let btn = frm.page.wrapper.find('button.btn.btn-xs.btn-default[data-fieldname="btn_whatsapp"]')
        btn.html('<img src="/files/logo-whatsapp.png" alt="logo whatsapp" width="16" height="16">');
    }, 500);
};

// Function linked with the button: btn_whatsapp that make the magic
frappe.ui.form.on('Customer', 'btn_whatsapp', function(frm) {
    
     if (frm.doc.cellphone) { 
            let prefix = "https://wa.me/55";
            let url = prefix + frm.doc.cellphone.replace(/\D/g, '');
            window.open(url, '_blank');
        }
    else {
        msgprint('cellphone not provided!')
    }
});
1 Like