Informe o nome da empresa (substitua COMPANY_NAME peno nome da Empresa).
<!-- 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>
Desbloqueie o código de integração por apenas R$ 19,90
Desbloqueie todas as funcionalidades do sistema por apenas
Renovação automática a cada 30 dias
📱 Pagamento via PIX:
CHAVE: irdigital@outlook.com
Ou escaneie o QR Code:
📤 Envie o comprovante para:
(85) 99431-2039Usa api.php local para demonstrar embed.
