Venom Button Demo

├── .DS_Store ├── LICENSE ├── README.md ├── assets ├── avatar.jpg ├── theme-black.png ├── theme-blue.png ├── theme-default.png ├── theme-red.png ├── whatsapp.png └── whatsapp.svg ├── index.html ├── venom-button.min.css └── venom-button.min.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ORKESTRAL 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Venom Button WhatsApp 2 | 3 | This is a very simple floating WhatsApp button plugin for jQuery. 4 | 5 | It adds a floating-like button to your site that calls the [WhatsApp Click to Chat API](https://faq.whatsapp.com/en/26000030/). 6 | 7 | It will automatically begin a WhatsApp chat with the number set when the user clicks the button. 8 | 9 | You an also activate a fake chat window with a customized message where the user can input their reply before opening WhatsApp. 10 | 11 | ## Installing 12 | 13 | Link the files to your html (make sure you load the files after jQuery) 14 | 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | 21 | ## How to use it 22 | 23 | Create a div element and select it with jQuery, then call the plugin using the function `$().venomButton([options])`. 24 | 25 | ```html 26 | 27 |

28 | 29 | 36 | ``` 37 | ### Fake Chat Window 38 | 39 | Enable a little fake chat window floating above the button: 40 | 41 | ```js 42 | $('#myDiv').venomButton({ 43 | phone: '5521990000000', 44 | chatMessage: 'Hi there 👋

How can I help you?', 45 | showPopup: true 46 | }); 47 | ``` 48 | 49 |

50 | 51 | ### Customization 52 | 53 | You can customize the appearance of the button and the chat window: 54 | 55 | ```js 56 | $('#myDiv').venomButton({ 57 | phone: '5521990000000', 58 | message: "I'd like to order a pizza", 59 | chatMessage: 'Hi there 👋

How can I help you?', 60 | showPopup: true, 61 | avatar: './assets/avatar.jpg', 62 | position: "right", 63 | headerColor: '#033E8C', 64 | buttonColor: '#033E8C', 65 | linkButton: false, 66 | showOnIE: false, 67 | nameClient: "Joe Dutra", 68 | headerTitle: 'Commercial Sales', 69 | }); 70 | ``` 71 |

72 | 73 |

74 | 75 |

76 | 77 | 78 | 79 | ### Options 80 | 81 | | option | value | default | description | 82 | |---------------------|-----------------------------------------------|--------------------------|-------------| 83 | | phone | `string` | `''` | WhatsApp [intenational number](https://faq.whatsapp.com/en/general/21016748) which will receive the message. 84 | | message | `string` | `''` | Message to be sent. If `showPopup` is `true`, the input will be populated with this message. 85 | | position | `'left'` | `'right'` | `'left'` | Position of the button the screen. 86 | | nameClient | `string` | `'Name Client'` | Set name of clint in fake chat. 87 | | chatMessage | `string` | `'Hi there 👋

How can I help you?'` | Message to be shown as a received message in the fake chat. 88 | | showPopup | `bool` | `false` | Show a fake chat popup when the user hovers (on desktop) or clicks the button (on mobile). 89 | | linkButton | `bool` | `false` | Put the link on the button so that when clicked it also sends the user to whatsapp 90 | | autoOpenTimeout | `Number` | `0` | Set an amount of time in milliseconds for the popup to open automaticaly. 91 | | headerColor | any css color `string` | `'rgb(9, 94, 84)'` | Background color of the popup window title bar. 92 | | headerTitle | `string` | `'WhatsApp Chat'` | Text to be displayed at the popup window title bar. 93 | | buttonImage | `jQuery` object | css selector `string` | [this one](whatsapp.svg) | Button background image. Must be an `img` or `svg` in order to be displayed properly. 94 | | avatar | `jQuery` object | css selector `string` | [this one](avatar.jpg) | Set avatar image of fake chat. Must be an `img` or `svg` in order to be displayed properly. 95 | | zIndex | `Number` | `string` | none | Overrides `.venom-button` div z-index. Use a z-index css property value. 96 | | showOnIE | `boolean` | `true` | Whether to show or not the button on IE (recommended, since IE does not support WhatsApp Web). 97 | | size | `string` (Any css option valid for width and height properties) | `'72px'` | The size of the button 98 | | backgroundColor | Any css color `string` | `'rgb(9, 94, 84)'` | The button backgrund color. 99 | -------------------------------------------------------------------------------- /assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/avatar.jpg -------------------------------------------------------------------------------- /assets/theme-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/theme-black.png -------------------------------------------------------------------------------- /assets/theme-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/theme-blue.png -------------------------------------------------------------------------------- /assets/theme-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/theme-default.png -------------------------------------------------------------------------------- /assets/theme-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/theme-red.png -------------------------------------------------------------------------------- /assets/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orkestral/venom-button/9829eb09b2ea51bcd3018ca0977512540b85c1af/assets/whatsapp.png -------------------------------------------------------------------------------- /assets/whatsapp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Venom Button Demo 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 | 20 | 38 | 39 | -------------------------------------------------------------------------------- /venom-button.min.css: -------------------------------------------------------------------------------- 1 | .venom-button{font:400 normal 15px/1.3 -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;position:fixed;bottom:15px;left:15px;font-size:14px;transition:bottom .2s}.venom-button .venom-button-button{position:relative;border-radius:50%;box-shadow:1px 1px 4px rgba(60,60,60,.4);transition:box-shadow .2s;cursor:pointer;overflow:hidden}.venom-button .venom-button-button img,.venom-button .venom-button-button svg{position:absolute;width:100%;height:auto;object-fit:cover;top:50%;left:50%;transform:translate3d(-50%,-50%,0);border-radius:50%}.venom-button:hover{bottom:17px}.venom-button:hover .venom-button-button{box-shadow:1px 2px 8px rgba(60,60,60,.4)}.venom-button .venom-button-popup{border-radius:6px;background-color:#e5ddd5;position:absolute;overflow:hidden;padding:0;box-shadow:1px 2px 8px rgba(60,60,60,.25);width:0;height:0;bottom:0;opacity:0;transition:bottom .1s ease-out,opacity .2s ease-out;transform-origin:bottom}.venom-button .venom-button-popup .drfHxL{position:absolute;top:8px;right:8px;width:20px;height:20px;opacity:.4;cursor:pointer;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;transition:all .3s ease 0s;outline:transparent}.venom-button .venom-button-popup .kdxbgZ{color:#111;display:flex;-webkit-box-align:center;align-items:center;padding:24px 20px}.venom-button .venom-button-popup .drfHxL::before{transform:rotate(45deg)}.venom-button .venom-button-popup .drfHxL::after{transform:rotate(-45deg)}.venom-button .venom-button-popup .drfHxL::after,.venom-button .venom-button-popup .drfHxL::before{content:"";position:absolute;width:12px;height:2px;background-color:#fff;display:block;border-radius:2px}.venom-button .venom-button-popup .eZEgcx{width:52px;height:52px;display:block;position:relative;flex-shrink:0}.venom-button .venom-button-popup .lngbRu{min-width:100%;height:100%;flex-shrink:0;background-size:cover;background-position:center center;background-repeat:no-repeat}.venom-button .venom-button-popup .izlSME{height:100%;width:100%;position:relative;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;overflow:hidden;border-radius:50%}.venom-button .venom-button-popup .izlSME::after{top:0;left:0;right:0;bottom:0;position:absolute;content:"";border-radius:50%;border-width:1px;border-style:solid;border-color:rgba(0,0,0,.1);border-image:initial;overflow:hidden}.venom-button .venom-button-popup .ewIAEB::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(./assets/whatsapp.png)}.venom-button .venom-button-popup .cWUfUj{display:flex;z-index:1}.venom-button .venom-button-popup .acKCA{font-size:13px;font-weight:700;line-height:18px;color:rgba(0,0,0,.4)}.venom-button .venom-button-popup .dPhWdq{text-align:right;margin-top:4px;font-size:12px;line-height:16px;color:rgba(17,17,17,.5);margin-right:-8px;margin-bottom:-4px}.venom-button .venom-button-popup .hOnFlx{font-size:14px;line-height:19px;margin-top:4px;color:#111}.venom-button .venom-button-popup .ewIAEB{background-color:#e6ddd4;position:relative;max-height:382px;padding:20px 20px 20px 10px;overflow:auto}.venom-button .venom-button-popup .iNguXd{background-color:#fff;width:52.5px;height:32px;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;margin-left:10px;opacity:0;z-index:1;box-shadow:rgba(0,0,0,.13) 0 1px .5px;border-radius:16px;transition:all .1s ease 0s}.venom-button .venom-button-popup .dSUAOZ{background-color:#fff;position:relative;opacity:0;transform-origin:center top;z-index:2;box-shadow:rgba(0,0,0,.13) 0 1px .5px;margin-top:4px;margin-left:-54px;max-width:calc(100% - 66px);padding:7px 14px 6px;border-radius:0 8px 8px;transition:all .3s ease 0s}.venom-button .venom-button-popup .eZEgcx::before{content:"";bottom:0;right:0;width:12px;height:12px;box-sizing:border-box;background-color:#4ad504;display:block;position:absolute;z-index:1;border-radius:50%;border-width:2px;border-style:solid;border-color:#095e54;border-image:initial}.venom-button .venom-button-popup .hhASjW{margin-left:16px;margin-right:16px}.venom-button .venom-button-popup .ioFWLq{font-size:13px;line-height:18px;margin-top:4px;color:#fff}.venom-button .venom-button-popup .hDGnqR{font-size:16px;font-weight:700;line-height:20px;color:#fff}.venom-button .venom-button-popup .hqsrSh{margin-left:8px;margin-right:8px;z-index:1;color:#fff}.venom-button .venom-button-popup .jwwAjt{color:#fff;font-size:15px;font-weight:700;line-height:20px;cursor:pointer;position:relative;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;appearance:none;padding:8px 12px;border-radius:20px;border-width:initial;border-style:none;border-color:initial;border-image:initial;background:#4fce5d;margin:20px;overflow:hidden}.venom-button .venom-button-popup .jwwAjt::before{content:"";position:absolute;display:block;opacity:0;transform:scale(1);background-color:#000;z-index:0;width:10px;height:10px;bottom:-5px;transition:all .2s ease 0s;border-radius:20px}.venom-button .venom-button-popup .jkaHSM{width:16px;height:16px;fill:#fff;z-index:1;flex:0 0 16px}.venom-button .venom-button-popup svg{width:20;height:20;fill-rule:evenodd;clip-rule:evenodd}.venom-button .venom-button-popup svg:not(:root){overflow:hidden}.venom-button .venom-button-popup.active{box-shadow:rgba(0,0,0,.1) 0 12px 24px 0;display:flex;flex-direction:column;width:360px;background-color:#fff;transform:translate3d(0,0,0);opacity:1;pointer-events:all;visibility:visible;touch-action:auto;margin-bottom:96px;position:fixed;bottom:20px;height:auto;right:0;left:auto;margin-right:20px;border-radius:10px;overflow:hidden;transition:opacity .3s ease 0s,margin .3s ease 0s,visibility .3s ease 0s}.venom-button .venom-button-popup .venom-button-message{background-color:#fff;padding:8px;border-radius:0 5px 5px 5px;box-shadow:1px 1px 1px rgba(0,0,0,.15);opacity:0;transition:opacity .2s}.venom-button .venom-button-popup.active .venom-button-message{opacity:1;transition-delay:.2s}.venom-button .venom-button-popup .venom-button-head{text-align:right;color:#fff;margin:0 -15px 10px -15px;padding:6px 12px;display:flex;justify-content:space-between;cursor:pointer}.venom-button .venom-button-input-message{background-color:#fff;margin:10px -15px -15px -15px;padding:0 15px;display:flex;align-items:center}.venom-button .venom-button-input-message textarea{border:1px solid #ccc;border-radius:4px;box-shadow:none;padding:8px;margin:10px 20px 30px;width:100%;outline:0;max-width:100%;font-family:inherit;font-size:inherit;resize:none}.venom-button .venom-button-btn-send{position:relative;top:-10px;left:-10px;font-size:0;cursor:pointer} -------------------------------------------------------------------------------- /venom-button.min.js: -------------------------------------------------------------------------------- 1 | function newTime(){function pad(s){return s<10?"0"+s:s}var date=new Date;return[date.getHours(),date.getMinutes()].map(pad).join(":")}!function($){function isInternetExplorer(){var userAgent=window.navigator.userAgent;return userAgent.indexOf("MSIE")>=0||userAgent.match(/Trident.*rv\:11\./)}function mobilecheck(){var check=!1,a;return a=navigator.userAgent||navigator.vendor||window.opera,(/(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)))&&(check=!0),check}$.fn.venomButton=function(options){var settings=$.extend({phone:"",message:"",chatMessage:"Hi there 👋

How can I help you?",size:"72px",buttonColor:"rgb(9, 94, 84)",position:"left",linkButton:!1,showPopup:!1,showOnIE:!0,autoOpenTimeout:0,headerColor:"rgb(9, 94, 84)",avatar:"./assets/avatar.jpg",nameClient:"Name Client",headerTitle:"WhatsApp Chat",zIndex:0,buttonImage:"./assets/whatsapp.svg"},options),isMobile=mobilecheck();this.addClass("venom-button");var $button=$(document.createElement("div")),$buttonImageContainer=$(document.createElement("div")),$popup=$(document.createElement("div")),$header=$(document.createElement("div")),$popupMessage=$(document.createElement("div")),$btnSend=$(document.createElement("div")),$inputMessage=$(document.createElement("div"));if($buttonImageContainer.addClass("venom-button-button-image"),$button.addClass("venom-button-button").append(`

`).css({width:settings.size,height:settings.size,"background-color":settings.buttonColor}),isInternetExplorer()&&!settings.showOnIE||$button.append($buttonImageContainer).appendTo(this),$button.on("click",(function(){isMobile&&settings.showPopup?openPopup():settings.linkButton&&sendWhatsappMessage()})),settings.showPopup){var $textarea=$(document.createElement("textarea")),$closeBtn=$(document.createElement("div")),$sendIcon=$('');function openPopup(){$popup.hasClass("active")||($popup.addClass("active"),$textarea.focus())}$popup.addClass("venom-button-popup"),$closeBtn.addClass("drfHxL"),$header.addClass("kdxbgZ").css("background",settings.headerColor),$popupMessage.addClass("ewIAEB"),$inputMessage.addClass("venom-button-input-message"),$btnSend.addClass("venom-button-btn-send"),$popupMessage.append(`\n

${settings.nameClient}

${settings.chatMessage}

${newTime()}

\n `),$textarea.val(settings.message),settings.chatMessage||$popupMessage.hide(),$header.append(`

${settings.nameClient}

${settings.headerTitle}

`),$btnSend.append($sendIcon),$inputMessage.append($textarea,$btnSend),$closeBtn.append('\n

\n '),$popup.append($closeBtn,$header,$popupMessage,$inputMessage).appendTo(this),$closeBtn.click((function(){$popup.removeClass("active")})),$button.click((function(){$popup.toggleClass("active")})),$textarea.keypress((function(event){settings.message=$(this).val(),13!=event.keyCode||event.shiftKey||isMobile||(event.preventDefault(),$btnSend.click())})),$btnSend.click((function(){settings.message=$textarea.val(),sendWhatsappMessage()})),this.mouseenter((function(){openPopup()})),settings.autoOpenTimeout>0&&setTimeout((function(){openPopup()}),settings.autoOpenTimeout)}function sendWhatsappMessage(){var apilink="http://";apilink+=isMobile?"api":"web",apilink+=".whatsapp.com/send?phone="+settings.phone+"&text="+encodeURI(settings.message),window.open(apilink)}settings.zIndex&&$(this).css("z-index",settings.zIndex),"right"===settings.position&&(this.css({left:"auto",right:"15px"}),$popup.css("right","0"))}}(jQuery); --------------------------------------------------------------------------------