Centro de Ayuda
Inicio IA AI Frontdesk (Momentum)

Asistente de Chat IA: configurar e integrar el widget de sitio web

Válido para tu Asistente de Chat IA (Momentum AI).

Con el widget de sitio web, puedes integrar tu asistente directamente en tu web mediante un botón. Las visitas pueden iniciar el chat cómodamente desde el navegador, sin necesidad de salir de tu página. En este artículo descubrirás cómo diseñar el widget, habilitarlo para tu dominio e insertar el código generado en tu página.

Requisitos
  • Has completado la configuración inicial mediante el asistente de configuración. Consulta las instrucciones en el siguiente artículo: Asistente de Chat IA: primeros pasos.
  • Tienes acceso al código fuente HTML de tu web o al editor de plantillas de tu CMS.
  • Tu web está vinculada a un dominio propio y registrado. No es posible utilizar el widget con un dominio del sistema temporal de IONOS (por ejemplo, *.live-website.com).

1. Acceder a la configuración del asistente

  • Inicia sesión en tu cuenta IONOS.
  • En la barra superior de menú, haz clic en Menú > AI Frontdesk.
  • En el resumen de contratos, haz clic en Administrar junto al contrato que desees.
  • Abre la sección Widget de sitio web. Aquí podrás configurar todos los ajustes siguientes.
     

Nota

El widget de sitio web forma parte de la configuración común de tu asistente. Si has contratado el Recepcionista IA como ampliación del mismo contrato, los ajustes de presentación, los dominios permitidos y el código de incrustación se aplican a ambos productos, ya que el widget es idéntico para el chat y el teléfono. 

2. Establecer canales

Nota

La sección Canales solo aparece si has obtenido un Recepcionista IA como ampliación del contrato. Si no dispones de tal ampliación, este apartado no estará y el widget ofrece automáticamente la función de chat. En ese caso, continúa con el apartado «Ajustar la apariencia».

En la sección Canales puedes especificar si, mediante el mismo botón, se debe ofrecer una llamada de voz, un chat de texto o ambas opciones (chat y llamada). Las opciones disponibles son Solo llamada, Solo chat o Chat y llamada».

  • Solo llamada: no se integra ningún chat y la llamada se inicia directamente en el navegador.

  • Solo chat: el botón inicia exclusivamente el chat de texto.

  • Chat y llamada: se abre el chat de texto. A continuación, las visitas pueden elegir si desean escribir o llamar haciendo clic en el icono del auricular. La llamada se inicia entonces directamente en el navegador.

Para que las visitas puedan chatear a través del widget, debes seleccionar Solo chat o Chat y llamada.

3. Activar el desvío de llamadas desde el chat

Tu asistente puede derivar a la persona en el chat a uno de tus contactos, por ejemplo, tu Servicio de Atención al cliente o Departamento de Contabilidad. El asistente ofrece la derivación de forma automática en cuanto la consulta se ajusta a uno de tus contactos, y también cuando la visita lo solicita por iniciativa propia.

Tras seleccionar la opción de canales, puedes activar esta opción habilitando el botón Desvío de llamadas desde el chat . 

Durante la transferencia, en el chat aparece el nombre del contacto y, debajo, el botón de llamada. Si la persona que visita la página hace clic en él, suena el teléfono del contacto y podrá hablar a través del navegador.

Nota

Si utilizas exclusivamente el Asistente de Chat IA, no se mostrará la sección Desvío de llamadas desde el chat. Esta solo aparecerá si contratas además el Recepcionista IA. Los contactos se crean en la sección Contactos, desvío de llamadas y resumen por correo electrónico . Para cada contacto, en Acciones > Editar, puedes cubrir los campos de departamento, inscripción y el contacto para el desvío. Así, tu asistente sabrá de qué asuntos se encarga cada persona.

4. Ajustar la apariencia

