Configurar el widget de testimonios

Elegir una plantilla

Opinafy ofrece más de 100 plantillas de widget prediseñadas, organizadas por estilo y caso de uso.

Tipos de plantillas

• Clasicas: Disenos limpios y profesionales para cualquier sector.
• Modernas: Con gradientes, sombras y efectos visuales contemporaneos.
• Minimalistas: Para webs que priorizan la simplicidad.
• Creativas: 15 plantillas con diseños únicos y llamativos.
• Oscuras: Perfectas para webs con fondo oscuro.

Puedes previsualizar todas las plantillas en opinafy.com/plantillas antes de elegir.

Personalizar colores y tipografia

Cada plantilla es totalmente personalizable para que se adapte a la identidad visual de tu marca.

Opciones de personalización

• Color de fondo: Del contenedor del widget.
• Color de tarjeta: De cada tarjeta de testimonio individual.
• Color de texto: Del nombre, contenido y metadatos.
• Color de estrellas: Personaliza el color de las valoraciones.
• Color de acento: Para bordes, badges y elementos decorativos.
• Tipografia: Elige entre cientos de Google Fonts. El widget las carga automáticamente.
• Radio de bordes: Ajusta la redondez de las tarjetas.
• Sombras: Activa o desactiva las sombras de las tarjetas.

Los 7 layouts disponibles

Elige el layout que mejor se adapte a tu web y al espacio disponible:

1. Carousel

Muestra los testimonios en un carrusel horizontal con navegación por flechas o autoplay. Ideal para secciones estrechas o para mostrar muchos testimonios sin ocupar espacio vertical.

2. Grid

Muestra los testimonios en una cuadricula responsive. Se adapta automáticamente al ancho disponible (1, 2 o 3 columnas). Ideal para páginas dedicadas a testimonios.

3. Wall (Masonry)

Diseño tipo Pinterest donde los testimonios se organizan en columnas de altura variable. Cada tarjeta ocupa el alto natural de su contenido. Ideal para mostrar testimonios de diferentes longitudes.

4. Single

Muestra un solo testimonio a la vez con transicion suave entre ellos. Ideal para hero sections o sidebars donde el espacio es limitado.

5. Badge

Un widget compacto tipo badge que muestra la valoración media y el número de testimonios. Perfecto para colocar en headers, junto al logo o en botones de confianza.

6. Popup FOMO

Muestra testimonios como notificaciones emergentes en la esquina inferior de la pantalla. Aparecen periódicamente para crear urgencia y prueba social. Ideal para ecommerce y landing pages de conversión.

7. Marquee

Los testimonios se desplazan horizontalmente de forma continua, como un ticker de noticias. Ideal para secciones de logos de clientes o como banner de confianza.

Código embed (una sola linea)

Instalar el widget en tu web es tan fácil como copiar y pegar una linea de código:

<div data-opinafy="tu-proyecto-slug" data-template="nombre-plantilla"></div>
<script src="https://opinafy.com/widget.js" async></script>

Eso es todo. El widget se carga automáticamente, obtiene tus testimonios aprobados y los muestra con la plantilla que hayas elegido.

Smart Tags (data-tags)

Puedes personalizar el comportamiento del widget usando atributos HTML:

• data-opinafy="slug" - El slug de tu proyecto (obligatorio).
• data-template="nombre" - La plantilla a usar.
• data-layout="carousel|grid|wall|single|badge|popup|marquee" - El layout.
• data-limit="10" - Número máximo de testimonios a mostrar.
• data-min-rating="4" - Solo testimonios con valoración mínima.
• data-tags="vip,premium" - Filtrar por etiquetas.
• data-autoplay="true" - Autoplay en carousel/single.
• data-speed="5000" - Velocidad de autoplay en milisegundos.

Modos de visualización de video

Si tus testimonios incluyen video, puedes elegir como se muestran:

• Inline: El video se reproduce dentro de la tarjeta del testimonio.
• Modal: Al hacer clic, el video se abre en un modal a pantalla completa.
• Thumbnail: Se muestra una miniatura y al hacer clic se reproduce.

Preview en vivo

Desde el panel de control, puedes previsualizar el widget antes de instalarlo en tu web.

1. Ve a Proyectos > Tu proyecto > Widget.
2. Selecciona plantilla, layout y personaliza los colores.
3. El preview se actualiza en tiempo real mientras haces cambios.
4. Cuando estes satisfecho, copia el código embed.

El preview muestra exactamente como se vera el widget en tu web, incluyendo testimonios reales de tu proyecto.