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

Create a new chatbot instance

Abre tu navegador, ve a console.alibabacloud.com e inicia sesión. En la barra de búsqueda superior derecha escribe “Chatbot” y pulsa Enter; verás una lista de servicios de IA. Haz clic en el botón que dice Create Robot (o un botón similar como Create Instance). Aparecerá un formulario solicitando un nombre y una breve descripción. Después de escribir un nombre como “FrontDeskHelper” y pulsar Create, la plataforma crea un nuevo bot y lo muestra en una tabla con el estado “Running”. Si no ves el botón “Create Robot”, busca un ícono con forma de más o un menú llamado New Bot.

Sabrás que funcionó cuando la nueva entrada aparezca en la lista con un punto verde o la palabra “Running”.

Define the chatbot’s welcome greeting

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ú lateral encontrarás una sección llamada Greetings (a veces etiquetada Welcome Message). Dentro hay un cuadro de texto donde puedes escribir la primera frase que el bot dirá a los visitantes. Después de escribir una oración como “Hi! I’m your digital assistant – ask me about opening hours or services,” aparecerá una vista previa del mensaje bajo el cuadro. Haz clic en Save para guardar el cambio. Si el menú dice “Chat Prompt” en lugar de Greetings, es el mismo campo – solo busca un área de texto grande.

Sabrás que funcionó cuando la caja de vista previa muestre exactamente el texto que ingresaste y aparezca una barra de confirmación.

Choose a visual style that matches your site

Mientras sigues en la configuración del bot, cambia a la pestaña Appearance, Style o Customization – 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, p. ej., #0066CC) y sube un pequeño logo (un PNG de 100 × 100 píxeles funciona bien). La vista previa a la derecha se actualiza mostrando una burbuja de chat del color elegido y con tu logo como avatar. Si no encuentras un selector de color, busca un ícono de engranaje ⚙️ que abra “Theme Settings”.

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

Copy the widget embed code

Regresa a la página principal del bot y pulsa el botón Publish o Deploy – esto indica a Alibaba Cloud que haga el bot accesible públicamente. Se deslizará un nuevo panel etiquetado Embed Code, Web Widget o similar, que contiene un fragmento que empieza con <script src="..."></script>. Haz clic en el botón Copy junto al cuadro; el código quedará ahora en el portapapeles de tu computadora. Si no hay botón Copy, haz clic dentro del cuadro, pulsa Ctrl + C (o Cmd + C en Mac) para copiarlo manualmente.

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

Insert the code into WordPress footer

Inicia sesión en el panel de WordPress (your‑site.com/wp‑admin). En el menú lateral ve a Appearance → Widgets. Localiza el área de widgets llamada Footer (o “Footer 1”, etc.). Haz clic en Add a Block, elige Custom HTML, y pega el código que copiaste en el área de texto del bloque. Pulsa el botón Update o Save en la parte superior de la pantalla. El sitio ahora cargará el script en todas las páginas, y una burbuja de chat debería aparecer en la esquina inferior derecha al ver la parte frontal. Si no ves un área de widgets Footer, instala el plugin gratuito “Insert Headers and Footers”, luego ve a Settings → Insert Headers and Footers, pega el código en el cuadro “Scripts in Footer” y guarda.