Convierte una respuesta simple en algo que se pueda tocar
Los mensajes enriquecidos son componentes interactivos que insertas en un mensaje con un shortcode. La persona con la que hablas ve una tarjeta, un conjunto de botones o un pequeño formulario, lo rellena y su respuesta se guarda en la conversación.
Escribir una lista de opciones y esperar que alguien responda con las palabras correctas crea trabajo para ambos. Los mensajes enriquecidos les dan algo en lo que hacer clic, lo que resulta útil para opciones, tarjetas de producto, datos de contacto, tablas de precios y vídeos.
Paso a paso
Escribe un mensaje y añade un shortcode
Los mensajes enriquecidos se insertan con shortcodes en el editor de texto del panel. Escribe o pega el shortcode que quieras, por ejemplo [buttons options="A,B,C"], y envía el mensaje con normalidad. La persona al otro lado verá el componente renderizado en lugar del texto del shortcode.
Rellena los parámetros
Cada shortcode admite sus propios parámetros. Una tarjeta de producto se ve así: [card image="URL" header="TÍTULO" description="..." link="URL" link-text="Comprar" extra="599€" target="_blank"], mientras que un vídeo es [video type="youtube" id="ID_DEL_VIDEO" height="350"] y acepta youtube o vimeo.
Añade los parámetros globales si los necesitas
Todo mensaje enriquecido también acepta id, title, message, success y settings. Usa title y message para presentar el componente, y success para lo que se muestra una vez que la persona ha respondido.
Escapa los caracteres conflictivos
Las comas, los dos puntos y las comillas tienen significado dentro de un shortcode, así que escápalos en tu texto con una barra invertida: \, para una coma, \: para dos puntos y \" para una comilla. Saltarse esto es la razón más común por la que un mensaje enriquecido se renderiza en fragmentos.
Traduce el texto si atiendes a más de un idioma
El texto original de un mensaje enriquecido debe estar en inglés. Añade la cadena en inglés y su traducción en Ajustes > Traducciones > Front End.
Crea uno personalizado cuando los shortcodes no lo cubran.
Los mensajes enriquecidos estáticos hechos con tu propio HTML se crean en Ajustes > Varios. Las clases útiles son <code>sb-rich-btn sb-btn</code> para un botón enlace, <code>sb-rich-btn sb-btn-text</code> para un enlace de texto, y <code>sb-image</code> para que la gente pueda ampliar una imagen al hacer clic.
Referencia de ajustes
| Configuración | Qué hace |
|---|---|
| [card] | Una tarjeta con estilo de producto que incluye imagen, encabezado, descripción, precio o texto adicional, y un botón de enlace. |
| [slider] y [slider-images] | Un conjunto deslizable de tarjetas, de hasta 10 diapositivas, o un carrusel de imágenes simple escrito como <code>[slider-images images="URL,URL,URL"]</code>. |
| [chips] | Pequeñas opciones en forma de chips pulsables, escritas como <code>[chips options="A,B,C"]</code>. |
| [buttons] | Un conjunto de botones de respuesta, escritos como <code>[buttons options="A,B,C"]</code>. |
| [select] | Una lista desplegable de opciones, escrita como <code>[select options="A,B,C"]</code>. |
| [inputs] | Un pequeño formulario con campos de texto y un botón de envío, escrito como <code>[inputs values="A,B,C" button="Enviar ahora"]</code>. |
| [email] | Recopila datos de contacto, por ejemplo [email name="true" last-name="true" phone="true" phone-required="false" placeholder=""]. |
| [timetable] | Muestra tu horario de apertura como un componente dentro del mensaje. |
| [articles] | Muestra artículos en el mensaje, escritos como [articles link="..."]. |
| [list] y [list-image] | Una lista simple, numerada, de dos columnas o con imágenes, por ejemplo [list values="A,B,- C,- D,E" numeric="true"] o [list-image values="URL:A,URL:B"]. |
| [table] | Una tabla de datos, escrita como [table header="A,B,C" values="A:B:C,A:B:C"]. |
| [button], [image] y [share] | Un botón de enlace único, una imagen mediante [image url="..."] o iconos para compartir en redes sociales con [share fb="" tw="" li="" pi="" wa=""]. |
Información útil
El HTML sin procesar está bloqueado en los mensajes normales
Por seguridad, no se permite HTML sin procesar ni JavaScript en los mensajes ordinarios. Si necesitas tu propio marcado, crea un mensaje enriquecido personalizado en Ajustes > Varios.
Los elementos de lista anidados necesitan un guion
En [list], antepone un guion y un espacio a una entrada para convertirla en un elemento interno, como en [list values="A,B,- C,- D,E"]. Para una lista de dos columnas con títulos, usa dos puntos: [list values="A:X,B:Y,C:Z"].
Los botones pueden abrir un artículo
Un botón se escribe como [button link="..." name="Haz clic aquí" target="_blank" style="link"]. Para abrir uno de tus artículos, usa #article-ID como valor del enlace.
Obligar a introducir datos de contacto en apps de mensajería
Añade required-messaging-apps="true" al shortcode [email] para exigir también el correo o teléfono en las apps de mensajería.
Formato y enlaces en el editor
El editor entiende *negrita*, __cursiva__, ~tachado~, `código` y ```bloque de código```. Los enlaces se convierten automáticamente; para ponerles nombre, añade #sb-ejemplo al final, con los espacios escritos como guiones dobles.
Los saltos de línea no son la tecla Enter
Pulsar Enter envía el mensaje. Usa MAYÚS+ENTER o CTRL+ENTER para añadir un salto de línea dentro de uno.
Preguntas frecuentes
¿Dónde escribo un mensaje enriquecido?
¿Qué ocurre con lo que alguien selecciona o escribe?
Mi tarjeta apareció rota en medio de una frase. ¿Por qué?
¿Cuántas diapositivas puede tener un carrusel?
¿Pueden aparecer los mensajes enriquecidos en otros idiomas?
¿Y si necesito un componente que no ofreces?
¿Listo para acabar con el caos?
Unifica tus mensajes, automatiza las preguntas repetitivas y convierte las conversaciones en ingresos, desde hoy mismo.
Empezar