Centro de Ayuda
Inicio IA Recepcionista IA (Momentum)

Recepcionista IA: configurar el widget de sitio web

Para tu Recepcionista IA

Puedes iniciar una llamada con tu Recepcionista IA directamente a través de un botón («Hablar con IA»). La llamada se realiza de forma cómoda y directa a través del navegador web de la persona visitante.

En este artículo aprenderás cómo configurar el widget, adaptarlo al diseño de tu página web e insertar el código generado en tu página.

Requisitos

  • Has completado la configuración inicial de tu Recepcionista IA con el asistente de configuración.
  • Tienes acceso al código fuente HTML de tu página web o al editor de plantillas de tu CMS.
  • Tu página web está conectada con un dominio propio registrado: el widget no se puede utilizar con un dominio de sistema temporal de IONOS (p.ej.: *.live-website.com o *.live-website.com).

Paso 1: acceder a la interfaz de configuración

  • Inicia sesión en tu cuenta IONOS.
  • En la barra superior de menú, haz clic en Menú > Recepcionista IA. Se abrirá la interfaz de configuración.
  • Opcional: Si dispones de varios contratos para este servicio, haz clic en la selección de contratos en la parte superior izquierda (menú desplegable con el nombre del contrato actual) para abrir la lista  y seleccionar el asistente deseado.

Paso 2: configurar y activar el widget

  • En la interfaz de configuración, abre el apartado  Widget de sitio web.
  • Introduce el dominio de tu página web en Dominios permitidos.
    • Solamente para el dominio principal: introduce tu dominio en el formato www.ejemplo.com (el widget únicamente funcionará en esta dirección exacta).
    • Para todos los subdominios: si quieres que el widget también esté activo en subdominios adicionales (p.ej.: tienda.ejemplo.com o blog.ejemplo.com), utiliza un asterisco como marcador de posición: * .ejemplo.com.

Nota

El nombre ejemplo.com sirve en este artículo únicamente como marcador de posición. Sustitúyelo en cualquier caso por tu nombre de dominio real y propio. Mientras este campo permanezca vacío o esté mal cumplimentado, el widget permanecerá inactivo por motivos de seguridad.

  • En Posición, selecciona dónde debe aparecer el botón en tu web. Puedes elegir entre Abajo a la izquierda, Abajo en el centro y Abajo a la derecha.
  • En Color de acento, puedes especificar el color del botón. Para ello, haz clic en la vista previa del color (el cuadrado de color junto al campo de entrada) para seleccionar cómodamente un color utilizando el selector. También puedes introducir el código hexadecimal del color deseado (p-ej.: #00188f) directamente en el campo de texto. Si no especificas ningún color, se utilizará por defecto el color de la marca IONOS.
  • En Vista previa puedes comprobar en directo el aspecto del botón con la configuración elegida.
  • Haz clic en Guardar cambios en la esquina superior derecha.

Paso 3: integrar el código de inserción

Para que el widget sea visible para las personas que visitan tu página web, se debe introducir el fragmento de código generado en tu página web.

  • En la sección Widget del sitio web, desplázate hasta el elemento Código de inserción.

  • Haz clic en el botón Copiar para copiar el código HTML mostrado (que empieza por <script src=...) en tu portapapeles.

    Tu script tendrá un aspecto similar al siguiente. En lugar del marcador de posición YOUR_AGENT_ID, este contiene tu «client secret» (clave secreta individual que actúa como contraseña):

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

  • Ahora cambia al sistema de gestión de contenidos (CMS) o al editor de tu página web.

  • Pega el código copiado en el código fuente HTML de tu web. Coloca el código justo antes de la etiqueta de cierre </body>.

    ... 
    <!-- AI Receptionist Voice Widget -->
    <script
    src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js"
    data-agent-id="YOUR_AGENT_ID">
    </script>
    </body>
    </html>

 

Instrucciones para los sistemas de páginas web y CMS más populares

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

MyWebsite/Mi Web de IONOS

A diferencia de las instrucciones generales anteriores, no insertes el código en tu MyWebsite/Mi Web antes de la etiqueta </body>, sino en la zona <head> (cabecera):

  • Abre el editor web de tu proyecto MyWebsite.
  • Ve a Configuración > CABECERA HTML.
  • Pega la secuencia de comandos copiada en el campo correspondiente.
  • Crea un consentimiento de privacidad (entrada de consentimiento de cookies) para tu widget de idioma (consulta la última sección sobre la política de privacidad).
  • Guarda y publica tu web para que los cambios sean efectivos.
WordPress

Para integrar el widget en WordPress, recomendamos por lo general el uso de un plugin (opción A). Esto funciona con todos los temas y garantiza que tu código no se pierde al actualizar el tema. Alternativamente, en los temas clásicos puedes introducir el código directamente en los archivos del tema (opción B).

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

  • Instala y activa el plugin «Insert Headers and Footers».
  • En la barra de navegación izquierda, ve a Fragmentos de código > Cabecera y pie e inserta el script en Pie de página .
  • Guarda los cambios.


Opción B: uso del editor de temas (para temas clásicos)

Notas:

  • Si no hay footer. php disponible para los temas modernos de edición completa del sitio (Full Site Editing) como por ejemplo, Twenty Twenty-Three y posteriores, utiliza obligatoriamente la opción A.
  • Los cambios en los archivos del tema se sobrescriben al realizar una actualización del mismo. Por lo tanto, utiliza un tema hijo (child theme) para asegurar tus cambios de forma permanente.
  • En tu panel de WordPress, ve a Herramientas > Editor de archivos de temas y abre el archivo footer.php.
  • Inserta el script directamente antes de la etiqueta de cierre </body>.
  • Guarda los cambios.
Wix
  • En tu panel de control de Wix, ve a Ajustes > Código personalizado.
  • Haz clic en + Agregar código personalizado.
  • Pega el script.
  • Selecciona la opción Todas las páginas.
  • Establece la colocación en Cuerpo - Final.
  • Haz clic en Aplicar.
Shopify
  • Desde el panel de control de Shopify, ve a Tienda online > Themes.
  • Haz clic en los tres puntos junto al tema activo y selecciona Editar código.
  • Abre el archivo theme.liquid.
  • Inserta el script inmediatamente antes de la etiqueta de cierre </body> y guarda los cambios.
Webflow
  • Abra la configuración del proyecto en Project Settings y cambia a la pestaña Custom Code .
  • Inserta el script en el área Footer Code .
  • Publica tu página web en Publish.

Información importante sobre la protección de datos

Si utilizas el widget de sitio web, debes informar a las personas que visiten tu página web sobre el procesamiento de datos. Por lo tanto, asegúrate de que tu política de privacidad se incluya una sección correspondiente sobre el uso del servicio de Recepcionista IA. 
Encontrarás una guía en el siguiente artículo: información importante sobre la política de privacidad.

Contenido