Cómo añadir un chatbot de IA de Alibaba Cloud a tu sitio de WordPress

Crear una nueva instancia de chatbot

Abre tu navegador web, ve a console.alibabacloud.com e inicia sesión. En la barra de búsqueda superior derecha de la consola, escribe "Chatbot" y pulsa Enter; verás una lista de servicios de IA. Haz clic en el botón que dice Crear robot (o un botón similar como Crear instancia). Aparecerá un formulario pidiendo un nombre y una breve descripción. Después de escribir un nombre como "AyudanteDeRecepción" y hacer clic en Crear, la plataforma crea un nuevo bot y lo muestra en una tabla con el estado de "En ejecución". Si no ves un botón "Crear robot", busca un icono en forma de signo más o un menú etiquetado como Nuevo bot.

Sabrás que funcionó cuando la nueva entrada aparezca en la lista con un punto verde o la palabra "En ejecución".

Definir el saludo de bienvenida del chatbot

En la lista de bots, haz clic en el nombre del bot que acabas de crear para abrir su página de configuración. En el menú de la izquierda encontrarás una sección llamada Saludos (a veces etiquetada como Mensaje de bienvenida). Dentro, hay un cuadro de texto donde puedes escribir lo primero que el bot dice a los visitantes. Después de escribir una frase como "¡Hola! Soy tu asistente digital. Pregúntame sobre horarios de apertura o servicios", aparecerá una vista previa del mensaje debajo del cuadro. Haz clic en Guardar para almacenar el cambio. Si el menú dice "Mensaje de chat" en lugar de Saludos, es el mismo campo, solo busca un área de texto grande.

Sabrás que funcionó cuando el cuadro de vista previa muestre exactamente el texto que introdujiste y aparezca un banner de confirmación.

Elegir un estilo visual que coincida con tu sitio

Mientras sigues en la configuración del bot, cambia a la pestaña Apariencia, Estilo o Personalización; la etiqueta puede variar, pero suele contener una paleta de colores y un cargador de iconos. Elige un color que refleje el tono principal de tu sitio (puedes copiar el código hexadecimal, por ejemplo, #0066CC) y sube un logo pequeño (un PNG de 100 × 100 píxeles funciona bien). La vista previa de la derecha se actualizará para mostrar una burbuja de chat con el color elegido y tu logo como avatar. Si no encuentras un selector de color, busca un icono de engranaje ⚙️ que abra la "Configuración del tema".

Sabrás que funcionó cuando la burbuja en pantalla de la vista previa refleje el color y el icono que seleccionaste.

Copiar el código de inserción del widget

Vuelve a la página principal del bot y pulsa el botón Publicar o Implementar; esto le indica a Alibaba Cloud que haga el bot accesible públicamente. Se deslizará un nuevo panel etiquetado como Código de inserción, Widget web o similar, que contendrá un fragmento que comienza con <script src="..."></script>. Haz clic en el botón Copiar junto al cuadro; el código ya está en el portapapeles de tu ordenador. Si no hay un botón Copiar, haz clic dentro del cuadro y pulsa Ctrl + C (o Cmd + C en un Mac) para copiarlo manualmente.

Sabrás que funcionó cuando puedas pegar el fragmento en un documento de texto plano y veas aparecer la etiqueta <script> completa.

Insertar el código en el pie de página de WordPress

Inicia sesión en tu panel de control de WordPress (tu-sitio.com/wp-admin). En el menú de la izquierda, ve a Apariencia → Widgets. Localiza el área de widgets llamada Pie de página (o "Pie de página 1", etc.). Haz clic en Añadir bloque, elige HTML Personalizado, luego pega el código que copiaste en el área de texto del bloque. Pulsa el botón Actualizar o Guardar en la parte superior de la pantalla. El sitio ahora carga el script en cada página, y debería aparecer una burbuja de chat en la esquina inferior derecha cuando veas el front-end. Si no ves un área de widgets de Pie de página, instala el plugin gratuito "Insert Headers and Footers", luego ve a Ajustes → Insert Headers and Footers, pega el código en el cuadro "Scripts in Footer" y guarda.