--- title: "AI chat widget" description: "Create a web channel AI agent, design its Floating Chat or Popup Modal widget, share its site URL, and add Stripe Checkout payment links." canonical: https://www.ordering.co/features/ai-chat-widget/ --- [Ordering experience](https://www.ordering.co/features/all-features/?category=ordering#feature-catalog) # Put an AI ordering agent on your own website. Create a web channel agent, design its widget as a Floating Chat bubble or a Popup Modal, share its default site URL, translate its text into each language, and send Stripe Checkout payment links. [Start for free](https://accounts.ordering.co/)[Book a demo](https://www.ordering.co/contact/?meeting=demo#book) Included in every plan Restaurant, Marketplace, and Enterprise Works in - Web AI Ordering [See pricing](https://www.ordering.co/pricing/) AI chat widget ## What you can do - ### Create a web agent Choose a channel and brand, set a default language, and create the web chat agent. - ### Floating Chat or Popup Modal Choose the widget type that fits your site: a corner bubble or a centered window. - ### Brand colors and sizing Set primary and secondary colors by hex code, with gradient previews, plus the widget's width, height, and button position. - ### A script or data attributes Deploy with a script pasted before \, or trigger the Popup Modal from any button or link with data attributes. - ### Desktop and mobile preview Preview the widget on desktop and mobile before it goes live. - ### A default site URL Each web agent gets a standalone ordering page at a default site URL, shareable by link or QR code, with a custom domain where supported. - ### Agent translations Edit the text a WhatsApp or web agent uses in each language, with a character count shown per field. - ### Stripe Checkout payment links With online payments on and a connected Stripe account, the agent shares a Stripe Checkout link and confirms payment after the webhook. AI Agents dashboard ## Create the agent and design its widget. Create Agent starts a short setup: choose the channel and brand, then set a default language. The Widget tool that follows controls how the chat looks and behaves on your site. - Create Agent: choose the channel and brand, then set a default language - Choose a widget type: a Floating Chat bubble or a centered Popup Modal - Set primary and secondary colors by hex code, including gradient previews - Set the widget's width, height, button size, and position - Paste the generated script before the website's closing \ tag - Use data attributes to open the Popup Modal from any button or link on the site - Preview the widget on desktop and mobile before publishing it - Control which sites and domains the agent is authorized to use AI Agents dashboard ## Share a working ordering page without a website build. Once an agent is configured, it is immediately assigned a default site URL: a standalone ordering page customers can use right away, without integrating anything into your own website. - Each web agent gets a default site URL - The site works as a standalone, fully functional ordering page - Share the URL in a social profile, an email, or a QR code - Add a custom domain where the account and domain configuration support one - Find the default site URL in Configure > Sites & Domains AI Agents dashboard ## Set the text each agent uses, in each language. Agent Translations, under Settings, holds the localized text a WhatsApp or web agent uses, organized by category and language. - Open Agent Translations from Settings in the AI Agents dashboard - Choose the agent to edit; a WhatsApp agent and a web agent each keep their own text - Choose the language to edit; switching languages repopulates the fields with its current translations - Edit text by category, such as accuracy levels, action commands, and system status messages - Copy translations from another agent as a starting point - A character count under each field, such as 4/50, marks that field's limit AI Agents dashboard ## Send the customer to Stripe Checkout from the chat. The Stripe Connection Dashboard shows the connected account, and the Online Payments toggle controls whether the agent can send a payment link during checkout. - The Stripe Connection Dashboard shows the connected account's Stripe ID, currency, and charges and payouts status - Turn Online Payments on to let the agent generate a Stripe Checkout link with the customer's items - Ordering.co receives a webhook when Stripe confirms the payment and sends a payment-confirmed message back to the chat How it works ## From setup to the next order. 1. 01**Create the web agent** Choose the web channel and your brand, and set the agent's default language. 2. 02**Design and preview the widget** Choose Floating Chat or Popup Modal, set its colors and sizing, then preview it on desktop and mobile. 3. 03**Deploy it** Paste the script before \, or share the agent's default site URL. ## Good to know - Each translated text has a character limit shown under its field. - Stripe Checkout payment links require a Stripe account connected with charges enabled. ## Related - [AI Ordering Agents](https://www.ordering.co/platform/ai-ordering-agents/) - [AI agent analytics](https://www.ordering.co/features/ai-agent-analytics/) - [Stripe](https://www.ordering.co/integrations/stripe/) - [WhatsApp Business](https://www.ordering.co/integrations/whatsapp-business/) [See all features](https://www.ordering.co/features/all-features/#feature-catalog) ## See how it fits your operation. Start a free trial, or walk through your setup with the Ordering.co team. Product guide: [Create an AI agent](https://docs.ordering.co/docs/products/ai-dashboard/build-your-ai-agent/creating-a-finitless-ai-agent/) [Start for free](https://accounts.ordering.co/)[Book a demo](https://www.ordering.co/contact/?meeting=demo#book)