{"id":1547,"date":"2024-10-01T22:30:00","date_gmt":"2024-10-02T01:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/como-integrar-botao-whatsapp-wordpress\/"},"modified":"2025-08-23T21:50:54","modified_gmt":"2025-08-24T00:50:54","slug":"como-integrar-botao-whatsapp-wordpress","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/como-integrar-botao-whatsapp-wordpress\/","title":{"rendered":"Como integrar bot\u00e3o WhatsApp no WordPress"},"content":{"rendered":"\n<p>E a\u00ed, Kangaroozito! O aplicativo de mensagens WhatsApp \u00e9 um dos queridinhos dos brasileiros, sendo sem d\u00favida nenhuma o aplicativo de conversa mais utilizado no pa\u00eds. Por isso, tamb\u00e9m vem sendo muito adotado como um canal de atendimento por empresas de diversos segmentos. <\/p>\n\n\n\n<p>Sendo um dos canais mais usados (e at\u00e9 mesmo uma das prefer\u00eancias de contato pelos clientes, integrar essa ferramenta ao site, sobretudo o <a href=\"https:\/\/br.wordpress.org\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">WordPress<\/mark><\/a>, \u00e9 uma \u00f3tima forma de garantir que os seus clientes conseguir\u00e3o ser atendidos por seus operadores.<\/p>\n\n\n\n<p>Pensando nisso, vamos te mostrar hoje como integrar bot\u00f5es de inicia\u00e7\u00e3o de conversa para o WhatsApp e outras mais redes sociais de contato para turbinar o atendimento da sua empresa e facilitar o contato de seus visitantes. Vamos l\u00e1?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sum\u00e1rio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Instalando o plugin<\/li>\n\n\n\n<li>Criando o bot\u00e3o<\/li>\n\n\n\n<li>Personaliza\u00e7\u00f5es<\/li>\n\n\n\n<li>Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Instalando o plugin no WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/plugin-floating-chat-wordpress.jpg\" alt=\"plugin floating chat botao whatsapp wordpress\" class=\"wp-image-9669\"\/><figcaption class=\"wp-element-caption\">Fonte: Reposit\u00f3rio de plugins oficial: https:\/\/br.wordpress.org\/plugins\/chaty\/<\/figcaption><\/figure>\n\n\n\n<p>Para come\u00e7ar todo o processo, a primeira etapa ser\u00e1 acessarmos a \u00e1rea do WP Admin para <a href=\"https:\/\/kangaroo.host\/blog\/como-instalar-plugins-temas-wordpress\/\" target=\"_blank\" data-type=\"post\" data-id=\"9601\" rel=\"noreferrer noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">fazer a instala\u00e7\u00e3o do plugin<\/mark><\/a> que nos permitir\u00e1 criar os bot\u00f5es, e para isso usaremos o<a href=\"https:\/\/br.wordpress.org\/plugins\/chaty\/\" target=\"_blank\" rel=\"noopener\"> Floating Chat &#8211; Chaty<\/a>, e o processo de instala\u00e7\u00e3o \u00e9 o mesmo como de qualquer outro plugin, que podemos fazer da seguinte forma:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>No menu \u00e0 esquerda, clique na op\u00e7\u00e3o <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Plugins <\/mark><\/strong>e siga para <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Adicionar novo<\/mark><\/strong>;<br><img decoding=\"async\" class=\"wp-image-9605\" style=\"width: 150px;\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Adicionar-plugin-tema-no-WordPress-1.jpg\" alt=\"Adicionar plugin tema no WordPress\"><\/li>\n\n\n\n<li>Na barra de pesquisa, busque por <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Floating Chat<\/mark><\/strong>;<\/li>\n\n\n\n<li>Ao encontrar o plugin, clique em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Instalar agora<\/mark><\/strong> e depois em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Ativar<\/mark><\/strong>.<br><img decoding=\"async\" class=\"wp-image-9672\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Instalar-plugin-WordPress-Floating-chat-Whatsapp-botao.jpg\" alt=\"Instalar plugin WordPress Floating chat Whatsapp botao\"><\/li>\n<\/ol>\n\n\n\n<p>Assim que o plugin estiver instalado e ativo em seu WP, poderemos seguir para as pr\u00f3ximas etapas da configura\u00e7\u00e3o para a cria\u00e7\u00e3o do bot\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cria\u00e7\u00e3o do bot\u00e3o do WhatsApp<\/h2>\n\n\n\n<p>Agora que estamos com o plugin devidamente instalado no WP, \u00e9 hora de criar o bot\u00e3o de contato dentro da ferramenta, o que podemos fazer da seguinte forma:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>No menu \u00e0 esquerda, clique no plugin Chaty (nome do Floating Chat) dentro do WP, para abrir a lista de op\u00e7\u00f5es do plugin;<br><img decoding=\"async\" class=\"wp-image-9675\" style=\"width: 200px;\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/plugin-chaty-opcoes.jpg\" alt=\"plugin chaty opcoes\"><\/li>\n\n\n\n<li>Ao abrir essa tela, ser\u00e1 mostrada uma primeira mensagem de inscri\u00e7\u00e3o para novidades, com o bot\u00e3o Signup para se inscrever e abaixo No, I will do it later para ignorar;<br><img decoding=\"async\" class=\"wp-image-9677\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Mensagem-boas-vindas-floating-chat.jpg\" alt=\"Mensagem boas vindas floating chat\"><\/li>\n\n\n\n<li>Ap\u00f3s isso, ser\u00e1 mostrado tamb\u00e9m um popup de boas-vindas, e voc\u00ea tamb\u00e9m pode fech\u00e1-lo;<\/li>\n\n\n\n<li>Feito isso, podemos realmente come\u00e7ar a criar o nosso widget, que \u00e9 quem servir\u00e1 para o cliente fazer o contato. Para isso, clique em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Create Widget<\/mark><\/strong>;<br><img decoding=\"async\" class=\"wp-image-9679\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Criar-novo-botao-widget-chaty.jpg\" alt=\"Criar novo botao widget chaty\"><\/li>\n\n\n\n<li>Na tela que se abrir\u00e1, informe um nome para o Widget e clique nos \u00edcones de cada canal de contato que desejar\u00e1 utilizar para os clientes acionarem;<br><img decoding=\"async\" class=\"wp-image-9681\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Adicionando-botao-widget-whatsapp.jpg\" alt=\"Adicionando bot\u00e3o widget whatsapp\"><\/li>\n\n\n\n<li>Descendo um pouco mais a p\u00e1gina, agora poderemos informar os detalhes de contato para cada op\u00e7\u00e3o escolhida. Isso ser\u00e1 usado pelo widget para encaminhar corretamente os visitantes a cada canal;<br><img decoding=\"async\" class=\"wp-image-9682\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Ajustes-dos-botoes-widgets-whatsapp.jpg\" alt=\"Ajustes dos botoes widgets whatsapp\"><\/li>\n\n\n\n<li>Assim que tiver ajustado todas as op\u00e7\u00f5es, clique em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Save Widget<\/mark><\/strong> e ent\u00e3o o bot\u00e3o ser\u00e1 criado com todos os canais escolhidos, e ser\u00e1 automaticamente inserido nas p\u00e1ginas do seu site.<br><br><img decoding=\"async\" class=\"wp-image-9684\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Botao-whatsapp.jpg\" alt=\"Botao whatsapp\"><br><\/li>\n<\/ol>\n\n\n\n<p>Agora, temos o bot\u00e3o mostrado na p\u00e1gina, por\u00e9m ele ainda est\u00e1 com o texto em ingl\u00eas e uma cor roxa, o que pode n\u00e3o combinar com a identidade visual da sua marca, n\u00e3o \u00e9 mesmo? Ent\u00e3o, agora vamos fazer alguns r\u00e1pidos ajustes visuais para deixar o bot\u00e3o mais condizente com a sua identidade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ajustes de apar\u00eancia<\/h2>\n\n\n\n<p>Para personalizarmos a apar\u00eancia do Widget, precisaremos usar a aba de customiza\u00e7\u00e3o e ent\u00e3o seguir dessa forma:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Na tela de ajuste do widget, clique em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Widget Customization<\/mark><\/strong>;<br><img decoding=\"async\" class=\"wp-image-9685\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Widget-customization.jpg\" alt=\"Widget customization\"><\/li>\n\n\n\n<li>Nessa aba, agora poderemos definir alguns detalhes, e todas as modifica\u00e7\u00f5es ser\u00e3o mostradas em tempo real em uma pr\u00e9via no canto direito;<br><img decoding=\"async\" class=\"wp-image-9686\" style=\"\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Personalizacao-do-widget.jpg\" alt=\"Personalizacao do widget\"><\/li>\n\n\n\n<li>Dentre as op\u00e7\u00f5es mais comuns de edi\u00e7\u00e3o, temos:<br>&#8211; <strong>Widget icon<\/strong>: permite alterar o \u00edcone do bot\u00e3o do widget;<br>&#8211; <strong>Position<\/strong>: definir\u00e1 a posi\u00e7\u00e3o do \u00edcone, entre Left (esquerda), Right (direita) ou Custom (personalizado);<br>&#8211; <strong>Widget icon color<\/strong>: definir\u00e1 a cor do \u00edcone do widget;<br>&#8211; <strong>Call to action<\/strong>: essa ser\u00e1 a mensagem de chamada para a\u00e7\u00e3o mostrada ao lado do \u00edcone, convidando o visitante a entrar em contato;<\/li>\n\n\n\n<li>Ap\u00f3s completar todos os ajustes, clique em <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Save Widget<\/mark><\/strong> para completar as modifica\u00e7\u00f5es e confira o resultado direto nas p\u00e1ginas do seu site!<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Com o Chaty, agora podemos ter n\u00e3o somente o contato atrav\u00e9s do WhatsApp, como tamb\u00e9m diversas outras redes sociais e canais de atendimento, tudo de forma integrada e intuitiva para um f\u00e1cil acesso dos visitantes.<\/p>\n\n\n\n<p>Agora, \u00e9 hora de personalizar ainda mais o seu mais novo bot\u00e3o de contato e aplic\u00e1-lo ao seu site para deix\u00e1-lo ainda mais exclusivo! Esperamos que este artigo possa ter te ajudado e, caso tenha gostado, n\u00e3o deixe de continuar seguindo <a href=\"https:\/\/kangaroo.host\/blog\" target=\"_blank\" rel=\"noreferrer noopener\">nosso blog<\/a> para encontrar mais conte\u00fado como esse.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>E a\u00ed, Kangaroozito! O aplicativo de mensagens WhatsApp \u00e9 um dos queridinhos dos brasileiros, sendo sem d\u00favida nenhuma o aplicativo de conversa mais utilizado no pa\u00eds. Por isso, tamb\u00e9m vem sendo muito adotado como um canal de atendimento por empresas de diversos segmentos. Sendo um dos canais mais usados (e at\u00e9 mesmo uma das prefer\u00eancias [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[253,413,18,32,433,20],"class_list":["post-1547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-botao","tag-contato","tag-plugin","tag-site","tag-whatsapp","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=1547"}],"version-history":[{"count":2,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1547\/revisions"}],"predecessor-version":[{"id":2784,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1547\/revisions\/2784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/1559"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=1547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=1547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=1547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}