<!-- PASSO 1: Container onde os depoimentos serão exibidos -->
<div id="provas-container"></div>

<!-- PASSO 2: Estilos CSS para os cards de depoimentos -->
<style> 
   /* Reset de box-sizing para evitar conflitos com o tema do site */
   #provas-container, #provas-container * { box-sizing: border-box; } 
   
   /* Container principal - grid responsivo com 3 colunas */
   #provas-container { 
     max-width: 1100px; 
     margin: 0 auto; 
     padding: 16px 24px; 
     display: grid; 
     gap: 18px; 
     grid-template-columns: repeat(3, minmax(280px, 1fr)); 
   } 
   
   /* Responsivo: 1 coluna em telas pequenas */
   @media (max-width: 900px) { 
     #provas-container { grid-template-columns: 1fr; } 
   } 
   
   /* Card individual de depoimento */
   #provas-container .card { 
     border: 1px solid #e5e7eb; 
     border-radius: 16px; 
     padding: 18px; 
   } 
   
   /* Layout interno: avatar + conteúdo lado a lado */
   #provas-container .testimonial { 
     display: grid; 
     grid-template-columns: 56px 1fr; 
     gap: 14px; 
     align-items: start; 
   } 
   
   /* Avatar circular com gradiente fallback */
   #provas-container .avatar { 
     width: 56px; 
     height: 56px; 
     border-radius: 50%; 
     overflow: hidden; 
     background: linear-gradient(135deg, #38bdf8, #22c55e); 
     box-shadow: inset 0 0 22px rgba(0,0,0,0.35); 
   } 
   
   /* Imagem do avatar - cobre todo o espaço */
   #provas-container .avatar img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     display: block; 
     border-radius: 50%; 
   } 
   
   /* Estrelas de avaliação em dourado */
   #provas-container .stars { 
     font-size: 16px; 
     letter-spacing: 2px; 
     color: #f59e0b !important; 
   } 
   
   /* Texto do depoimento */
   #provas-container .quote { 
     font-size: 14px; 
     margin: 6px 0; 
   } 
   
   /* Nome e empresa do autor */
   #provas-container .author { 
     font-size: 13px; 
     margin: 2px 0; 
   } 
   
   /* Botão CTA padrão */
   #provas-container .btn-inline { 
     display: inline-block; 
     margin-top: 8px; 
     font-size: 13px; 
     padding: 8px 12px; 
     border-radius: 10px; 
     border: 1px solid #e5e7eb; 
     background: rgba(255,255,255,0.06); 
   } 
   
   /* Botão CTA principal com gradiente verde-azul */
   #provas-container .btn-inline.primary { 
     border: none; 
     background: linear-gradient(135deg, #22c55e, #38bdf8); 
     color: #041024; 
     font-weight: 700; 
     text-decoration:none;
   } 
</style> 
 
