WappDesk Chat Embed - Demonstração

Como Usar

🎯 Método 1: Auto-inicialização

A forma mais simples de adicionar o chat ao seu site:

<!-- Adicione no final do <body> -->
<script src="https://cdn.wappdesk.com/embed/wappdesk-chat.js"
        data-api-key="wappdesk_sua_chave_aqui"
        data-contact-phone="+5511999999999"
        data-customer-name="João Silva"
        data-position="bottom-right"
        data-theme="default"></script>
                    

⚙️ Método 2: Configuração Manual

Para maior controle sobre o comportamento:

<!-- Carregue o script -->
<script src="https://cdn.wappdesk.com/embed/wappdesk-chat.js"></script>

<!-- Configure o chat -->
<script>
  initWappDeskChat({
    apiKey: 'wappdesk_sua_chave_aqui',
    contactPhone: '+5511999999999',
    customerName: 'João Silva',
    customerEmail: 'joao@email.com',
    position: 'bottom-right',
    theme: 'default',
    autoOpen: false,
    welcomeMessage: 'Olá! Como posso ajudá-lo hoje?'
  });
</script>
                    

🔑 Onde conseguir sua API Key?

Acesse o painel do WappDesk → Configurações → Chaves de API → Criar Nova Chave

Recursos

🎨 Temas Disponíveis

default - Roxo WappDesk
blue - Azul profissional
dark - Modo escuro

📍 Posições

bottom-right - Canto inferior direito
bottom-left - Canto inferior esquerdo
top-right - Canto superior direito
top-left - Canto superior esquerdo

⚡ Funcionalidades

Validação automática de API Key
Interface responsiva
Minimizar/maximizar janela
Histórico de mensagens
Indicador de status online/offline
Timestamps das mensagens

Opções de Configuração

initWappDeskChat({
  // Obrigatório
  apiKey: 'wappdesk_sua_chave_aqui',
  
  // Informações do contato (opcionais)
  contactPhone: '+5511999999999',  // Número do WhatsApp
  customerName: 'João Silva',      // Nome do cliente
  customerEmail: 'joao@email.com', // Email do cliente
  
  // Configurações visuais (opcionais)
  position: 'bottom-right',        // Posição do chat
  theme: 'default',               // Tema visual
  autoOpen: false,                    // Abrir automaticamente
  welcomeMessage: 'Olá! Como posso ajudá-lo hoje?', // Mensagem inicial
  
  // Cores personalizadas (opcionais)
  primaryColor: '#8b5cf6',        // Cor principal
  secondaryColor: '#7c3aed',      // Cor secundária
  textColor: '#ffffff',           // Cor do texto
  backgroundColor: '#ffffff'       // Cor de fundo
});
                