--- title: "Widget de chat con IA" description: "Crea un agente de IA de canal web, diseña su widget Floating Chat o Popup Modal, comparte su URL de sitio y agrega links de pago de Stripe Checkout." canonical: https://www.ordering.co/es/features/ai-chat-widget/ lang: es --- [Experiencia de pedidos](https://www.ordering.co/es/features/all-features/?category=ordering#feature-catalog) # Pon un agente de pedidos con IA en tu propio sitio web. Crea un agente de canal web, diseña su widget como una burbuja Floating Chat o un Popup Modal, comparte su URL de sitio, traduce sus textos a cada idioma y envía links de pago de Stripe Checkout. [Empieza gratis](https://accounts.ordering.co/)[Agenda una demo](https://www.ordering.co/es/contact/?meeting=demo#book) Incluido en todos los planes Restaurant, Marketplace y Enterprise Funciona en - Web AI Ordering [Consulta los precios](https://www.ordering.co/es/pricing/) Widget de chat con IA ## Lo que puedes hacer - ### Crea un agente web Elige un canal y una marca, define un idioma por defecto y crea el agente de chat web. - ### Floating Chat o Popup Modal Elige el tipo de widget que le queda a tu sitio: una burbuja en la esquina o una ventana centrada. - ### Colores y tamaño de marca Define colores primario y secundario con código hex, con vista previa del degradado, además del ancho, el alto y la posición del botón del widget. - ### Un script o atributos de datos Publícalo con un script antes de \, o dispara el Popup Modal desde cualquier botón o enlace con atributos de datos. - ### Vista previa de escritorio y móvil Previsualiza el widget en escritorio y móvil antes de publicarlo. - ### Una URL de sitio por defecto Cada agente web obtiene una página de pedidos independiente en una URL de sitio por defecto, que puedes compartir por enlace o código QR, con un dominio propio donde la cuenta y el dominio lo permitan. - ### Traducciones del agente Edita el texto que usa un agente de WhatsApp o de la web en cada idioma, con un conteo de caracteres por campo. - ### Links de pago de Stripe Checkout Con los pagos en línea activados y una cuenta de Stripe conectada, el agente comparte un link de Stripe Checkout y confirma el pago tras el webhook. Panel de AI Agents ## Crea el agente y diseña su widget. Create Agent inicia una configuración breve: elige el canal y la marca, y luego define un idioma por defecto. La herramienta Widget que sigue controla cómo se ve y se comporta el chat en tu sitio. - Create Agent: elige el canal y la marca, y luego define un idioma por defecto - Elige un tipo de widget: una burbuja Floating Chat o un Popup Modal centrado - Define colores primario y secundario con código hex, incluida la vista previa del degradado - Define el ancho, el alto, el tamaño y la posición del botón del widget - Pega el script generado antes de la etiqueta de cierre \ del sitio - Usa atributos de datos para abrir el Popup Modal desde cualquier botón o enlace del sitio - Previsualiza el widget en escritorio y móvil antes de publicarlo - Controla en qué sitios y dominios el agente está autorizado a operar Panel de AI Agents ## Comparte una página de pedidos funcional sin construir un sitio web. En cuanto un agente queda configurado, recibe de inmediato una URL de sitio por defecto: una página de pedidos independiente que los clientes pueden usar de inmediato, sin integrar nada en tu propio sitio web. - Cada agente web recibe una URL de sitio por defecto - El sitio funciona como una página de pedidos independiente y completamente funcional - Comparte la URL en un perfil social, por correo o con un código QR - Agrega un dominio propio donde la configuración de la cuenta y del dominio lo permita - Encuentra la URL de sitio por defecto en Configure > Sites & Domains Panel de AI Agents ## Define el texto que usa cada agente, en cada idioma. Agent Translations, dentro de Settings, guarda el texto localizado que usa un agente de WhatsApp o de la web, organizado por categoría e idioma. - Abre Agent Translations desde Settings en el panel de AI Agents - Elige el agente que quieres editar; un agente de WhatsApp y uno de la web conservan cada uno su propio texto - Elige el idioma que quieres editar; al cambiar de idioma se rellenan los campos con sus traducciones actuales - Edita el texto por categoría, como niveles de precisión, comandos de acción y mensajes de estado del sistema - Copia las traducciones de otro agente como punto de partida - Un conteo de caracteres bajo cada campo, como 4/50, marca el límite de ese campo Panel de AI Agents ## Envía al cliente a Stripe Checkout desde el chat. El Stripe Connection Dashboard muestra la cuenta conectada, y el interruptor Online Payments controla si el agente puede enviar un link de pago durante el checkout. - El Stripe Connection Dashboard muestra el Stripe ID de la cuenta conectada, su moneda y el estado de cargos y pagos - Activa Online Payments para que el agente genere un link de Stripe Checkout con los artículos del cliente - Ordering.co recibe un webhook cuando Stripe confirma el pago y envía un mensaje de pago confirmado de vuelta al chat Cómo funciona ## De la configuración al siguiente pedido. 1. 01**Crea el agente web** Elige el canal web y tu marca, y define el idioma por defecto del agente. 2. 02**Diseña y previsualiza el widget** Elige Floating Chat o Popup Modal, define sus colores y su tamaño, y luego previsualízalo en escritorio y móvil. 3. 03**Publícalo** Pega el script antes de \, o comparte la URL de sitio por defecto del agente. ## Conviene saber - Cada texto traducido tiene un límite de caracteres que se muestra bajo su campo. - Los links de pago de Stripe Checkout requieren una cuenta de Stripe conectada con los cargos habilitados. ## Relacionado - [AI Ordering Agents](https://www.ordering.co/es/platform/ai-ordering-agents/) - [Analítica de agentes de IA](https://www.ordering.co/es/features/ai-agent-analytics/) - [Stripe](https://www.ordering.co/es/integrations/stripe/) - [WhatsApp Business](https://www.ordering.co/es/integrations/whatsapp-business/) [Ver todas las funciones](https://www.ordering.co/es/features/all-features/#feature-catalog) ## Mira cómo encaja con tu operación. Empieza una prueba gratis o revisa tu configuración con el equipo de Ordering.co. Guía del producto: [Crear un agente de IA](https://docs.ordering.co/es/docs/products/ai-dashboard/build-your-ai-agent/creating-a-finitless-ai-agent/) [Empieza gratis](https://accounts.ordering.co/)[Agenda una demo](https://www.ordering.co/es/contact/?meeting=demo#book)