[{"data":1,"prerenderedAt":28},["ShallowReactive",2],{"article:nuxt-js-whatsapp-card":3},{"_id":4,"_updatedAt":5,"author":6,"body":7,"bodyMarkdown":8,"categories":9,"contentFormat":12,"cover":13,"excerpt":24,"publishedAt":25,"readingMinutes":26,"slug":27,"title":15},"82464154-aff8-4473-ae0a-f2f0fda15e15","2026-10-21T15:47:34Z","Karytonn Oliveira",null,"Seja para conversão do **GoogleADS** ou simplesmente fornecer um meio de contato rápido para clientes, ter um botão de **WhatsApp** integrado ao site é indispensável nos dias de hoje.\n\nPor mais que pareça simples, fazer isso de forma que se adapte aos mais diversos casos de uso pode levar tempo, sendo assim, aproveito para compartilhar meu template que desenvolvi em **VueJS** \u002F **NuxtJS**.\n\n---\n\n**Para esse template iremos utilizar os seguintes recursos:**\n\n- Projeto em Vue JS ou Nuxt JS (suponho que já tenha)\n- Tailwind CSS - Estilização\n- Animate CSS - Animação (opcional)\n\n*Se desejar utilizar somente a estilização do componente, fique a vontade para copiar a parte do HTML\u002FCSS, que inclusive, já vou deixar separadinho [aqui](https:\u002F\u002Fgithub.com\u002FKarytonn\u002Fnuxtjs-whatsapp-card\u002Fblob\u002Fmain\u002Fwhatsapp.html).*\n\n## Mão na massa!\n\n\n1 ) A instalação do **Tailwind** CSS é super simples e você pode conferir o tutorial oficial [clicando aqui](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Finstallation\u002Fframework-guides)\n\n2 ) Os passos abaixo descrevem a instalação do **Animate CSS** em projetos Nuxt ou Vue\n\nPara usuários **npm**, adicione animate.css em seu projeto usando este comando:\n\n```bash\nnpm install animate.css --save\n```\n\nPara usuários de yarn\n\n```bash\nyarn add animate.css\n````\n\n**Importação com Nuxt JS:** no arquivo ***nuxt.config.js*** importe o CSS da seguinte forma:\n\n```javascript\ncss: ['animate.css\u002Fanimate.min.css']\n````\n\n**Importação com Vue JS:** Faça o import dentro do componente que iremos criar logo abaixo.\n\n```javascript\nimport 'animate.css'\n````\n\n3 ) Crie um componente vue em ***components\u002FWhatsAppCTA.vue***\n\n4 ) Em seu componente substitua o conteúdo entre a tag **\u003Ctemplate>...\u003C\u002Ftemplate>** pelo código abaixo.\n\n```html\n\u003Cdiv class=\"fixed right-6 bottom-6\">\n    \n    \u003Ctransition \n      enter-active-class=\"animate__animated animate__fadeInRight\"\n      mode=\"out-in\"\n    >\n      \u003C!-- CARD TO SEND MESSAGE -->\n      \u003Cdiv v-if=\"isOpen\">\n        \u003Cdiv class=\"w-96 max-w-[90vw] rounded-3xl overflow-hidden shadow-2xl shadow-[#075E54]\u002F50 bg-[#E7E7E7]\">\n          \n          \u003C!-- Header and close button -->\n          \u003Cdiv class=\"h-20 p-5 flex items-center justify-between gap-4 bg-[#25D366]\">\n            \u003Cdiv class=\"flex items-center gap-3\">\n              \u003Cimg class=\"w-7 h-28\" src=\"@\u002Fassets\u002Ficon\u002Fheader\u002Fwhatsapp.svg\" alt=\"WP\">\n              \u003Cp class=\"text-lg font-medium text-white\">WhatsApp\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cbutton @click=\"isOpen = false\" class=\"hover:rotate-12 hover:scale-110\" title=\"Fechar\">\n              \u003Cimg src=\"@\u002Fassets\u002Ficon\u002Fclose.svg\" alt=\"Fechar\" class=\"w-8 h-8\">\n            \u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n\n\n          \u003C!-- Message input -->\n          \u003Cdiv class=\"p-4 py-6\">\n            \u003Cinput type=\"text\" name=\"message\" id=\"message\" v-model=\"form.message\" maxlength=\"140\" title=\"Mensagem\"\n              class=\"w-full px-4 py-4 rounded-full text-sm border-none text-[#075E54]\">\n          \u003C\u002Fdiv>\n\n\n          \u003C!-- Send button -->\n          \u003Cdiv class=\"w-full p-4 flex justify-end\">\n            \u003Cbutton @click=\"goToWhatsAppChat\" id=\"send-whatsapp-message\" title=\"Enviar mensagem\"\n              class=\"px-5 py-2 rounded-full flex items-center justify-between gap-1 bg-[#25D366] hover:scale-105 hover:shadow-lg hover:shadow-[#075E54]\u002F30 transition-all duration-300\">\n              \u003Cp class=\"font-medium text-white\">Abrir Conversa\u003C\u002Fp>\n              \u003Cimg src=\"@\u002Fassets\u002Ficon\u002Fsend.svg\" alt=\"Enviar\">\n            \u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n\n\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n\n      \u003C!-- BUTTON TO OPEN SEND MESSAGE CARD -->\n      \u003Cbutton v-else @click=\"openWhatsAppCard\" id=\"open-whatsapp-card\" \n        class=\"w-16 h-16 rounded-full grid place-content-center hover:scale-105 transition-all duration-300 bg-[#25D366] shadow-xl shadow-[#075E54]\u002F20\" title=\"WhatsApp\">\n        \u003Cimg src=\"@\u002Fassets\u002Ficon\u002Fheader\u002Fwhatsapp.svg\" alt=\"WhatsApp\" class=\"w-8 h-8\">\n      \u003C\u002Fbutton>\n    \u003C\u002Ftransition>\n\n\n  \u003C\u002Fdiv>\n```\n\n5 ) Ainda no componente substitua a tag **\u003Cscript>...\u003C\u002Fscript>** pelo conteúdo abaixo\n\n```javascript\n\u003Cscript lang=\"ts\">\nimport Vue from 'vue';\n\n\nexport default Vue.extend({\n  data() {\n    return {\n      isOpen: false,\n      form: {\n        message: \"Falar com nossa equipe agora!\",\n        number: '5562988887777'\n      }\n    }\n  },\n  methods: {\n    openWhatsAppCard() {\n      this.form.message = \"Falar com nossa equipe agora!\"\n      this.isOpen = true\n      \u002F\u002F ... Dispare qualquer outra coisa aqui\n    },\n    goToWhatsAppChat() {\n      this.isOpen = false;\n      let message = (this.form.message === \"Falar com nossa equipe agora!\")? \" \" : this.form.message;\n      window.open(`https:\u002F\u002Fapi.whatsapp.com\u002Fsend?phone=${this.form.number}&text=${message}`, '_blank')\n      this.form.message = \"Falar com nossa equipe agora!\"\n      \u002F\u002F ... Dispare qualquer outra coisa aqui\n    }\n  }\n});\n\u003C\u002Fscript>\n````\n> **Caso não esteja utilizando TypeScript em seu projeto, remova `lang=\"ts\"` no inicio da tag `\u003Cscript>`**.\n    \n6 ) No objeto form dentro da função **`data( )`**, substitua os valores das propriedades conforme necessário.\n\n7 ) No método `openWhatsAppCard( )` substitua o valor da propriedade `this.form.message` pelo mesmo utilizado no objeto form da função `data( )`, faça o mesmo no método `goToWhatsAppChat( )`\n\n8 ) Para utilizar o componente com Nuxt basta fazer sua declaração na(s) página(s) ou no layout, com Vue puro faça a importação no App.vue.\n\n**Sim, isso é tudo! Seu componente de integração com o WhatsApp está pronto para uso.**\n\n[**Vou deixar aqui o código completo**](https:\u002F\u002Fgithub.com\u002FKarytonn\u002Fnuxtjs-whatsapp-card\u002Fblob\u002Fmain\u002FWhatsAppCTA.vue) e você pode simplesmente copiar e colar fazendo as devidas adequações.\n\nQuer ver uma demostração, [**esse é o site de um cliente real**](https:\u002F\u002Fwww.procopioeoliveira.com.br\u002F) onde implementamos esta funcionalidade.\n\n---\n\nSe isso te ajudou de alguma forma, não deixe de curtir e compartilhar esse artigo 😉\n\n---\nah... qualquer coisa conte comigo!\n[LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fkarytonn\u002F)\n[GitHub](https:\u002F\u002Fgithub.com\u002FKarytonn)\n[Instagram](https:\u002F\u002Fwww.instagram.com\u002Fkarytonn.dev\u002F)\n[Twitter](https:\u002F\u002Ftwitter.com\u002Fkarytonn)\n[www.karytonn.dev](https:\u002F\u002Fkarytonn.dev",[10,11],"frontend","nuxt","markdown",{"_type":14,"alt":15,"asset":16},"image","Nuxt JS - WhatsApp Card",{"metadata":17,"url":23},{"dimensions":18},{"_type":19,"aspectRatio":20,"height":21,"width":22},"sanity.imageDimensions",1.7777777777777777,720,1280,"https:\u002F\u002Fcdn.sanity.io\u002Fimages\u002Fienkui2f\u002Fproduction\u002F69c31048b27484d97bb985f8884c06ef5424d28b-1280x720.jpg","Seja para conversão do **GoogleADS** ou simplesmente fornecer um meio de contato rápido para clientes, ter um botão de **WhatsApp** integrado ao site é indispensável nos dias de hoje.","2022-12-02T15:28:00.000Z",6,"nuxt-js-whatsapp-card",1792598773318]