Botão tire dúvidas pelo whatsapp

Meu amigo, não estou conseguindo fazer esse código´funcionar.

Coloco os dois códigos na parte de CSS ?? ou tem algum que vai em HTML ?

Não deu certo pra mim, poderia me ajudar ?
Coloco os dois códigos na parte de CSS ?? ou tem algum que vai em HTML ?

@afiliadobemsucedido2 Pra facilitar, eu criei um vídeo mostrando como fazer.

Usei como base alguns códigos deste tópico, mas deixando mais fácil pra melhorar o entendimento:

Adicionando botão Tire-dúvidas no Whatsapp:

Para baixar o código pronto é só clicar aqui.


Douglas Medina

Especialista em e-commerce

Conteúdo :zap: douglasmedina.com + Youtube
Mentoria :zap: Aulas particulares
Curso Online :zap: Personalização Avançada
Whatsapp :zap: Construção de lojas

2 curtidas

Tem como adicionar uma mensagem personalizada, e junto ir o link do produto???
se tiver, me ajuda por favor!!

Acho que estou respondendo um pouco tarde kkkk. Mas tem como sim, se ainda estiver precisando, me explica certinho como quer, que te ajudo. Perdão pelos 6 meses de atraso kkkkk

2 curtidas

Bom dia Gabriel! Poderia ajudar mandando como faz para o botão do WhatsApp já enviar a mensagem com o link do produto que a cliente veio? Grata desde já!

Assim Calça Fitness Black Suplex - CN DEMO 1 - Ferramentas

Esse é da @consultornet

2 curtidas

Boa noite @Gabriell_Henrique Gabriel! Primeiramente obrigada por compartilhar o código aqui na comunidade! Consegui inserir o JS na tela dos meus produtos, porém não consegui os ajustes visuais com o CSS, poderia me ajudar?
Meu site: https://www.nenekits.com.br

1 curtida

Olá fiz ajustei com código aqui para você veja se serve:

JS:

$(function() {

    setTimeout(function(){
          $('.botao.botao-comprar.principal').after($('<div class="botao-whatsapp"> <a href="https://wa.me/5521980045765?text=*Olá, pode me ajudar? target="_blank" tabindex="0"<span>Personalize pelo whatsapp</span> <svg enable-background="new 0 0 308 308" version="1.1" viewBox="0 0 308 308" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m227.9 176.98c-0.6-0.288-23.054-11.345-27.044-12.781-1.629-0.585-3.374-1.156-5.23-1.156-3.032 0-5.579 1.511-7.563 4.479-2.243 3.334-9.033 11.271-11.131 13.642-0.274 0.313-0.648 0.687-0.872 0.687-0.201 0-3.676-1.431-4.728-1.888-24.087-10.463-42.37-35.624-44.877-39.867-0.358-0.61-0.373-0.887-0.376-0.887 0.088-0.323 0.898-1.135 1.316-1.554 1.223-1.21 2.548-2.805 3.83-4.348 0.607-0.731 1.215-1.463 1.812-2.153 1.86-2.164 2.688-3.844 3.648-5.79l0.503-1.011c2.344-4.657 0.342-8.587-0.305-9.856-0.531-1.062-10.012-23.944-11.02-26.348-2.424-5.801-5.627-8.502-10.078-8.502-0.413 0 0 0-1.732 0.073-2.109 0.089-13.594 1.601-18.672 4.802-5.385 3.395-14.495 14.217-14.495 33.249 0 17.129 10.87 33.302 15.537 39.453 0.116 0.155 0.329 0.47 0.638 0.922 17.873 26.102 40.154 45.446 62.741 54.469 21.745 8.686 32.042 9.69 37.896 9.69h1e-3c2.46 0 4.429-0.193 6.166-0.364l1.102-0.105c7.512-0.666 24.02-9.22 27.775-19.655 2.958-8.219 3.738-17.199 1.77-20.458-1.348-2.216-3.671-3.331-6.612-4.743z"></path><path d="m156.73 0c-83.416 0-151.28 67.354-151.28 150.14 0 26.777 7.166 52.988 20.741 75.928l-25.983 76.645c-0.484 1.429-0.124 3.009 0.933 4.085 0.763 0.779 1.798 1.199 2.855 1.199 0.405 0 0.813-0.061 1.211-0.188l79.92-25.396c21.87 11.685 46.588 17.853 71.604 17.853 83.408 1e-3 151.26-67.346 151.26-150.13 0-82.789-67.857-150.14-151.27-150.14zm0 268.99c-23.539 0-46.338-6.797-65.936-19.657-0.659-0.433-1.424-0.655-2.194-0.655-0.407 0-0.815 0.062-1.212 0.188l-40.035 12.726 12.924-38.129c0.418-1.234 0.209-2.595-0.561-3.647-14.924-20.392-22.813-44.485-22.813-69.677 0-65.543 53.754-118.87 119.83-118.87 66.064 0 119.81 53.324 119.81 118.87 1e-3 65.535-53.746 118.85-119.81 118.85z"></path></svg></a></div>'))
          
    }, 500);

});

CSS:

/* comprar Whatsapp */
.botao-whatsapp {margin-top:6px;border: 1px solid;border-radius: 4px;  border-color: #30a77e;}
.botao-whatsapp a {display:flex;align-items:center;justify-content:center;width: 100%;font-size: 13px;line-height: 18px;padding: 5px;}
.botao-whatsapp svg {width: 16px;height: 16px;margin-left: 5px; fill: #30a77e;}
.produto-detalhes .botao-whatsapp {box-shadow: 0 1px 4px 0 #b1b1b175;margin-top: 10px;}
.produto-detalhes .botao-whatsapp a {width:364px;}

Resultado esperado:

Espero ter ajudado.

2 curtidas

Ajudou muito @Mauricio_Pereira, muito muito obrigada!!! Ficou ótimo!

1 curtida

@Mauricio_Pereira sem querer abusar mas já abusando da sua boa vontade em nos ajudar, conseguiria centralizar minha logo só na versão mobile e reduzir o modal de Newsletter do mobile tbm…

2 curtidas

Vou analisar para vocês.

2 curtidas

Olá o link da sua loja não está funcionando mais.

Saiu da LI?

não é o mesmo da assinatura pelo que vi https://www.nenekits.com.br/

2 curtidas

Oii @Mauricio_Pereira ! Deve ter sido algum problema momentâneo, está funcionando normalmente.

1 curtida

Oi @Leonardo_Vicentini_F ! É verdade! Estava errado, corrigi lá. Obrigada!!

1 curtida

Isso mesmo Léo. não era o descrição. Valeu mano. Tmj

2 curtidas

Ótimo vou analisar aqui.

1 curtida

Boa tarde, estou com o mesmo problema.
@Mauricio_Pereira consegue nos ajudar por favor??

www.bemii.com.br

Oi Maurício! Boa tarde! Conseguiu analisar?

1 curtida