search

rafaelbotazini / floating-whatsapp

This is a simple floating WhatsApp button plugin for jQuery.
MIT License
268 stars 218 forks source link

Replace whatsapp image #5

Closed cargallo closed 6 years ago

cargallo commented 6 years ago

Hi, nice job! How can I replace the whatsapp image properly? I saw the js code and encounter that the line that sets the buttonImage is rather complex? Why didn't you just put the svg image that is in the repository? Tnx in advance!

rafaelbotazini commented 6 years ago

Hi, thank you for using this plugin!

You can replace the image with any img or svg you want.

Let's say you want to change the default icon with a local image named my-custom-icon.png:

$('.floating-wpp').floatingWhatsApp({
  buttonImage: '<img src="my-custom-icon.png" />'
})

The plugin creates a jQuery object with this img string and appends it to the button. In fact you can put any element that jQuery can create an object from, like a DOM node, for example: 

var myImage = document.createElement('img')
myImage.src = 'my-custom-icon.png'

$('.floating-wpp').floatingWhatsApp({
  buttonImage: myImage
})

// What happens behind the scenes: 
// ... $button.append($(buttonImage))

Why didn't you just put the svg image that is in the repository?

I did (kinda). I just copied the XML from the svg. This way, using the default configuration you don't need to have the actual svg file from the repository.