Ucademy

Santiago

Clase V: Herramientas I: Serviceform

Profesor: Enric Garre

Clase V: Herramientas I: Serviceform

Módulo Chatbots - Herramientas 1.mp4

Material Complementario

Calendario clases en directo

¿Qué es la IA? Módulo 2

Definición y Evolución de la IA Módulo 2

Ejercicios prácticos Chat GPT 4 Módulo 2

Apuntes Módulo 3

Ejercicios Módulo 3

Infografías Módulo 3

Apuntes Módulo 4

Workcamp IA for Business

Módulo 5: Sin límites: Construye chatbots increíbles sin escribir código

bienvenidos a las herramientas. En este caso nos vamos a centrar en cómo crear una herramienta de chatbot con un árbol de decisión, una segunda herramienta que será vinculada con inteligencia artificial y un árbol de decisión un poco más básico. Y finalmente también hablaremos de cómo publicar una herramienta en la página web. En este caso nos vamos a centrar en la página web de Academy importante de explicar que yo me voy a centrar usando service for, porque es la plataforma que más conozco, este mismo proceso que yo voy a seguir. Aquí hay infinidad de plataformas que siguen exactamente el mismo. Puede ser hotspot, intercom, Sell, Force zoo, hacks obviamente, Microsoft Azure. Todas estas plataformas que nos permiten generar chatbots sin código siguen un procedimiento muy parecido. Se crea una primera herramienta se estructura el árbol de decisión, este árbol de decisión se establecen unas variables de ramificación y al final llegamos a un punto en el que se ha solventado la incidencia del usuario o se ha captado la información. Dicho esto, yo me voy a centrar en Servir P porque para mí es primero, que es la empresa en la que yo trabajo, segundo, que es la más intuitiva que he probado hasta la fecha. Es una herramienta que se ha pensado para ser cien por ciento libre de código. Es decir, no hace falta tener conocimientos ni de Javascript, ni de Pyton, ni de ningún tipo de estructura de código, ni de HTML tampoco para poder publicar estas herramientas. Y dicho esto, pues empezamos y a partir de aquí vais a ver la grabación de mi pantalla y yo os iré explicando paso a paso lo que voy haciendo. Vale, En este caso, como podéis ver, estoy en la web de Academy, El back office de Academy. Perdonad. Vale, en este back office, como podemos ver, este sería el panel principal de bienvenida. Podemos ver los leds? Podemos hablar de Rewards? Necesitamos ayuda, añadir miembros a tu equipo, pero nos vamos a centrar en lo que sería la parte más importante, que es la parte de herramientas. Vale, Como podéis ver, aquí no hay ninguna herramienta. Y antes de empezar a crear herramientas hay una Hay una parte que es muy importante, que en este caso la hemos hecho previamente, que es la de generar un código que va implementado en la web. Es el Pixel, que se llama el Pixel, es la herramienta que nos permite conectar nuestra plataforma con la publicación del CHATBOT. Vale, En este caso, el Pixel se puede establecer en formato HTML, pero también en formato plug In the WordPress en formato Google Tac Manager en formato shopify Web Flow West Qar Space. Vale, En este caso hemos enviado el Pixel en formato HTML y este Pixel se ha implementado en la web de Academy que os lo voy a enseñar para que podáis ver dónde está. Ah, Mhm está en el apartado GED de la web. Mmm cero. Vale, y como podréis ver, aquí empieza el script de Service for Vale. Y de aquí hasta aquí se ha implementado el scrip de Servi for que es toda esta línea de código de aquí? De acuerdo, qué nos permite este píxel o esta línea de código que está aquí implementada? Pues nos permite varias cosas. La primera nos permite analizar las estadísticas de la web en tiempo real. Vale, En este caso, hace unos diez minutos que hemos implementado el Pixel, por lo que las estadísticas no son apabullantes, porque esto lo estamos viendo las veces que se ha visto la web. Vale, pero desde aquí podemos controlar todos los resultados, tanto las Pat, o sea, los visitantes únicos de la web, las interacciones, el número de leads, el número de life chats, el número de Redick Vale. Y aquí en un gráfico se podrían ver cómo son los resultados día a día o mes a mes. Podemos ver la estructura de un de filtrado por fechas. Vale, tenemos, pues agosto, septiembre de un año entero y aquí podríamos ver todas las estadísticas y todas las gráficas. Vale, en este caso no hay ninguna porque todavía no tenemos la herramienta creada, que es el siguiente paso a lo que vamos a ir ahora. Vale, mhm. Una vez tenemos el píxel implementado que este pixel, repito, se instala en el GED de la web y si no queréis hacerlo a través del Get y tenéis un WordPress se puede hacer a través del código de Wordpress. Es super sencillo. El único requerimiento es tener un acceso de administración de administrador a la página web en cuestión e implementarlo en en el Get o en el como un plugin una vez. Esto está hecho. Vale, vamos a la parte de herramientas en esta parte de herramientas lo que haremos será añadir una herramienta de árbol de decisión y una herramienta con inteligencia artificial. Vale, entonces, en el blog Service Fore tenemos distintas herramientas. Tenemos ChatBot Life chat, un chat incrustado en la página web, un formulario dinámico, un pop up whatsapp chat porque somos partner de meta y tenemos whatsapp Business API Landing Page específicas o video Fors. Nos vamos a centrar en el chatbot, que es lo que nos ocupa, pero también podemos generar formularios dinámicos u otro tipo de herramientas. Vale. En cuanto al chatbot, podemos poner el nombre que queramos y la lengua predominante para el tema de las correcciones ortográficas. Vale, ahora entramos ya que lo que sería el, el las entrañas de cómo crear o cómo customizar un chatbot. Vale, En este caso, yo voy a centrarme en coger los colores de de Oca Demy. Vamos a descargarnos el logo de Academy. Vale, que sería? Pues éste es el logo que era en el icono del Chatbot como tal. Luego tenemos el logo The Academy como tal. Vale, también nos lo descargamos y lo guardamos y empezamos con la customización. Como podéis ver, aquí tenemos la parte de diseño. Vale, hay una parte de templete y hay una parte de Welcome Page en service for lo que hemos hecho ha sido generar plantillas que se pueden reutilizar de cara a que los usuarios que entren no tengan ni que pensar según su área de, O sea, no tengan ni que pensar cuál sería el flujo de cualificación, porque nuestra experiencia nos ha permitido generar herramientas que han funcionado muy bien. Vale, Dicho esto, lo empezaremos a crear desde cero, sin ningún tipo de edición para ir paso a paso. Hay una tercera pestañita, que es la Wellcome Page, que la welcome page para que nos hagamos una idea, luego la desarrollaremos. Es la página de inicio del Chat Pot. Está el pop up, que es la Es la viñeta que nos aparece encima de la redondita de te icono de aquí, del chat. Vale, Y luego el pop up es lo que generan en Gage Met, pero la Welcome Page es el primer punto de partida de dónde nos encontraríamos en la conversación. Dicho esto, vamos a empezar con la edición o la customización de este chatbot. En el caso de Academy, como vemos que en el lado derecho tienen un botón de whatsapp. Vamos a posicionar el chat bot en el lado izquierdo. Aunque a nivel experiencia sabemos que el posicionamiento perfecto de un chatbot es en el lado derecho de la página web. Lo vamos a dejar para lo último, pero quiero que veáis que está el tipo de herramienta, la alineación en la página y la lengua. Vale, si yo lo cambio a estamos en Ride. Perdón, si lo cambio LED me a aparecer en el lado izquierdo de la pantalla. Vale, Luego os enseñaré por qué lo pongo aquí y cómo podemos verlo Ubicado en una página web en el apartado del logo. Vale, seleccionamos una una foto desde desde nuestra base de datos. Vale, en en lo que vendría a ser el avatar. Pues podemos usar una imagen descargada o podemos usar una de nuestro banco de imágenes. Vale, podemos usar en este caso este pequeño robot. De acuerdo. Y al Heather le podemos dar un color si quisiéramos. En este caso, vamos a usar una pequeña herramienta para hacer un muestreo de color y usaremos el color que vemos aquí. Lo voy a copiar, vale? Y el y lo dejaremos con este color verde. Claro que luego os enseñaré también a ponerlo en otros lados. De acuerdo? Vale. Dicho esto, el botón de aquí abajo. Vale este botoncito, que es donde se inicia la conversación. Le vamos a poner el otro logo que nos hemos descargado para que se vea más acorde con la imagen de la web. Tenemos distintas opciones de personalización. Vale, como círculo, como un icono vibrante o como un texto. No vamos a ponerle ninguna información más y a partir de aquí ya estaría la primera imagen para que veáis esto es como se vería el chatbot. Vale. Y esta primera imagen ya está configurada. Luego podemos configurar incluso el el color de los botones para que veáis. Voy a poner el mismo color que el GED. Vale. Le vamos a poner a border color, el mismo que no tenemos borde de color. Así se ve todo más limpio y mucho más, más correcto, desde mi punto de vista. Vale. Y luego podemos customizar text colors, option, colors, background. Le podemos poner el mismo background a todo el chatbot o a toda la conversación. Vale. En este caso voy a dejarlo en blanco, porque a mí personalmente me gusta más. Vale, pero podríamos dejar todo el background del mismo color para que sea más, más suave. Otra opción de color sería pues, por ejemplo, perdona, sería coger este color de aquí y que los botones fueran de este mismo color. En este caso podemos hacerlo así. Y la letra la ponemos negra. Vale, Luego, lo bueno que tiene esta herramienta es que nos permite interactuar para ver cómo va quedando la conversación. Cada vez que hay una interacción, vale el logo de Academy. En este caso se nos ha quedado un poco pequeño porque no es el logo grande, sino que sería más bien adaptado para para el boto Michal. Pero bueno, no pasa nada. Podemos jugar con esto o podemos ponerlo? Si luego, si quisiéramos no habría ningún problema. Lo que hemos hecho ha sido cambiar el logo porque el que estábamos viendo anteriormente no estaba muy bien y este es un poquito más acorde con lo que estamos viendo a nivel de diseño. Vale, Dicho esto, que incluso le podemos añadir una imagen de fondo si quisiéramos. Vale, voy a poner esta para que la podamos ver, pero luego la quitaré porque no, no va a quedar bien. Vale, Se puede poner ésta o se puede poner cualquier imagen que se interese que nos interese a Vale esta parte de los advan settings. Vale, como podéis ver, en todas las partes donde hay cosas que no sabemos lo que pueden, pueden ser. Tenemos un botón de información. Vale, Si en este caso contiene flow, que si ponemos esta opción moverá al usuario de El chatbot seguirá la conversación entre página y página a medida que vaya avanzando. Esto es interesante si tenemos una conversación con un chatbot que nos está redirigiendo y nos está ayudando a navegar o a nivel navegación dentro de la página web. Que la conversación siga desde el último punto en el que estamos. Vale, pero esto será una parte posterior cuando vayamos a ver el tema del flow. Si os fijáis por orden lógico, vale, deberíamos ir a la Welcome Page. Vale, La web Page no es nada más que la web, la página desde que iniciaremos la conversación, pero yo siempre intento quitarla. A mí personalmente no me gusta porque genera confusión. Luego aquí se puede jugar. Vale, se puede poner y vamos a coger la aprende hoy lo que el mundo te pedirá mañana. Vale, aprende hoy lo que el mundo te pedirá mañana. Entonces el Heather del color background. Pues le podemos poner un un color clarito. Vamos a jugar con los colores que están en Academy. Pues vamos a jugar con, por ejemplo, vamos a volver a poner este verde. Vale, Aquí no pondremos nada. Perdón. Los botones. Luego aquí tenemos los botones. Los botones son este que contact o Geta offer. Vale, entonces, botón. Botón del título. Vale. Aquí podemos coger un color. Podemos ponerle el mismo color o podemos ponerle el color que nos dé la gana. Podemos ponerle rojo si quieres, por jugar un poco con los colores y que se vea un poco más visual. Aunque la combinación no es la mejor del mundo. Vale, e incluso podemos jugar con el color de la letra. Podemos poner la negra. Podemos poner la fucsia amarilla, naranja. O sea, podemos jugar un poco con todo. Vale, yo, en este caso la dejaría en blanco. Vale. Se pueden combinar colores. En este caso, por ejemplo, podemos coger el color este más clarito que lo tenemos por aquí. Puesto este color más clarito lo podemos coger y ponerlo en el segundo botón. Vale. Y aquí la letra ponerla en negro. O sea, podemos combinar distintas opciones de de colores, de imagen, Lo que queramos. Podemos hacerlo yo aquí también. Es verdad que voy a dejarlo así y con la letra negra para que sea un poquito más bonito. Vale, Perfecto. Podemos seguirle. Veis? Aquí por ejemplo, si le añadimos el radio, lo hacemos, lo hacemos rectangular. Si lo quitamos, lo hacemos redondo. Ah, vaya. Vale, vale. Si bajamos, lo hacemos más o menos redondo, según lo que nos interese. Entonces el tope es cien. Lo dejamos en cines como estaba. Vale. Dicho esto, hay una opción tres que es esta de aquí, que es Live charia, que es para cuando generemos un chatbot con inteligencia artificial, poder iniciar la conversación desde aquí. Si no vamos a usar inteligencia artificial, lo podemos quitar. Vale, Podemos suprimir. Vale. O incluso le podemos añadir elementos. Le podemos añadir más elementos. Vale, Aquí podemos seleccionar. Pues la hecha Te botton large boton, float, float, bottoms vídeo Lo podemos añadir un vídeo código HTML. Podemos añadirle unos recu que se tienen que rellenar. Podemos jugar mucho en todo lo que le que le queremos poner. Vale, sí que es cierto que yo la opción más habitual es la dejar la la dicha teria y poner Hola. Hola. Habla con nuestra ía o pregunta nuestra ía pregúntale en nuestra guía vale parte importante de lo que estemos haciendo siempre. Yo recomiendo a medida que hagamos un paso y tengamos decidido cómo queremos que quede aquí arriba a la derecha hay un botón de safe. Por qué es importante el botón de Safe? Porque si por lo que sea salimos con el botón de Back y volvemos a entrar, no se guardarán los cambios. Entonces esto pasa aquí y pasa en cualquier plataforma que estemos usando sin código. El botón de Saif os va a salvar la vida. Y no es broma. Vale, una vez tenemos hecho el diseño de cómo se ve la estructura y de la Welcome Page iríamos a lo que sería el float. Vale, si os fijáis como lo he puesto en el lado izquierdo, el chatbot me aparece en el lado izquierdo del builder. Esto es normal. Vale, esto siempre pasa. Entonces lo que vamos a hacer va a ser momentáneamente, alinearlo a la derecha y luego volveremos para volverlo a alinear a la izquierda a la hora de publicar, porque si no, no podéis ver el Builder. Vale, Como podéis ver, el Chatbot siempre viene con cuatro primeras preguntas de iniciales. Vale, son muy básicas y muy sencillas. Entonces lo que nosotros haremos será customizar este chatbot para generar un árbol, un árbol de decisión que nos lleve desde un mensaje de bienvenida hasta generar un nit medianamente o medianamente cualificado que se aplicará en la Home Page, que veremos luego como se publica, Vale. Y aquí solamente es empezar a editar, empezar a editar, pues todo el texto que queremos poner Bienvenida a Academy Academy. Perdón, aprende a qué podemos hacer un ejemplo rápido, Vale. Y vale, esta sería la primera pregunta. Y fijaos que la primera pregunta siempre lanza a la pregunta número dos. Vale?