<!-- PASSO 3: JavaScript para buscar e renderizar os depoimentos -->
<script> 
  // URL da API - não mexer
  const API_URL = 'https://irdigital.com.br/gera-depoimentos/api.php'; 
  
  // Filtro por empresa - deixe vazio para mostrar todas
  const COMPANY = 'COMPANY_NAME'; // Mude a empresa que está recebendo a prova social 
  const SGPSLog = (() => { 
    const entries = []; 
    const pid = 'provas-log'; 
    function push(level, message, context) { 
      entries.push({ level, message, context: context || null, time: new Date().toISOString() }); 
      try { (level === 'error' ? console.error : console.warn)('[SGPS]', message, context || ''); } catch (e) {} 
    } 
    function ensurePanel() { 
      let panel = document.getElementById(pid); 
      if (!panel) { 
        if (!document.body) return null; 
        panel = document.createElement('div'); 
        panel.id = pid; 
        panel.style.border = '1px solid #e5e7eb'; 
        panel.style.borderRadius = '12px'; 
        panel.style.padding = '12px'; 
        panel.style.margin = '12px 24px'; 
        panel.style.background = '#ffffff'; 
        panel.style.color = '#111827'; 
        const container = document.getElementById('provas-container'); 
        const parent = (container && container.parentNode) ? container.parentNode : document.body; 
        parent.insertBefore(panel, container ? container.nextSibling : null); 
      } 
      return panel; 
    } 
    function render() { 
      const panel = ensurePanel(); 
      if (!panel) { 
        document.addEventListener('DOMContentLoaded', () => render()); 
        return; 
      } 
      panel.innerHTML = 'Diagnóstico de Integração' + '
' + entries.map(e => '
' + e.message + (e.context ? ' — ' + JSON.stringify(e.context) : '') + '
').join('') + '
'; 
    } 
    return { 
      warn: (m, c) => { push('warn', m, c); render(); }, 
      error: (m, c) => { push('error', m, c); render(); }, 
      entries: () => entries.slice() 
    }; 
  })(); 
 
   // Função auxiliar: verifica se uma cor CSS é válida
   function isValidCssColor(value) { 
     if (!value) return false; 
     const s = document.createElement('span'); 
     s.style.color = ''; 
     s.style.color = value; 
     return s.style.color !== ''; 
   } 
   
   // Função auxiliar: converte hex para RGB
   function hexToRgb(hex) { 
     const m = String(hex).trim().match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i); 
     return m ? { 
       r: parseInt(m[1],16), 
       g: parseInt(m[2],16), 
       b: parseInt(m[3],16) 
     } : null; 
   } 
   
   // Função auxiliar: calcula cor de texto com base no fundo (contraste)
   function getContrastingTextColor(bg) { 
     const rgb = hexToRgb(bg); 
     if (!rgb) return '#111827'; 
     // Calcula luminosidade (0-1)
     const L = (0.299*rgb.r + 0.587*rgb.g + 0.114*rgb.b)/255; 
     // Retorna preto para fundos claros, branco para fundos escuros
     return L > 0.55 ? '#111827' : '#ffffff'; 
   } 
 
   // Função principal: busca depoimentos e renderiza na tela
  async function renderProvas() { 
    const el = document.getElementById('provas-container'); 
    if (!el) { SGPSLog.error('Container não encontrado (#provas-container)'); return; } 
    const companyParam = COMPANY && COMPANY !== 'COMPANY_NAME' ? COMPANY : ''; 
    if (COMPANY === 'COMPANY_NAME') { SGPSLog.warn('COMPANY_NAME não substituído'); } 
    const isHttps = location.protocol === 'https:'; 
    const apiIsHttp = API_URL.startsWith('http://'); 
    let url = companyParam ? `${API_URL}?company=${encodeURIComponent(companyParam)}` : API_URL; 
    if (isHttps && apiIsHttp) { 
      const secureApi = API_URL.replace(/^http:/, 'https:'); 
      url = companyParam ? `${secureApi}?company=${encodeURIComponent(companyParam)}` : secureApi; 
      SGPSLog.warn('Ajuste automático para HTTPS na API', { api: url }); 
    } 
    
    try {
      const resp = await fetch(url, { cache: 'no-store', mode: 'cors' }); 
      if (!resp.ok) { 
        SGPSLog.error('Erro HTTP', { status: resp.status, statusText: resp.statusText }); 
        el.innerHTML = '<div class="card"><p style="color:red;">Erro ao carregar depoimentos.</p></div>'; 
        return; 
      } 
      const ct = resp.headers.get('content-type') || ''; 
      if (!ct.includes('application/json')) { SGPSLog.warn('Content-Type inesperado', { contentType: ct }); } 
      let list; 
      try { list = await resp.json(); } catch (e) { 
        SGPSLog.error('JSON inválido', { message: e.message }); 
        el.innerHTML = '<div class="card"><p style="color:red;">Resposta inválida da API.</p></div>'; 
        return; 
      } 
      if (!Array.isArray(list)) { SGPSLog.warn('Formato inesperado de resposta'); list = []; } 
      if (companyParam && list.length === 0) { SGPSLog.warn('Nenhum depoimento encontrado', { company: companyParam }); } 
 
       // Renderiza cada depoimento como HTML
       el.innerHTML = (Array.isArray(list) ? list : []).map(t => { 
         // Aplica cores do banco de dados ou usa padrões
         const bg = isValidCssColor(t.fundo) ? t.fundo : '#ffffff'; 
         const fg = isValidCssColor(t.corletras) ? t.corletras : getContrastingTextColor(bg); 
 
         // Calcula estrelas (mínimo 0, máximo 5)
         const ratingVal = Math.max(0, Math.min(5, Number(t.rating || 5))); 
         const starsText = '★★★★★'.slice(0, ratingVal) + '☆☆☆☆☆'.slice(0, 5 - ratingVal); 
 
         // Monta HTML do avatar (com imagem ou só gradiente)
         const avatarHTML = `<div class="avatar">${t.image_url ? `<img src="${t.image_url}" alt="${t.name || 'Avatar'}" onerror="this.remove()">` : ''}</div>`; 
         
         // Monta botão CTA (se houver link e texto)
         const ctaHTML = t.cta_link && t.cta_text ? `<a class="btn-inline primary" target="_blank" href="${t.cta_link}">${t.cta_text}</a>` : ''; 
 
         // Retorna HTML completo do card
         return ` 
           <div class="card" style="background-color:${bg};color:${fg}"> 
             <div class="testimonial"> 
               ${avatarHTML} 
               <div> 
                 <div class="stars">${starsText}</div> 
                 <p class="quote" style="color: inherit">"${t.text || ''}"</p> 
                 <p class="author" style="color: inherit">${t.name || ''}${t.company ? ', ' + t.company : ''}</p> 
                 ${ctaHTML} 
               </div> 
             </div> 
           </div> 
         `; 
       }).join(''); 
       
    } catch (error) {
      SGPSLog.error('Falha na requisição', { message: error.message });
      el.innerHTML = '<div class="card"><p style="color:red;">Erro ao carregar depoimentos.</p></div>';
    }
  } 
   
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', renderProvas);
  } else {
    renderProvas();
  }
</script>

🔒 Acesso Premium

Desbloqueie o código de integração por apenas R$ 19,90