O SocialProof.Reviews fornece a cada workspace quatro widgets de depoimentos incorporáveis — um Mural de Amor, Carrossel, Badge de Classificação e Formulário de Coleta. Cada um é um <iframe> leve que carrega seus depoimentos aprovados ao vivo, usa as cores e o logotipo da sua marca, e atualiza automaticamente quando você aprova novas avaliações.
Este guia cobre:
| Widget | Tamanho de incorporação | Melhor posicionamento |
|---|---|---|
| Mural de Amor | Largura total, 800px+ de altura | Página dedicada /depoimentos ou /avaliacoes |
| Carrossel | Largura total, 280–360px de altura | Hero da página inicial, página de preços, landing page |
| Badge | 220×48px | Barra de navegação, rodapé, ao lado dos planos de preços |
| Formulário de Coleta | Largura total, 700px de altura | Página pós-compra, página de agradecimento, painel |
Os quatro widgets são servidos via HTTPS, carregam de forma assíncrona (sem impacto nos Core Web Vitals) e atualizam automaticamente quando você aprova novos depoimentos — sem necessidade de re-incorporação.
<iframe> — ele é único para o seu workspaceUma grade masonry completa de todos os depoimentos aprovados. Use-o em uma página dedicada de avaliações ou depoimentos.
Inclui: nome do avaliador, foto, empresa, cargo, classificação em estrelas, texto da avaliação, fotos, miniaturas de vídeo, barra de filtros, cores da marca e um CTA opcional "Deixar uma avaliação".
<iframe
src="https://socialproof.reviews/YOUR-SLUG/wall"
width="100%"
height="800px"
frameborder="0"
style="border:none; width:100%;"
title="Wall of Love"
></iframe>
<iframe
id="spr-wall"
src="https://socialproof.reviews/YOUR-SLUG/wall"
width="100%"
frameborder="0"
style="border:none; width:100%;"
title="Wall of Love"
onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px'"
></iframe>
Um slider de depoimentos com rotação automática. Ideal para páginas iniciais, páginas de preços e landing pages onde o espaço é limitado.
Inclui: slides de depoimentos em rotação, nome do avaliador, foto, empresa, classificação em estrelas, texto da avaliação, pontos e setas de navegação, cores da marca.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Dica de altura: Se seus depoimentos forem longos, aumente para 320–360px. O padrão de 280px cabe em um único card.
Dicas de posicionamento:
Uma pílula de confiança compacta exibindo sua classificação em estrelas agregada e o número de avaliações. Projetado para barras de navegação, rodapés e ao lado de planos de preços.
Inclui: classificação em estrelas agregada (ex.: ★ 4,9), número total de avaliações, destaque na cor da marca, link para o seu Mural de Amor completo ao clicar.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
width="220px"
height="48px"
frameborder="0"
style="border:none;"
title="Rating Badge"
></iframe>
Dicas de posicionamento:
Incorpora seu formulário de envio de depoimentos diretamente no seu site — sem redirecionar para uma página separada.
Inclui: fluxo de múltiplas etapas (classificar → sobre você → avaliação → vídeo opcional), cores e logotipo da marca, validação de e-mail, upload de foto e exibição opcional de recompensa após o envio.
<iframe
src="https://socialproof.reviews/YOUR-SLUG"
width="100%"
height="700px"
frameborder="0"
style="border:none; width:100%;"
title="Leave a Review"
></iframe>
Melhores posicionamentos:
Os widgets do SocialProof.Reviews usam uma tag HTML padrão <iframe> e funcionam em todas as principais plataformas de sites. A tabela abaixo mostra como adicionar um elemento de HTML personalizado ou incorporação em cada plataforma.
| Plataforma | Elemento a usar |
|---|---|
| WordPress | Bloco HTML personalizado |
| Webflow | Componente Embed (Avançado) |
| Wix | Embed HTML (Embed e Social) |
| Squarespace | Bloco de Código |
| Shopify | Editar Código (Temas) |
| Kajabi | Bloco de Código Personalizado |
| ClickFunnels 2.0 | Elemento JS/HTML personalizado (Misc) |
| Framer | Componente Embed (Utilitário) |
| Systeme.io | Elemento HTML bruto (Avançado) |
| React / Next.js | Elemento JSX <iframe> |
| HTML personalizado | Cole diretamente no seu HTML |
Método recomendado — Bloco HTML personalizado (Gutenberg):
<iframe> no blocoAlternativa — Construtores de páginas:
Nota: Os planos Gratuito e Personal do WordPress.com restringem as tags
<iframe>. Você precisa do plano Business ou superior, ou use o WordPress.org auto-hospedado.
<iframe>Nota: O conteúdo incorporado é exibido como um espaço reservado cinza no Designer. Ele renderiza corretamente no site publicado.
<iframe>Nota para o Wix Studio: Use o ícone + para adicionar um elemento HTML iFrame — os passos são os mesmos.
HTTPS obrigatório: A URL
srcno seu iframe deve usarhttps://, nãohttp://.
<iframe>Requisito de plano: O suporte a iframes requer o plano Business, Commerce ou superior do Squarespace. A URL
srcdeve usar HTTPS.
page.liquid)<iframe> na seção apropriada do HTMLAlternativa — Editor de páginas do Shopify:
<>)<iframe> no campo CódigoPara centralizar o widget, envolva-o em uma div:
<div style="text-align:center;">
<iframe src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%" height="280px" frameborder="0" style="border:none;"></iframe>
</div>
Nota: Se você estiver incorporando um vídeo de depoimento separadamente, use o Bloco de Incorporação de Vídeo dedicado do Kajabi para melhor desempenho. Para o mural ou carrossel do SocialProof.Reviews, o bloco de Código Personalizado é a escolha certa.
<iframe> e feche o editorSe o iframe aparecer muito pequeno, adicione dimensões explícitas:
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
style="width:100%; height:320px; border:none;"
frameborder="0"
title="Customer Reviews"
></iframe>
<iframe> completo, ouTamanho no mobile: Ajuste a largura e a altura do componente Embed manualmente para garantir a exibição correta em telas menores.
<iframe> e clique em SalvarTamanho: Defina
width="100%"e uma altura fixa (ex.:height="300px") diretamente na tag iframe para um layout previsível.
Cole o widget como um elemento JSX <iframe>. Observe que frameborder se torna frameBorder e style recebe um objeto em JSX:
export default function TestimonialsSection() {
return (
<section>
<h2>What our customers say</h2>
<iframe
src="https://socialproof.reviews/your-slug/widgets/carousel"
width="100%"
height="300"
frameBorder="0"
title="Customer Reviews"
style={{ border: 'none', width: '100%' }}
/>
</section>
);
}
Para o Mural de Amor no Next.js (App Router):
// app/testimonials/page.jsx
export default function TestimonialsPage() {
return (
<main>
<h1>Customer Testimonials</h1>
<iframe
src="https://socialproof.reviews/your-slug/wall"
width="100%"
height="900"
frameBorder="0"
title="Wall of Love"
style={{ border: 'none', width: '100%' }}
/>
</main>
);
}
Cole o iframe diretamente em qualquer arquivo HTML ou template onde deseja que o widget apareça:
<!-- Widget Carrossel -->
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Substitua YOUR-SLUG pelo slug do seu workspace. O widget carrega de forma assíncrona e não bloqueia a renderização da página.
Todos os widgets herdam automaticamente o branding do seu workspace. Para alterar cores, logotipo, títulos ou ativar/desativar seções:
Consulte o guia de Branding para detalhes completos.
Todos os widgets do SocialProof.Reviews:
width="100%"Preciso de um desenvolvedor para incorporar os widgets? Não. Todas as plataformas listadas acima suportam colar HTML sem escrever código. Você só precisa de acesso ao editor de páginas do seu site, nada mais.
Qual plano do Squarespace preciso para incorporar iframes? Você precisa do plano Business, Commerce Basic ou Commerce Advanced. As incorporações de iframe não estão disponíveis nos planos Personal ou Starter.
O widget deixa meu site mais lento?
Não. O <iframe> carrega de forma assíncrona em um contexto de navegador separado e não bloqueia o caminho de renderização crítico da sua página nem afeta sua pontuação de Core Web Vitals.
Por que o iframe está mostrando uma caixa cinza em vez do widget? Na visualização Designer do Webflow e no modo de prévia do Framer, os iframes são renderizados como marcadores. Publique o site e visualize a URL ao vivo — o widget será exibido corretamente.
Posso incorporar o widget em um e-mail?
Os clientes de e-mail bloqueiam iframes por segurança. Em vez disso, vincule diretamente à URL do seu Mural de Amor no e-mail. Para sequências pós-compra, vincular a https://socialproof.reviews/YOUR-SLUG (o Formulário de Coleta) geralmente funciona melhor de qualquer forma.
O que acontece quando aprovo um novo depoimento — preciso re-incorporar? Não. O widget busca dados ao vivo do SocialProof.Reviews toda vez que carrega. Aprove um depoimento no seu painel e ele aparece automaticamente no widget.
O WordPress.com permite iframes? WordPress.org auto-hospedado: sim, sempre. WordPress.com: iframes requerem o plano Business ou superior. Em planos inferiores, o bloco HTML personalizado remove a tag iframe.
Por que o widget do Kajabi não está sendo exibido?
A causa mais comum é uma URL de origem HTTP. Certifique-se de que o src do seu iframe começa com https://. Confirme também que usou o bloco de Código Personalizado (não o editor de texto), pois o editor de texto rico no Kajabi remove o HTML bruto.
Posso incorporar o Formulário de Coleta dentro de um passo de funil do ClickFunnels?
Sim. Use o elemento JS/HTML personalizado (seção Misc) no ClickFunnels 2.0, cole o código iframe do Formulário de Coleta e defina height para pelo menos 700px para evitar que o formulário apareça cortado.