El texto de referencia ofrece un tutorial completo sobre cómo crear y publicar una herramienta de chatbot en una página web, enfocándose en el uso de la plataforma Service For, aunque menciona que otras plataformas como Hotspot, Intercom, Salesforce, Microsoft Azure, entre otras, siguen procesos similares para la creación de chatbots sin necesidad de código. Se detallan los pasos para establecer un árbol de decisión, cómo vincular la herramienta con inteligencia artificial para una experiencia más avanzada, y la importancia de integrar un Pixel en la web para conectar el chatbot y analizar estadísticas de la página en tiempo real.El proceso comienza con la creación de la herramienta en la plataforma elegida, enfocándose en la estructuración del árbol de decisión y la personalización del chatbot, incluyendo la selección de colores, logos, y la posición en la página web. Se enfatiza en la capacidad de la plataforma de Service For para permitir una personalización profunda sin necesidad de conocimientos de programación.La importancia de la implementación correcta del Pixel se destaca como un paso previo necesario para la publicación del chatbot, permitiendo la conexión con la página web y el seguimiento de métricas clave. Se ofrece una detallada explicación de cómo implementar este Pixel y cómo personalizar la apariencia y funcionamiento del chatbot para alinearlos con la identidad de marca de la página web.Finalmente, se describe el proceso de publicación de la herramienta en la página web, asegurando que el chatbot esté correctamente alineado, tanto en diseño como en funcionalidad, con los objetivos de la página. Se menciona la capacidad de estas herramientas para generar leads, interactuar con los usuarios en tiempo real, y proporcionar una experiencia de usuario mejorada a través de la inteligencia artificial y los flujos de conversación personalizados.

Creación de chatbots con árbol de decisión y AI: guía paso a paso

Creación de chatbots con árbol de decisión y AI: guía paso a paso

Resumen con marca de tiempo

¡Ey! Que seguro que esta no es la única duda que tienes...