¿Qué plan tengo?
Complemento Agentes IA - Avanzado

A todo el mundo le gusta tener una experiencia que sea visualmente atractiva y fácil de usar para los visitantes, sin embargo, la mensajería enriquecida, como botones y carruseles, no es compatible de forma nativa con Salesforce.

Creemos que la experiencia del usuario es tan importante que hemos creado nuestro propio complemento y scripts para usted. Al instalar nuestro complemento (comuníquese con su CSM para solicitar el complemento) puede aprovechar estos diseños dinámicos como mensajes enriquecidos en sus flujos de diálogo. Esto se puede implementar dentro de la experiencia de chat incrustado de Salesforce.

Las personalizaciones que se desbloquean incluyen:

  • Botones
  • Carruseles
  • HTML

Estas capacidades también se pueden personalizar para que coincidan con el aspecto y el funcionamiento de la marca.
En este artículo, veremos cómo aprovechar todas las opciones enriquecidas del generador de diálogo.

Para lograr estas opciones enriquecidas, siga las Instrucciones para activar el complemento de mensajería enriquecida de Salesforce con un administrador de Salesforce.

 

Botones

Los botones ya estaban disponibles con Salesforce, ¿cuál es la diferencia con el nuestro?

Son personalizables y se les puede dar formato para adaptarse a su marca y a la experiencia que desea diseñar. Eche un vistazo a las distintas posibilidades a continuación.

Tipo y modo de uso Ejemplo visual

Vertical predeterminada

 

Cómo usar

Esta será la vista estándar si no se especifica una versión.

Captura de pantalla del 2023-01-24 a las 09.50.30.png

Botones binarios horizontales

 

Cómo usar

Use &&version1&& en el mensaje del agente IA antes del botón.

Captura de pantalla del 2023-02-03 a las 17.19.28.png

Captura de pantalla del 2023-01-24 a las 09.52.37.png

Botones de fila horizontal

 

Cómo usar

Use &&version2&& en el mensaje del agente IA antes del botón.

 

Captura de pantalla del 2023-02-03 a las 17.17.16.png

Captura de pantalla del 2023-01-24 a las 09.50.42.png

CSAT - Estrellas

 

Cómo usar

Usar &&version3&& en el mensaje del agente IA antes de los botones.

Los botones deben ser 1 - 5 + “ahora no”.

Captura de pantalla del 2023-02-03 a las 17.23.00.png

Captura de pantalla del 2023-01-24 a las 13.26.23.png

CSAT - Emojis

 

Cómo usar

Usar &&version4&& en el mensaje del agente IA antes de los botones.

Captura de pantalla del 2023-02-03 a las 17.23.37.png

Captura de pantalla del 2023-01-24 a las 13.26.34.png

 

Carruseles

Los carruseles permiten mostrar más contenido de manera visual y el visitante puede elegir la opción que sea relevante para él o ella, pero son más grandes, más dinámicos y visuales en comparación con los botones.
A continuación encontrará las versiones que desbloqueamos con nuestro complemento. 

 

Tipo y uso Ejemplo visual

Carrusel predeterminado

 

Cómo usar

Esto se puede usar con o sin imágenes.

Cuando se usan imágenes, se puede agregar una matriz de URL de imágenes para crear un “collage”.

Admite botones normales y botones externos.

Captura de pantalla del 2023-01-24 a las 10.09.15.png

Carrusel ancho y oscuro

 

Cómo usar
La imagen actúa como fondo para toda la tarjeta. Admite varias imágenes por tarjeta, de manera similar al carrusel predeterminado. 

Use &&version2&& en el título de la primera tarjeta del carrusel
Esto también funciona con carruseles dinámicos

Captura de pantalla del 2023-01-31 a las 12.55.03.png

Captura de pantalla del 2023-01-24 a las 09.53.07.png

Carrusel sin imágenes y con formato de oferta

 

Cómo usar

Normalmente se puede usar para carruseles que muestran varios “paquetes”, niveles u otras ofertas.

Use &&version3&& en el título de la primera tarjeta del carrusel (también funcionaría con carruseles dinámicos).

Use la siguiente estructura de HTML en la descripción de la tarjeta


<h2>7.99€/mes</h2>
<h5>1 semana de prueba gratis</h5>
<p>luego 9.99€/mes. Se cancela en cualquier momento</p>


Captura de pantalla del 2023-01-31 a las 12.56.02.png

Chat.png

 

Ejemplos de HTML

En caso de que las opciones que hemos visto hasta ahora no sean suficientes, le ofrecemos la posibilidad de convertir HTML en mensajes realmente interesantes, además de transformar texto. 

 

Tipo y uso Ejemplo visual

Botón de vínculo externo


Cómo usar

Si se usa un solo botón de “vínculo externo”, se mostrará como en el ejemplo de la izquierda

Captura de pantalla del 2023-01-24 a las 13.33.33.png

Medios incrustados

 

Cómo usar

Ponga el HTML en el mensaje del agente IA sin otro contenido

<iframe src="https://www.youtube.com/embed/8dvFVEHKvrI" frameborder="0" allowfullscreen></iframe>>

<img src="https://www.ultimate.ai/hs-fs/hubfs/Website/Visuals/hp2-2.png">>

Captura de pantalla del 2023-01-24 a las 13.32.20.png

Botón de ancho completo

Cómo usar

Para ampliar el botón al ancho de todo el agente IA, es necesario agregar la clase "btn-full"

<div class="info">Some text</div>

<div class="buttons-wrapper buttons-wrapper-v0 btn-full">

<a target="_blank" href="https://www.google.com" class="oneElement">Purple button-link</a></div>

Captura de pantalla del 2023-01-24 a las 13.32.35.png

Cuadro de información con botones

Cómo usar

Mensaje de agente IA personalizado con dos niveles de jerarquías de texto y un botón.
Esto se puede usar para proporcionar información importante (como la fecha de entrega), información secundaria y una gran llamada a la acción (enlace externo)

También se podría combinar con el botón V2, esta vez con la versión dentro del mensaje del agente IA.

<div class="titlesBlock">
<p>🚚 Entregado el 30 de junio de 2022</p>
<p>📦 4 artículos enviados por Ultimate</p>
</div>

<div class="buttonBlock">
<div class="buttonBlock_text">
¿Aún no lo ha recibido? Es posible que su paquete haya sido entregado a un vecino o a un punto de recogida.
</div>

<div class="buttons-wrapper buttons-wrapper-v1"><a class="btn-default" href="https://www.google.com" target ="_blank">🔍 Hacer seguimiento del paquete</a>
</div>

Captura de pantalla del 2023-02-03 a las 17.21.21.png

Captura de pantalla del 2023-01-24 a las 13.31.46.png

 

Por supuesto, esto se puede personalizar a su gusto y los componentes de HTML son una inspiración para cualquier cosa que desee lograr.

Tecnología de Zendesk