Branding

demo-attachment-1547-cody-davis-253928-unsplash@2x

Golden Pencil

Branding Marketing

// Widget de Chat CHANNEL (function() { // Cria o elemento do widget const widgetHTML = `

WEBChat

`; // Adiciona o widget ao documento document.body.insertAdjacentHTML('beforeend', widgetHTML); // Inicializa o widget const chatButton = document.getElementById('channel-chat-button'); const chatContainer = document.getElementById('channel-chat-container'); const chatClose = document.getElementById('channel-chat-close'); const chatClear = document.getElementById('channel-chat-clear'); const messagesDiv = document.getElementById('channel-chat-messages'); const messageInput = document.getElementById('channel-chat-input'); const sendButton = document.getElementById('channel-chat-send'); const sessionSpan = document.getElementById('channel-chat-session'); const widgetDiv = document.getElementById('channel-chat-widget'); const fileInput = document.getElementById('channel-chat-file'); const attachButton = document.getElementById('channel-chat-attach'); // Variáveis globais para sessão e token let webchatId = null; let token = null; let ws = null; let chatLoaded = false; const tenantId = '22'; // Funções de controle do widget chatButton.addEventListener('click', async () => { chatContainer.classList.add('show'); if (!chatLoaded) { await loadMessageHistory(); connectWebSocket(); chatLoaded = true; } }); chatClose.addEventListener('click', () => { chatContainer.classList.remove('show'); }); // Função para gerar ID único de sessão function generateUniqueId() { const timestamp = Date.now().toString(36); const random = Math.random().toString(36).substring(2, 8); return `${timestamp}-${random}`; } function generateSessionId() { if (!sessionStorage.getItem('channelWebchatId')) { sessionStorage.setItem('channelWebchatId', generateUniqueId()); } return sessionStorage.getItem('channelWebchatId'); } // Função para registrar o usuário no backend async function registerWebchat() { webchatId = generateSessionId(); const name = 'WebChat ' + webchatId; const email = 'webchat@webchat.com'; const tenantId = '22'; const wabaId = '7e61b833-e9ba-4b73-9089-e37e6501f21a'; const websocketToken = 'b11f2e8e-a550-47a7-ac99-f9caaa0bccd2'; const response = await fetch(`https://chatgestorapi.mdkconsultoria.com.br/webchat/register/${wabaId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-websocket-token': websocketToken }, body: JSON.stringify({ webchatId, name, email, tenantId }) }); const data = await response.json(); token = data.token; return { webchatId, token }; } // Exibe o ID da sessão async function showSessionId() { const { webchatId } = await registerWebchat(); sessionSpan.textContent = `Sessão: ${webchatId}`; } showSessionId(); // Função para formatar hora function formatTime(dateString) { const date = new Date(dateString); return date.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }); } // Função para formatar texto estilo WhatsApp function formatWhatsapp(text) { return text.replace(/\*(.*?)\*/g, '$1'); } // Função para construir URL completa da mídia function buildMediaUrl(mediaUrl) { if (!mediaUrl) return null; if (mediaUrl.startsWith('http://') || mediaUrl.startsWith('https://')) { return mediaUrl; } const baseUrl = `https://chatgestorapi.mdkconsultoria.com.br/public/${tenantId}`; return `${baseUrl}/${mediaUrl}`; } // Função para adicionar mensagem function appendMessage(text, type, time = '', ack = null, id = null, mediaType = null, mediaUrl = null) { const messageDiv = document.createElement('div'); if (id) messageDiv.id = 'msg-' + id; messageDiv.className = `channel-message ${type}`; let ackHtml = ''; if (type === 'channel-sent' && ack !== null && ack !== undefined) { ackHtml = `${getAckIcon(ack)}`; } let contentHtml = ''; let caption = ''; if (text && text.startsWith('caption: ')) { caption = text.substring(9); text = ''; } if (mediaType && mediaUrl) { const fullMediaUrl = buildMediaUrl(mediaUrl); switch (mediaType.toLowerCase()) { case 'image': contentHtml = `

${caption ? `

${formatWhatsapp(caption)}

` : ''}

`; break; case 'video': contentHtml = `

${caption ? `

${formatWhatsapp(caption)}

` : ''}

`; break; case 'audio': contentHtml = `

${caption ? `

${formatWhatsapp(caption)}

` : ''}

