Configurar el widget de testimonios

Elegir una plantilla

Opinafy ofrece mas de 80 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 disenos unicos 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 personalizacion

• 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 automaticamente.
• 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 navegacion 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 automaticamente al ancho disponible (1, 2 o 3 columnas). Ideal para paginas dedicadas a testimonios.

3. Wall (Masonry)

Diseno 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 valoracion media y el numero 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 periodicamente para crear urgencia y prueba social. Ideal para ecommerce y landing pages de conversion.

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.

Codigo embed (una sola linea)

Instalar el widget en tu web es tan facil como copiar y pegar una linea de codigo:

<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 automaticamente, 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" - Numero maximo de testimonios a mostrar.
• data-min-rating="4" - Solo testimonios con valoracion minima.
• data-tags="vip,premium" - Filtrar por etiquetas.
• data-autoplay="true" - Autoplay en carousel/single.
• data-speed="5000" - Velocidad de autoplay en milisegundos.

Modos de visualizacion 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 codigo embed.

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