La mensajería enriquecida, como botones y carruseles, no es compatible con Salesforce. Por lo tanto, hemos creado nuestros propios scripts para que los agregue en Salesforce como recursos estáticos para activar los botones como mensajes enriquecidos en los flujos de diálogo. Esto lo debe hacer un administrador de Salesforce.
- Scripts
- Lightning Component
- Configuración de Salesforce
- Eliminar HTML de la transcripción de chat
- Personalizaciones recomendadas
Complemento
Estos scripts activan todas las funciones de personalización y el CSS para representar la mensajería enriquecida.
Descargue el complemento
- Descargue el archivo assets.zip desde aquí
- Descomprima el archivo zip y encontrará una carpeta llamada rich-message-plugin y verá dos archivos:
- CustomEvents_AddButtons.js
- CustomEvents_AddButtons_Stylesheet.css
Cargue el complemento
Los dos archivos deben agregarse como recursos estáticos. Para hacerlo:
- En Salesforce, vaya a Configuración > Código personalizado > Páginas de Visualforce -> Developer Console (se abre en una nueva ventana)
- En la nueva ventana, seleccione Archivo > Nuevo > Recurso estático
- Establezca los campos de la siguiente manera:
-
Nombre: CustomEvents_AddButtons
- Nota: (Puede cambiarle el nombre si lo desea y esta es la referencia que usará en el código del widget más adelante y no necesita el .js o .css respectivamente)
- Tipo MIME: text/javascript o text/css, según el archivo que esté cargando
-
Nombre: CustomEvents_AddButtons
- Haga clic en Enviar.
- Repita los pasos 2 a 4 para el archivo CustomEvents_AddButtons_Stylesheet.css
Edite el widget de chat para que haga referencia al complemento personalizado
- En el código fuente del sitio web, ubique el fragmento del widget del complemento
-
Agregue las siguientes líneas arriba
embedded_svc.init():
embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];
Lightning Component
El componente Lightning activa el indicador de escritura y reemplaza el componente de mensajes de chat estándar con uno que puede entender la lógica de HTML.
Descargue el componente Lightning
Dentro de la carpeta zip que descargó anteriormente, hay una carpeta rich-message-lightning-web-component.
Instale e implemente el componente
Si es la primera vez que implementa un componente web, consulte la guía de prueba aquí.
Instalar
-
Cree el proyecto en VS Code: tendrá que activar la extensión de Salesforce y descargar la CLI de Salesforce
-
Cree un proyecto seleccionando SFDX: Crear proyecto en Ver > Paleta de comandos
Acepte la plantilla estándar y asígnele el nombre del proyectolwcchatpack. -
En force-app/main/default, haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Crear componente de web Lightning.
-
Ingrese
lwcchatpackcomo nombre del nuevo componente y acepte los valores predeterminados -
Reemplace los archivos que se crearon automáticamente con los que se descargaron de Google Drive y agregue el nuevo archivo css. Guarde todo
-
Desplegar
-
-
En Ver > Paleta de comandos, escriba SFDX: Autorizar una organización.
Cuando se le solicite, acepte el valor predeterminado del proyecto y presione Intro para aceptar el alias predeterminado. Si se le solicita que permita el acceso, haga clic en Permitir. -
Haga clic con el botón derecho en la carpeta predeterminada y seleccione SFDX: Implementar este origen en la organización.
-
Si la implementación para el editor de código no funciona, puede hacerlo desde la CLI ingresando lo siguiente
cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default
Actualizar configuración de Salesforce
Para poder utilizar este nuevo componente, es necesario activarlo en el widget de chat.
Esto se controla a través del “servicio incrustado” que ya está usando (este es el widget que está usando).
Para actualizar la configuración, vaya a Configuración > Embedded Service Deployment seleccione el widget correspondiente, haga clic en Vista y luego edite la configuración de chat.
Luego verá la sección “Personalizar con el componente Lightning” donde puede reemplazar el componente predeterminado “mensaje de chat” con el que hemos instalado anteriormente. Recuerde usar el nombre de proyecto lwcchatpack que usamos anteriormente.
Eliminar HTML de la transcripción de chat
Ahora que hemos agregado la capacidad de tener toda esta excelente personalización y opciones enriquecidas, queremos asegurarnos de que la transcripción del chat siga siendo legible.
Podemos cambiar eso para que el HTML se represente agregando un disparador de transcripción de chat.
Configuración > Administrador de objetos > Transcripción de chat > Disparador > Nuevo
trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('<','<').replaceAll('>','>').replaceAll('"','"').replaceAll('&','&');
}
}
}
Recomendaciones
Ajustar el ancho del cuadro de chat
Para una mejor experiencia, recomendamos aumentar el ancho del cuadro de chat. Como mínimo, sugerimos 350 px, aunque 450 px sería lo ideal.
Para ajustar esto, en el código del widget busque la línea a continuación y establezca el valor que desee.
embedded_svc.settings.widgetWidth =
Ajustar el color y la fuente predeterminados
Dentro del archivo css en el código del widget, busque el selector de color, de manera predeterminada será morado, pero esto se puede ajustar en el archivo CustomEvents_AddButtons_Stylesheet.css que cargamos al principio.
En caso de que necesite sobrescribir el color que ha configurado, por ejemplo, si desea tener estrellas amarillas pero su marca es púrpura para el resto de los colores, solo tiene que agregar la etiqueta important;.