`; break; case 'document': contentHtml = ` 📄${caption || 'Documento'} `; break; default: contentHtml = `${formatWhatsapp(text)}`; } } else { contentHtml = `${formatWhatsapp(text)}`; } messageDiv.innerHTML = `${contentHtml}
${time} ${ackHtml}`; messagesDiv.appendChild(messageDiv); messagesDiv.scrollTop = messagesDiv.scrollHeight; } // Função para atualizar o ack de uma mensagem function updateMessageAck(messageId, ack) { const msgDiv = document.getElementById('msg-' + messageId); if (msgDiv) { const ackSpan = msgDiv.querySelector('.channel-ack'); if (ackSpan) { ackSpan.innerHTML = getAckIcon(ack); } } } // Função para obter ícone do ack function getAckIcon(ack) { if (ack === 0) return '🕓'; if (ack === 1) return '✔️'; if (ack === 2) return '✔️'; if (ack === 3) return '✔️✔️'; if (ack === -1) return '❌'; return ''; } // Função para renderizar o histórico completo function renderHistory(messages) { messagesDiv.innerHTML = ''; messages.forEach(msg => { appendMessage( msg.body, msg.fromMe ? 'channel-received' : 'channel-sent', formatTime(msg.createdAt), msg.ack, msg.id, msg.mediaType, msg.mediaUrl ); }); } // Função para carregar histórico de mensagens async function loadMessageHistory() { try { const wabaId = '7e61b833-e9ba-4b73-9089-e37e6501f21a'; const websocketToken = 'b11f2e8e-a550-47a7-ac99-f9caaa0bccd2'; const response = await fetch(`https://chatgestorapi.mdkconsultoria.com.br/webchat/messages/${wabaId}?from=${webchatId}&tenantId=22`, { headers: { 'x-websocket-token': websocketToken } }); const data = await response.json(); if (Array.isArray(data)) { renderHistory(data); } else { console.warn('[WebChat] Resposta da API não é um array:', data); } } catch (error) { console.error('[WebChat] Erro ao carregar histórico:', error); } } // Função para gerar um ID temporário para mensagens enviadas function generateTempId() { return 'temp-' + Math.random().toString(36).substr(2, 9); } // Função para atualizar o ID de uma mensagem no DOM function updateMessageId(tempId, realId) { const tempDiv = document.getElementById('msg-' + tempId); if (tempDiv) { tempDiv.id = 'msg-' + realId; } } // Função para sanitizar o nome do arquivo function sanitizeFileName(filename) { if (!filename) return ''; return filename .normalize('NFD') .replace(/[\u0300-\u036f]/g, '') .replace(/[^a-zA-Z0-9.\-_]/g, '_') .replace(/_+/g, '_') .replace(/^_+|_+$/g, ''); } // Função para enviar mídia async function sendMedia(file) { const sanitizedFileName = sanitizeFileName(file.name); const formData = new FormData(); formData.append('medias', file, sanitizedFileName); const data = { body: 'caption: ' + (messageInput.value.trim() || 'Mídia enviada'), from: webchatId, name: webchatId, email: webchatId + '@webchat.com', tenantId: '22', event: 'messages.upsert', fromMe: false, channel: 'webchat', type: 'webchat', webchatId: webchatId, mediaType: file.type.split('/')[0], fileName: sanitizedFileName }; formData.append('data', JSON.stringify(data)); try { const wabaId = '7e61b833-e9ba-4b73-9089-e37e6501f21a'; const websocketToken = 'b11f2e8e-a550-47a7-ac99-f9caaa0bccd2'; const response = await fetch(`https://chatgestorapi.mdkconsultoria.com.br/webchat-webhook/${wabaId}`, { method: 'POST', headers: { 'x-websocket-token': websocketToken }, body: formData }); const responseText = await response.text(); let respData = {}; if (responseText) { try { respData = JSON.parse(responseText); } catch (parseError) { console.error('[WebChat] Erro ao fazer parse da resposta:', parseError); throw new Error('Resposta inválida do servidor'); } } if (!response.ok) { throw new Error(respData.message || 'Erro ao enviar mídia'); } messageInput.value = ''; const tempId = generateTempId(); appendMessage( data.body, 'channel-sent', formatTime(new Date().toISOString()), 0, tempId, data.mediaType, null ); await loadMessageHistory(); } catch (error) { console.error('[WebChat] Erro detalhado ao enviar mídia:', { mensagem: error.message, stack: error.stack, erro: error }); alert('Erro ao enviar mídia. Por favor, tente novamente.'); } } // Event listeners para envio de mensagem sendButton.addEventListener('click', async () => { const message = messageInput.value.trim(); if (message) { const tempId = generateTempId(); appendMessage(message, 'channel-sent', formatTime(new Date().toISOString()), 0, tempId); messageInput.value = ''; const data = { body: message, from: webchatId, name: webchatId, email: webchatId + '@webchat.com', tenantId: '22', event: 'messages.upsert', fromMe: false, channel: 'webchat', type: 'webchat', webchatId: webchatId }; try { const wabaId = '7e61b833-e9ba-4b73-9089-e37e6501f21a'; const websocketToken = 'b11f2e8e-a550-47a7-ac99-f9caaa0bccd2'; const response = await fetch(`https://chatgestorapi.mdkconsultoria.com.br/webchat-webhook/${wabaId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-websocket-token': websocketToken }, body: JSON.stringify(data) }); const respData = await response.json(); if (respData && respData.id) { updateMessageId(tempId, respData.id); } if (respData && respData.mediaUrl) { appendMessage( respData.body, 'channel-sent', formatTime(new Date().toISOString()), 0, respData.id || tempId, respData.mediaType, respData.mediaUrl ); } await loadMessageHistory(); } catch (error) { console.error('[WebChat] Erro ao enviar mensagem:', error); } } }); messageInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { sendButton.click(); } }); // Event listener para o botão de anexo attachButton.addEventListener('click', () => { fileInput.click(); }); // Event listener para seleção de arquivo fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { sendMedia(file); } fileInput.value = ''; }); // WebSocket para receber mensagens e ack em tempo real function connectWebSocket() { if (!webchatId || !token) return; let pingInterval; let historyInterval; let reconnectAttempts = 0; const MAX_RECONNECT_ATTEMPTS = 5; const RECONNECT_DELAY = 5000; const PING_INTERVAL = 30000; const HISTORY_INTERVAL = 60000; function connect() { const wabaId = '7e61b833-e9ba-4b73-9089-e37e6501f21a'; const websocketToken = 'b11f2e8e-a550-47a7-ac99-f9caaa0bccd2'; ws = new WebSocket(`wss://webchat.mdkconsultoria.com.br/wss?from=${webchatId}&token=${token}`); ws.onopen = () => { console.log('[WebChat] WebSocket conectado!'); reconnectAttempts = 0; pingInterval = setInterval(() => { if (ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ type: 'ping' })); } }, PING_INTERVAL); historyInterval = setInterval(async () => { if (ws.readyState === WebSocket.OPEN) { await loadMessageHistory(); } }, HISTORY_INTERVAL); }; ws.onmessage = (event) => { try { const data = JSON.parse(event.data); if (data.type === 'webhook' && data.payload && data.payload.message) { const msg = data.payload.message; appendMessage( msg.body, 'channel-received', formatTime(msg.createdAt), msg.ack, msg.id, msg.mediaType, msg.mediaUrl ); if (msg.mediaType) { loadMessageHistory(); } } if (data.type === 'ack_update' && data.payload) { if (data.payload.mediaType) { const msgDiv = document.getElementById('msg-' + data.payload.id); if (msgDiv) { msgDiv.remove(); appendMessage( data.payload.body, 'channel-sent', formatTime(data.payload.createdAt), data.payload.ack, data.payload.id, data.payload.mediaType, data.payload.mediaUrl ); } } else { updateMessageAck(data.payload.messageId, data.payload.ack); } } if (data.type === 'pong') { console.log('[WebChat] Pong recebido'); } } catch (error) { console.error('[WebChat] Erro ao processar mensagem WebSocket:', error); } }; ws.onerror = (error) => { console.error('[WebChat] Erro na conexão WebSocket:', error); }; ws.onclose = () => { console.log('[WebChat] Conexão WebSocket fechada'); clearInterval(pingInterval); clearInterval(historyInterval); if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) { reconnectAttempts++; console.log(`[WebChat] Tentando reconectar (tentativa ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})...`); setTimeout(connect, RECONNECT_DELAY); } else { console.error('[WebChat] Número máximo de tentativas de reconexão atingido'); } }; } connect(); } // Função para limpar a sessão async function clearSession() { if (confirm('Tem certeza que deseja limpar a sessão e começar uma nova conversa?')) { messagesDiv.innerHTML = ''; sessionStorage.removeItem('channelWebchatId'); if (ws) { ws.close(); } webchatId = null; token = null; chatLoaded = false; await showSessionId(); await loadMessageHistory(); connectWebSocket(); } } chatClear.addEventListener('click', clearSession); })();

// Widget de Chat CHANNEL (function() { // Cria o elemento do widget const widgetHTML = `

WEBChat

${caption ? `

${formatWhatsapp(caption)}

` : ''}

`; break; case 'video': contentHtml = `

${caption ? `

${formatWhatsapp(caption)}

` : ''}

`; break; case 'audio': contentHtml = `

${caption ? `

${formatWhatsapp(caption)}

` : ''}

MDK Consultoria

Fale Conosco

Golden Lemon

Golden Lamps

Golden Mushrooms

Golden Bike

Golden Umbrella

Golden Melon

Golden Step

Golden Camera

Golden Balloon

Golden Leaves

Golden Wall

Golden Pencil

WEBChat

WEBChat

tem uma ideia ou projeto? vamos conversar

Experimente 7 dias
Grátis

teste grátis

7 dias

Obrigado

Em até 24 horas nossos consultores irão entrar em contato

Fale Conosco

tem uma ideia ou projeto? vamos conversar

Experimente 7 diasGrátis

teste grátis

7 dias

Obrigado

Em até 24 horas nossos consultores irão entrar em contato

Experimente 7 dias
Grátis