En la sección Apariencia, define cómo se verá el botón en tu página web:

  • En Posición, elige dónde debe aparecer el botón: Abajo a la izquierda, Abajo en el centro o Abajo a la derecha.
  • En Color de acento, define el color del botón. Haz clic en la vista previa de color (el cuadrado de color) para seleccionar un tono, o introduce directamente un código hexadecimal de color (por ejemplo, #003d8f) en el campo de texto. Si no se especifica nada, se utilizará el color corporativo de IONOS.
  • En el Texto del botón, introduce el texto que se mostrará en el botón (por ejemplo, «Chatear con la IA»).

En la sección Vista previa podrás ver en tiempo real cómo queda el botón con la configuración que has elegido.

5. Subir un icono propio

Además de la posición, el color y el texto, también puedes elegir el icono del botón. Desde Icono es posible añadir una imagen propia. Mientras no se haya añadido ningún icono, el widget mostrará el icono predeterminado.

  • En la sección «Apariencia > Icono», haz clic en Subir icono.
  • Selecciona el archivo de imagen que desees en el cuadro de diálogo de archivos de tu sistema operativo. Se admiten los formatos gráficos más habituales, entre ellos JPG, PNG, GIF, ICO y SVG.
  • En la ventana Recortar icono, define el recorte de imagen a tu gusto. El recorte es redondo. Puedes ampliarlo con el control deslizante situado debajo de la imagen y desplazarlo a la posición deseada arrastrándolo con el botón del ratón pulsado.
  • Haz clic en Aplicar.

El icono aparecerá ahora a la izquierda del botón, que ahora se denomina Editar. También se mostrará inmediatamente en el área de vista previa.

Nota

El color configurado en Color de acento no se aplica a los iconos subidos.

Cambiar o eliminar un icono

Haz clic en Editar en la sección Icono. Se abrirá un menú con dos opciones:

  • Subir icono: con esta opción se sustituye el icono almacenado. El proceso es el mismo que al subirlo por primera vez.
  • Eliminar: borra el icono almacenado. A continuación, en Icono volverá a aparecer el botón Subir icono y el widget volverá a mostrar el símbolo predeterminado.
     

6. Compartir dominio

Por motivos de seguridad, el widget solo se carga en los dominios que hayas autorizado.

En la sección Instalación, en Dominios permitidos, introduce el dominio de tu web:

  • Solo para el dominio principal: introduce tu dominio en el formato www.example.com. De este modo, el widget solo funcionará en esa dirección concreta.
  • Para todos los subdominios: utiliza un asterisco como comodín (*.example.com) para que el widget también esté activo en los subdominios (p. ej.: shop.example.com).

Nota

example.com es solo un marcador de posición. Sustitúyelo por tu nombre de dominio real. Mientras no se haya introducido ningún dominio, el widget permanecerá desactivado.

7. Guardar cambios

Para aplicar los cambios, haz clic en el botón Guardar cambios, situado en la esquina superior derecha. Mientras no hayas realizado ningún cambio, el botón aparecerá desactivado con el texto Sin cambios.

8. Incorporar el código de inserción

Para que el widget sea visible para tus visitas, introduce el código generado en tu página web.

  • En la sección Instalación, en Código de inserción, haz clic en Copiar.
  • Inserta el código dentro de la etiqueta <head> de tu página web. El script se carga en segundo plano y no retrasa la carga de la página.

Tu código contiene tu ID de agente individual en lugar del marcador de posición YOUR_AGENT_ID y tiene un aspecto similar al siguiente:

<script src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js" data-agent-id="YOUR_AGENT_ID" defer></script>

9. Probar la configuración

Para comprobar tu configuración, integra el widget del sitio web en tu página. A continuación, abre tu página web e inicia un chat pulsando el botón. Así podrás probar el asistente tal y como lo ven tus visitas.

Guías para los sistemas de páginas web y CMS más habituales

El procedimiento exacto para insertar código HTML varía en función del sistema que se utilice. Consulta la guía rápida adecuada para tu plataforma:

MyWebsite/Mi Web de IONOS

A diferencia de lo descrito en las instrucciones generales anteriores, no introduzcas el código en tu MyWebsite/Mi Web antes de la etiqueta </body>, sino en la sección <head> (encabezado):

  • Abre el editor web de MyWebsite.
  • Ve a Ajustes > Código de cabecera.
  • Pega el script copiado en el campo correspondiente.
  • Crea un consentimiento de privacidad (entrada de consentimiento de cookies) para tu widget de idiomas (consulta la sección «Política de privacidad» más abajo).
  • Guarda y publica tu web para que los cambios se apliquen en tiempo real.
WordPress

Para integrar el widget en WordPress, recomendamos, por regla general, utilizar un plugin (opción A). Esto funciona con todos los temas y garantiza que tu código no se pierda al actualizar el tema. Como alternativa, en el caso de los temas clásicos, puedes insertar el código directamente en los archivos del tema (opción B).

Opción A: mediante un plugin (recomendado para todos los temas)

  • En la barra de navegación izquierda de Wordpres, ve a Plugins.
  • Instala y activa el plugin «Insert Headers and Footers».
  • Vaya a Ajustes > Insert Headers and Footers e inserte el script en la sección para scripts en el pie de página.
  • Guarda los cambios.


Opción B: a través del editor de temas (solo para temas clásicos)

Notas:

  • En los temas modernos con edición de todo el sitio (por ejemplo, Twenty Twenty-Three y posteriores), no existe el archivo footer.php. En este caso, es imprescindible que utilices la opción A.
  • Los cambios realizados en los archivos del tema se sobrescribirán al actualizar el tema. Por lo tanto, utiliza un tema hijo para que tus cambios se mantengan de forma permanente.
  • En la barra de navegación izquierda de WordPress, ve a Diseño > Temas y abre el archivo footer.php.
  • Inserta el script justo antes de la etiqueta de cierre </body>.
  • Guarda los cambios.
Wix
  • En tu panel de control de Wix, ve a Ajustes > Desarrollo e integraciones > Código personalizado.
  • Haz clic en + Agregar código personalizado.
  • Pega el script.
  • Selecciona la opción Todas las páginas.
  • Establece la ubicación en Cuerpo - Final.
  • Haz clic en Aplicar.
Shopify
  • En el panel de administración de tu tienda de Shopify, ve a Online Store > Themes.
  • Haz clic en los tres puntos junto al tema activo y selecciona Edit code.
  • Abre el archivo theme.liquid.
  • Inserta el script justo antes de la etiqueta de cierre </body> y haz clic en Save.
Webflow
  • En Webflow, accede a la configuración del proyecto (Project Settings) y ve a la pestaña Custom Code.
  • Pega el script en la sección Footer Code.
  • Publica (Publish) tu página web.

Artículos relacionados

Contenido