Demo area
Remember that you can do something awesome with wasap.js!
Source
(To be fair, there's a lot going behind the scenes, better take a look a the source code!)
Remember that you can <span data-whatsapp="5210000000000">do something awesome</span> with wasap.js!
wasap.init({
enableIf: true,
openCallback: function(url){
window.location = url;
},
elementCallback: function(el, wasap_send){
tippy(el, {trigger: 'manual', arrow: true, placement: 'bottom', hideOnClick: false, html: '#vuejs-template-init', interactive: true});
el._tippy.show();
App = new Vue({
el: '#vuejsapp',
template: '#vuejs-template',
data: {
status: 'initial',
whatsapp: {
message: ''
}
},
computed: {
initialStatus: function(){
return this.status == 'initial';
},
formStatus: function(){
return this.status == 'form';
},
endStatus: function(){
return this.status == 'end';
}
},
methods: {
start: function(){
if(this.status == 'initial'){
this.status = 'form';
setTimeout(()=>{
this.$refs.textarea.focus();
}, 50);
}
},
submit: function(){
if(!this.whatsapp.text){
alert('Please type something');
this.$refs.textarea.focus();
return;
}
this.status = 'end';
wasap_send({ text: this.whatsapp.text });
setTimeout(()=>{
el._tippy.hide();
}, 1500);
}
}
});
el.addEventListener('click', function(e){
e.preventDefault();
App.start();
});
}
})