LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page

Was this helpful?

  1. Construindo seu Template
  2. Referências
  3. Componentes

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&atilde;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&atilde;o de atendimento via WhatsApp ser&aacute; 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&atilde;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&atilde;o no lado <strong>direito</strong></div>
                </label>
            </div>
        </div>
    </div>
</div>
{#
# Whatsapp flutuante
# elements/snippets/whatsapp.html
#}

{% if settings.button_whatsapp and settings.whatsapp_number and settings.whats_position %}
    <div class="fixed-contact{{ settings.whats_position == '2' ? ' right-position' }}">
    {% if settings.whatsapp_number != '' %}

        {% set whats = settings.whatsapp_number %}
        {% set link = whats|replace({'(': '', ')': '', ' ':'', '-': ''}) %}    
        <a class="whats" href="https://api.whatsapp.com/send?l=pt&phone=55{{link}}" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 52 52"><path d="M26 0C11.663 0 0 11.663 0 26c0 4.891 1.359 9.639 3.937 13.762C2.91 43.36 1.055 50.166 1.035 50.237a.996.996 0 0 0 .27.981c.263.253.643.343.989.237l10.306-3.17A25.936 25.936 0 0 0 26 52c14.337 0 26-11.663 26-26S40.337 0 26 0zm0 50a23.94 23.94 0 0 1-12.731-3.651 1 1 0 0 0-.825-.108l-8.999 2.77a991.452 991.452 0 0 1 2.538-9.13c.08-.278.035-.578-.122-.821A23.907 23.907 0 0 1 2 26C2 12.767 12.767 2 26 2s24 10.767 24 24-10.767 24-24 24z"/><path d="M42.985 32.126c-1.846-1.025-3.418-2.053-4.565-2.803-.876-.572-1.509-.985-1.973-1.218-1.297-.647-2.28-.19-2.654.188a1 1 0 0 0-.125.152c-1.347 2.021-3.106 3.954-3.621 4.058-.595-.093-3.38-1.676-6.148-3.981-2.826-2.355-4.604-4.61-4.865-6.146C20.847 20.51 21.5 19.336 21.5 18c0-1.377-3.212-7.126-3.793-7.707-.583-.582-1.896-.673-3.903-.273a1.01 1.01 0 0 0-.511.273c-.243.243-5.929 6.04-3.227 13.066 2.966 7.711 10.579 16.674 20.285 18.13 1.103.165 2.137.247 3.105.247 5.71 0 9.08-2.873 10.029-8.572a.996.996 0 0 0-.5-1.038zm-12.337 7.385c-10.264-1.539-16.729-11.708-18.715-16.87-1.97-5.12 1.663-9.685 2.575-10.717.742-.126 1.523-.179 1.849-.128.681.947 3.039 5.402 3.143 6.204 0 .525-.171 1.256-2.207 3.293A.996.996 0 0 0 17 22c0 5.236 11.044 12.5 13 12.5 1.701 0 3.919-2.859 5.182-4.722a.949.949 0 0 1 .371.116c.36.181.984.588 1.773 1.104 1.042.681 2.426 1.585 4.06 2.522-.742 3.57-2.816 7.181-10.738 5.991z"/></svg>
        </a>

    {% endif %}
    </div>
{% endif %}
.fixed-contact {
    position: fixed;
    left: 15px;
    bottom: 40px;
    font-size: 1rem;
    z-index: 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.fixed-contact.right-position {
    left: auto;
    right: 15px;
}

.fixed-contact a {
    width: 3.125em;
    height: 3.125em;
    fill: #fff;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: ease-in-out 0.3s;
    -o-transition: ease-in-out 0.3s;
    transition: ease-in-out 0.3s;
    background-color: #25d366;
}

.fixed-contact a svg {
    display: block;
    fill: inherit;
    width: 1.750em;
    height: 1.750em;
    display: block;
    stroke: #fff;
    stroke-width: 0.065em;
}

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.

PreviousTray LoginNextAPIs Disponíveis

Last updated 1 year ago

Was this helpful?

🧱