{"_id":"@carlos8a/react-whatsapp-floating-button","_rev":"7-994d9ea79c5402415d5b6fd5d1b1a210","name":"@carlos8a/react-whatsapp-floating-button","dist-tags":{"latest":"1.1.5"},"versions":{"0.0.1":{"name":"@carlos8a/react-whatsapp-floating-button","version":"0.0.1","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"contact@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@0.0.1","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"8df730c37aea2ed2c91c5a73aa637dcabd445e44","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-0.0.1.tgz","fileCount":10,"integrity":"sha512-fmajGHLEPYc4DVmc4jVKxmif7UXqZbqAAv0eN4C9yrXfnJe8/fdZvILy9oZVcDRKD9g10ofg/+TGQv2SSpHcUA==","signatures":[{"sig":"MEUCIQDk7jYQ7fBQCAHWuhXDMPHFgrhWglZIBuK2Xh6u0Cd5MAIgXE8siqPeMwp81wXXD4rCG/JLycJiHWS4T1RE6g6t5lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344436},"main":"dist/react-whatsapp-floating-button.js","types":"./dist/index.d.ts","module":"dist/react-whatsapp-floating-button.mjs","engines":{"node":">=18"},"exports":{".":{"import":"./dist/react-whatsapp-floating-button.mjs","require":"./dist/react-whatsapp-floating-button.js"}},"gitHead":"e1815cacaa269601dd479fc8b9d52cce0eb89bc0","private":false,"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.2.4","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.11.1","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_0.0.1_1708301954829_0.07993576675883918","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@carlos8a/react-whatsapp-floating-button","version":"0.0.2","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"contact@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@0.0.2","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"4c22d29fcf65a78cb6d3dffc651a607b2ca01466","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-0.0.2.tgz","fileCount":11,"integrity":"sha512-IGM8Oc7uyeKa8rQGrrG2BUUjAyS7i0os9K4nSoggeUWVshAbnUew7J8wPbzC5Or1MedWoXkI30bqrrAEAfxUjg==","signatures":[{"sig":"MEYCIQDzFbGvgH+sPJYQw4IZSM8HAxAy5/qoD13ikGFpLsqr8wIhAJfzK+gj0dGzsqyQH9gHdtU31lYJOL1cMNYYKgfmPNTE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355963},"main":"dist/react-whatsapp-floating-button.js","types":"./dist/index.d.ts","module":"dist/react-whatsapp-floating-button.mjs","engines":{"node":">=18"},"exports":{".":{"import":"./dist/react-whatsapp-floating-button.mjs","require":"./dist/react-whatsapp-floating-button.js"}},"gitHead":"6630d69cd1d0ca9d7e6f14a4c07fce5d72322073","private":false,"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.2.4","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.11.1","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_0.0.2_1708307302500_0.6409428986139023","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@carlos8a/react-whatsapp-floating-button","version":"1.1.0","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@1.1.0","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"a873f424b7ce35e79eec4403086bbbf6a30c7cad","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.0.tgz","fileCount":11,"integrity":"sha512-7da4QBRux0t5fp7Jmb46a5NvKg9xdqUP0f3Rnk7PdQoPc7EJyVqX+h5Ay7NJMQyRgOXsmgFc6mKBZFvPwRJVxg==","signatures":[{"sig":"MEQCIB0+NbokdFex11pc2oedtAC5wDyyqrToXKancu+KeknpAiBYtgXnQ4hr61Ffmh9NxQ8rxab+8P7D4YuJE8ztop5czQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357817},"main":"dist/react-whatsapp-floating-button.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"dist/react-whatsapp-floating-button.js","engines":{"node":">=18"},"exports":{".":{"import":"./dist/react-whatsapp-floating-button.js","require":"./dist/react-whatsapp-floating-button.umd.cjs"}},"private":false,"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.8.3","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.15.1","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_1.1.0_1728261758405_0.2457108373513155","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@carlos8a/react-whatsapp-floating-button","version":"1.1.1","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@1.1.1","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"41a3e768cf0f114e3bcbfbdd693066e9f1c14322","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.1.tgz","fileCount":11,"integrity":"sha512-RcWL9rWBxBi03r2ZIJbWki5lgmWfoECP5yxg8peDeI4qR+dPfLQbPk812RqcRYCSbVfqCKf6h+OgLsHzUZczBg==","signatures":[{"sig":"MEYCIQD3fYwxY1rmx+mjn62C/wgIgcetelnar8WU3Sh+ke31yAIhAO3Dy27C/tjXjkgCnOJWnvDwrSiD8+Pp3m7mMSXEL68M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352938},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"private":false,"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.8.3","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.15.1","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_1.1.1_1728270208236_0.11119566891906096","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"@carlos8a/react-whatsapp-floating-button","version":"1.1.2","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@1.1.2","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"f434fc7888bf5aee6fcc280efa3e70fae49e92f0","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.2.tgz","fileCount":11,"integrity":"sha512-BEy2iPCtlYNj567YmKJABJcqmItIVHXClwgge/ekO/pVST2Qe3BLX+VEdrGUBRDZolhV9j9AIb5qxl/R6xjwVw==","signatures":[{"sig":"MEUCIQCW5MFzQTys1zEjfsWFXf4okv+bsuZFvuF3/ftAs4r6KAIgJAlrcwKq+4eXG/dTdPxkjFXej6Ga3S9KZKAhv0D/hAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354193},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"private":false,"scripts":{"dev":"vite","prebuild":"shx rm -f tsconfig.json && shx cp tsconfig.build.json tsconfig.json","build:lib":"pnpm run prebuild && vite build && pnpm run postbuild","postbuild":"shx rm -f tsconfig.json && shx cp tsconfig.dev.json tsconfig.json","publish:lib":"pnpm run build:lib","delete:node_modules":"pnpm delete:node_modules_lock && shx rm -rf node_modules","delete:node_modules_lock":"shx rm -f package-lock.json yarn.lock pnpm-lock.yaml"},"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.8.3","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.15.1","_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","vite":"^5.1.1","jsdom":"^24.0.0","react":"^18.2.0","postcss":"^8.4.35","fs-extra":"^11.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","typescript":"^5.3.3","@babel/core":"^7.23.9","@types/node":"^20.11.17","lint-staged":"^15.2.2","@types/react":"^18.2.0","autoprefixer":"^10.4.17","babel-loader":"^9.1.3","@biomejs/biome":"1.9.3","vite-plugin-dts":"^3.7.2","@types/react-dom":"^18.2.0","vite-plugin-svgr":"^4.2.0","@vitejs/plugin-react":"^4.2.1","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_1.1.2_1728271551645_0.3658819629815293","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@carlos8a/react-whatsapp-floating-button","version":"1.1.3","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@1.1.3","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"374934fb1b8471d4d29ad942acf99ebcc5fee277","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.3.tgz","fileCount":11,"integrity":"sha512-+Lz7vQ60kOaEEFjGC7GNeCIvA8K4T91dhqM9AUzD5IhCl3oEO6vkoiVFVcRhVdBMeKrrGPJDwIFqZ9OKl9gT6A==","signatures":[{"sig":"MEUCIQCs8EVgiON5Dlo4e/OgKwVgLqU2ruaOoLYvM3xG102brAIgavlCcs7rQhR7UzTUnuQknwgEtEiyHtYuI08RnTCv2gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354193},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"private":false,"scripts":{"dev":"vite","prebuild":"shx rm -f tsconfig.json && shx cp tsconfig.build.json tsconfig.json","build:lib":"pnpm run prebuild && vite build && pnpm run postbuild","postbuild":"shx rm -f tsconfig.json && shx cp tsconfig.dev.json tsconfig.json","publish:lib":"pnpm run build:lib","delete:node_modules":"pnpm delete:node_modules_lock && shx rm -rf node_modules","delete:node_modules_lock":"shx rm -f package-lock.json yarn.lock pnpm-lock.yaml"},"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.8.3","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.15.1","_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","vite":"^5.1.1","jsdom":"^24.0.0","react":"^18.2.0","postcss":"^8.4.35","fs-extra":"^11.2.0","react-dom":"^18.2.0","prop-types":"^15.8.1","typescript":"^5.3.3","@babel/core":"^7.23.9","@types/node":"^20.11.17","lint-staged":"^15.2.2","@types/react":"^18.2.0","autoprefixer":"^10.4.17","babel-loader":"^9.1.3","@biomejs/biome":"1.9.3","vite-plugin-dts":"^3.7.2","@types/react-dom":"^18.2.0","vite-plugin-svgr":"^4.2.0","@vitejs/plugin-react":"^4.2.1","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_1.1.3_1728272172620_0.7738087028458678","host":"s3://npm-registry-packages"}},"1.1.4":{"name":"@carlos8a/react-whatsapp-floating-button","version":"1.1.4","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","_id":"@carlos8a/react-whatsapp-floating-button@1.1.4","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button#readme","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"dist":{"shasum":"047276f02d8e51c314f6e597883b52b566553f34","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.4.tgz","fileCount":11,"integrity":"sha512-dd9UmqTJLOygihgylSAsQMV6YJlqSaZbicshDfm2ddW3RAvue4zoBoe218SVGCf2W1IGPTyLrBQ5Uwg+6JadFw==","signatures":[{"sig":"MEUCIQDay75mG5IKD0YfEWDTaYMPvmqPMV6n9TFfulesC6q1uAIgNeejUOX4tzNlJiat853tjqfHekcT6eaB4w9Q5fMx8V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352948},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"}},"private":false,"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"repository":{"url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git","type":"git"},"_npmVersion":"10.8.3","description":"A react component to add a floating whatsapp button to your project","directories":{},"_nodeVersion":"20.15.1","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-whatsapp-floating-button_1.1.4_1728272462874_0.7896152523455364","host":"s3://npm-registry-packages"}},"1.1.5":{"name":"@carlos8a/react-whatsapp-floating-button","private":false,"version":"1.1.5","description":"A react component to add a floating whatsapp button to your project","type":"module","repository":{"type":"git","url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git"},"keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","main":"./dist/index.umd.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js","types":"./dist/index.d.ts"}},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_id":"@carlos8a/react-whatsapp-floating-button@1.1.5","_nodeVersion":"20.15.1","_npmVersion":"10.8.3","dist":{"integrity":"sha512-Jv8iF81g7TfYyD5pmy8qeBpJCJBrCOEf/6TcZH0obBarsGIbPh4rOGm2ys64305Y92upAsgrQvdYxB0TL9Ez3A==","shasum":"c77196e5a1e7f605c1786c92cbadffbb89757aa1","tarball":"https://registry.npmjs.org/@carlos8a/react-whatsapp-floating-button/-/react-whatsapp-floating-button-1.1.5.tgz","fileCount":11,"unpackedSize":357730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCWjidSpv3t9pD5nTx11JxQqgQC5IoUj1FmIKkqy5YnAiB6wir3HY6Kz1gbbCTUyx0vEK/ytffSvrAIpMkrRQiM6A=="}]},"_npmUser":{"name":"carlos8adev","email":"696return@gmail.com"},"directories":{},"maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-whatsapp-floating-button_1.1.5_1728272790684_0.9390405994850537"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-19T00:19:14.768Z","modified":"2024-10-07T03:46:31.103Z","0.0.1":"2024-02-19T00:19:15.022Z","0.0.2":"2024-02-19T01:48:22.750Z","1.1.0":"2024-10-07T00:42:38.694Z","1.1.1":"2024-10-07T03:03:28.446Z","1.1.2":"2024-10-07T03:25:51.910Z","1.1.3":"2024-10-07T03:36:12.895Z","1.1.4":"2024-10-07T03:41:03.157Z","1.1.5":"2024-10-07T03:46:30.921Z"},"bugs":{"url":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button/issues"},"author":{"name":"Carlos Ochoa","email":"hola@carlos8a.com"},"license":"MIT","homepage":"https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button","keywords":["react","react component","react typescript","whatsapp","floating whatsapp button","whatsapp button"],"repository":{"type":"git","url":"git+https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git"},"description":"A react component to add a floating whatsapp button to your project","maintainers":[{"name":"carlos8adev","email":"696return@gmail.com"}],"readme":"# ⚛️⚡ WhatsApp Floating Button Component for React\r\n\r\n<div align=\"center\">\r\n  <a href=\"https://www.npmjs.com/package/@carlos8a/react-whatsapp-floating-button\">\r\n    <img src=\"https://img.shields.io/npm/v/@carlos8a/react-whatsapp-floating-button.svg\" alt=\"NPM Version\" />\r\n  </a>\r\n  <img src=\"https://img.shields.io/bundlephobia/minzip/%40carlos8a%2Freact-whatsapp-floating-button\" alt=\"npm bundle size\" />\r\n  <img src=\"https://img.shields.io/github/license/CarlosUlisesOchoa/react-whatsapp-floating-button\" alt=\"GitHub License\" />\r\n  <br />\r\n</div>\r\n\r\n<p align=\"center\">\r\n    <img src=\"https://github.com/user-attachments/assets/ec0d415e-f149-42d3-9a8a-b459c8f4c56c\" alt=\"WhatsApp Floating Button GIF\" />\r\n</p>\r\n\r\n## Description\r\n\r\nThis React component offers an elegant WhatsApp floating button, serving as a bridge to the official WhatsApp application. It simulates a WhatsApp chat interface, allowing users to initiate conversations directly from your website. Upon clicking \"submit,\" users are redirected to WhatsApp with their message pre-filled, ready to continue the conversation. Ideal for enhancing customer support and engagement, this component simplifies the transition from web inquiries to WhatsApp communication using WhatsApp's API.\r\n\r\n## Screenshots\r\n\r\nThe WhatsApp Floating Button Component supports both light and dark modes, ensuring it can integrate seamlessly with your application's theme. Below are the mockups for each mode:\r\n\r\n| Light Mode | Dark Mode |\r\n|:----------:|:---------:|\r\n| ![Light Mode](https://github.com/user-attachments/assets/40164cdb-34c5-4b5e-a34a-8e356d75c6ed) | ![Dark Mode](https://github.com/user-attachments/assets/2fa9a880-d3e1-4919-9b56-1ed48ed55cc2) |\r\n\r\nToggle between the modes to provide a consistent user experience regardless of your app's theme.\r\n\r\n## Installation\r\n\r\nInstall the component using your preferred package manager:\r\n\r\n### npm\r\n\r\n```bash\r\nnpm install @carlos8a/react-whatsapp-floating-button\r\n```\r\n\r\n### pnpm\r\n\r\n```bash\r\npnpm install @carlos8a/react-whatsapp-floating-button\r\n```\r\n\r\n### Yarn\r\n\r\n```bash\r\nyarn add @carlos8a/react-whatsapp-floating-button\r\n```\r\n\r\n## Usage Example\r\n\r\nBelow is a basic example demonstrating how to integrate the WhatsApp floating button into your app:\r\n\r\n```jsx\r\nimport { FloatingWhatsApp } from '@carlos8a/react-whatsapp-floating-button';\r\n\r\nconst App = () => {\r\n  return (\r\n    <div>\r\n      <FloatingWhatsApp\r\n        phoneNumber='5215540000000' // Required\r\n        accountName='Carlos Ochoa' // Optional\r\n        avatar='/images/avatar.webp' // Optional\r\n        initialMessageByServer='Hi there! How can I assist you?' // Optional\r\n        initialMessageByClient='Hello! I found your contact on your website. I would like to chat with you about...' // Optional\r\n        statusMessage='Available' // Optional\r\n        startChatText='Start chat with us' // Optional\r\n        tooltipText='Need help? Click to chat!' // Optional\r\n        allowEsc={true} // Optional\r\n        // Explore all available props below\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n### Available Props\r\n\r\n| Prop                      |         Type          | Required | Description                                                                                                              | Default                          |\r\n|---------------------------|:---------------------:|:--------:|--------------------------------------------------------------------------------------------------------------------------|----------------------------------|\r\n| `phoneNumber`             |        String         |   Yes    | Phone number in [international format](https://faq.whatsapp.com/general/contacts/how-to-add-an-international-phone-number)| `5215540000000`                  |\r\n| `accountName`             |        String         |    No    | Account username                                                                                                         | `Account Name`                   |\r\n| `onClick`                 |       Function        |    No    | Callback fired on click                                                                                                  | `-`                              |\r\n| `onSubmit`                |       Function        |    No    | Callback fired on submit with the event passed                                                                           | `-`                              |\r\n| `onClose`                 |       Function        |    No    | Callback fired on close                                                                                                  | `-`                              |\r\n| `onLoopDone`              |       Function        |    No    | Callback called when notification loop is done                                                                           | `-`                              |\r\n| `onNotification`          |       Function        |    No    | Callback fired when a notification is triggered                                                                          | `-`                              |\r\n| `avatar`                  |        String         |    No    | Path to change user avatar using [static assets](https://create-react-app.dev/docs/adding-images-fonts-and-files/)       | `UI Face`                        |\r\n| `statusMessage`           |        String         |    No    | Text displayed below the account username                                                                                | `Typically replies within 1 hour`|\r\n| `initialMessageByServer`  |        String         |    No    | First message visitors receive                                                                                           | `Hello there! How can we help?`  |\r\n| `initialMessageByClient`  |        String         |    No    | Message that the user will send to your WhatsApp                                                                         | `Hello!, I got your contact from your website. I would like to chat with you about...` |\r\n| `startChatText`           |        String         |    No    | Text displayed inside the \"Start Chat\" button                                                                            | `Start chat with us`             |\r\n| `tooltipText`             |   String \\| `null`    |    No    | Text that will appear in the tooltip, adjacent to the WhatsApp button                                                    | `null`                           |\r\n| `messageDelay`            |        Number         |    No    | Delay before displaying `initialMessageByServer` (seconds)                                                               | `2`                              |\r\n| `notification`            |       Boolean         |    No    | Enables notifications (disabled after user opens the chat box)                                                           | `false`                          |\r\n| `notificationDelay`       |        Number         |    No    | Delay between notifications (seconds)                                                                                    | `60`                             |\r\n| `notificationLoop`        |        Number         |    No    | Number of times notifications loop                                                                                       | `0`                              |\r\n| `notificationStyle`       |    CSSProperties      |    No    | Inline style for notification                                                                                            | `{}`                             |\r\n| `notificationClassName`   |        String         |    No    | CSS class for notification indicator                                                                                     | `floating-whatsapp-notification` |\r\n| `allowClickAway`          |       Boolean         |    No    | Allows chat box to close when clicking outside                                                                           | `false`                          |\r\n| `allowEsc`                |       Boolean         |    No    | Allows chat box to close when pressing `Escape` key                                                                      | `false`                          |\r\n| `darkMode`                |       Boolean         |    No    | Enables dark style                                                                                                       | `false`                          |\r\n| `className`               |        String         |    No    | CSS class for the main wrapping `Div`                                                                                    | `floating-whatsapp`              |\r\n| `buttonClassName`         |        String         |    No    | CSS class for the button                                                                                                 | `floating-whatsapp-button`       |\r\n| `style`                   |    CSSProperties      |    No    | Inline style for the main wrapping `Div`                                                                                 | `{}`                             |\r\n| `buttonStyle`             |    CSSProperties      |    No    | Inline style for the button                                                                                              | `{}`                             |\r\n| `chatboxHeight`           |        Number         |    No    | Chat box height                                                                                                          | `320`                            |\r\n| `chatboxClassName`        |        String         |    No    | CSS class for the chat box                                                                                               | `floating-whatsapp-chatbox`      |\r\n| `chatboxStyle`            |    CSSProperties      |    No    | Inline style for the chat box                                                                                            | `{}`                             |\r\n\r\n### Development and Testing Files\r\n\r\nThe following files are intended solely for development and testing purposes and do not form part of the component's distribution:\r\n\r\n- `<root>/index.html` (used to test the component)\r\n- `<root>/src/**/*` (excluding `<root>/src/lib/**/*` which is the component)\r\n- `<root>/public/` (used to test the component)\r\n- `<root>/preparePublish.js` (prepares the component for npm publishing)\r\n\r\n## Building and Testing the Package\r\n\r\n**Note**: For anyone that just want to get and use the component, the [Installation](#installation) and [Usage Example](#usage-example) sections have got all you need 👍🏻.\r\n\r\nThis section is for developers who want to modify the component. Follow the steps outlined below to rebuild and test your changes locally.\r\n\r\n### Prerequisites\r\n\r\nMake sure you have Node.js (version 18 or higher) installed on your system. This project employs `pnpm` for efficient dependency management. If you don't have `pnpm`, install it with the following command:\r\n\r\n```bash\r\nnpm install -g pnpm\r\n```\r\n\r\n### Setting Up the Development Environment\r\n\r\n1. **Clone the Repository**: Get a copy of the project onto your local machine by cloning the GitHub repository.\r\n\r\n    ```bash\r\n    git clone https://github.com/CarlosUlisesOchoa/react-whatsapp-floating-button.git\r\n    cd react-whatsapp-floating-button\r\n    ```\r\n\r\n2. **Install Dependencies**: Use `pnpm` to install all the necessary dependencies. This ensures your environment is equipped with everything needed for building and testing the component.\r\n\r\n    ```bash\r\n    pnpm install\r\n    ```\r\n\r\n### Running a Local Development Server\r\n\r\nYou will be able to modify and see real-time changes due we are using Vite to dev and deploy.\r\n\r\nYou can run:\r\n\r\n```bash\r\npnpm run dev\r\n```\r\n\r\nNow you will be able to start enhancing or customizing this beautiful but always improveable component 😁.\r\n\r\n### Rebuilding the Library\r\n\r\nExecute the following command to build the library:\r\n\r\n```bash\r\npnpm run build:lib\r\n```\r\n\r\nThis script performs a series of tasks:\r\n\r\n- Clears the `dist` directory for a clean build.\r\n- Adjusts TypeScript configurations for the build.\r\n- Compiles the library using Vite into the `dist` folder, which will contain the production-ready code.\r\n- Resets TypeScript configurations after the build.\r\n\r\nThat's it. Now you can take a look at the ```dist``` directory where you'll find the bundled code.\r\n\r\n## Acknowledgements\r\n\r\n- Special thanks to [@awran5](https://github.com/awran5) for the [react-floating-whatsapp](https://github.com/awran5/react-floating-whatsapp) component, which served as a base for this enhanced version.\r\n- Gratitude to [@darwinva97](https://github.com/darwinva97) for the [PR](https://github.com/awran5/react-floating-whatsapp/pull/27) contributing improvements in accessibility and SEO through `aria-hidden` attribute modifications.\r\n\r\n### License\r\n\r\n[MIT License](LICENSE) © 2024\r\n","readmeFilename":"README.md"}