Whatsapp flutuante
Com o código abaixo é possível cadastrar o numero do telefone, habilitar ou desabilitar a funcionalidade e escolher se deseja exibi-lo a direita ou a esquerda da pagina.
Snippet para exibir o Whatsapp flutuante.
{#
# Whatsapp flutuante - arquivo de configuração do painel
# configs/settings.html
#}
<div class="box-section">
<div class="title flex justify-between align-center">
<span>WhatsApp</span>
<input type="text" placeholder="(00) 0 0000-0000" name="whatsapp_number">
</div>
</div>
<div class="box-section">
<div class="title flex justify-between align-center">
<span>Botão de atendimento via WhatsApp</span>
<label class="check-drag">
<input type="checkbox" name="button_whatsapp" value="1">
<span class="icon"></span>
</label>
</div>
</div>
<div class="box-section">
<div class="title flex justify-between align-center">
<span>Qual o lado que o botão de atendimento via WhatsApp será exibido?</span>
</div>
<div class="content-section">
<div class="item flex justify-between">
<div class="list-radio">
<label class="option flex align-center">
<input type="radio" name="whats_position" value="1">
<div class="dot"></div>
<div class="text">Exibir o botão no lado <strong>esquerdo</strong></div>
</label>
</div>
</div>
<div class="item flex justify-between">
<div class="list-radio">
<label class="option flex align-center">
<input type="radio" name="whats_position" value="2">
<div class="dot"></div>
<div class="text">Exibir o botão no lado <strong>direito</strong></div>
</label>
</div>
</div>
</div>
</div>
Como usar
Copie o código settings.html acima e cole os itens dentro do arquivo settings.html
que se encontra na pasta configs: configs/settings.html
Copie o código whatsapp.html acima e crie um arquivo separado, exemplo:
elements/snippets/whatsapp.html
Faça a chamada desse arquivo onde desejar:
{% element('snippets/whatsapp') %}
Copie o código CSS e cole em sua folha de estilo.
Last updated
Was this helpful?