wasap.js • Demos

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="5215585420898">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();
    });
  }
})

More demos

  1. Basic
  2. Predefined message
  3. Enable on all platforms
  4. Multiple elements
  5. Prompt for a message
  6. Change destination number on the fly
  7. Advanced demo