The Chat Widget interface (formerly Embedded Chat) allows you to embed your agent as an interactive chat widget in websites, applications, or other digital platforms. This interface provides seamless integration for your own properties while maintaining full control over the user experience.
Looking for Airia Agent (platform interface)? See Airia Agent Interface.For an overview of managing all interface types, see Managing Agent Interfaces.

​
Key Features

​
Seamless Integration

  • Custom Embed Code: Easy-to-implement code for web integration
  • Responsive Design: Automatically adapts to different screen sizes
  • Customizable Appearance: Configure colors, positioning, and behavior

​
Complete Control

  • Your Brand: Maintain your brand identity and user experience
  • Access Control: Determine exactly who can access your chat widget
  • Independent Operation: Take offline without affecting other interfaces

​
Advanced Capabilities

  • Multi-Modal Input: Support for text, images, and file uploads
  • Rich Outputs: Generate downloadable artifacts and citations
  • Conversation Management: Handle multiple concurrent conversations

​
Configuration Steps

1

Access the Interfaces Panel

Access the interfaces panel by either:
  • Clicking the ellipsis (…) menu to the right of your Agent and selecting Interfaces
  • Opening the Agent in Studio and clicking Settings > Interfaces
2

Add Chat Widget Interface

In the interfaces panel:
  • Click + Add Interface if this is a new interface
  • Select Chat Widget from the available interface types
  • Or click the edit icon next to an existing Chat Widget interface to modify its configuration
3

Configure Widget Settings

Configure the following settings for your Chat Widget interface:
  • Interface Name
    Choose a unique name for your widget interface. By default, inherits the agent’s name unless overridden.
  • Display Name
    This is how users will see your agent within the chat widget.
  • Description
    Provide a clear description of your agent’s capabilities. By default, inherits the agent’s description unless overridden.
  • Widget Appearance
    Customize the visual appearance of your chat widget:
    Colors: Set primary and accent colors to match your brand
    Position: Choose where the widget appears on the page
    Size: Configure the default and expanded sizes
  • Access Control Settings
    Configure who can access your chat widget:
    Public Access: Available to all visitors
    Restricted Access: Require authentication or specific permissions
    Domain Restrictions: Limit to specific websites or domains
  • Conversation Type Options
    Choose the type of interaction your widget supports:
    Standard Chat (Recommended): Text-based conversations
    Image Only: Accepts images as input
    File Only: Accepts files as input
    Multi-Modal: Supports text, images, and files
  • Support for Citations and Artifacts
    Select output capabilities for your widget:
    Artifacts: Enable downloadable file creation (Word docs, PowerPoints, HTML)
    Citations: Highlight citations from documents or PDFs
    None: Standard conversations without special outputs
  • Default User Prompts
    (Optional) Predefine example prompts that appear when users first open the widget.
  • Online/Offline Control
    Toggle your widget online or offline independently of other interface types.
4

Generate Embed Code

After saving your configuration:
  • Click View Integration Details or Get Embed Code
  • Copy the provided HTML/JavaScript code
  • Choose from different integration options (iframe, JavaScript widget, etc.)
5

Implement in Your Website

Add the embed code to your website or application:
  • Paste the code into your HTML where you want the widget to appear
  • Test the integration in a development environment first
  • Verify the widget loads and functions correctly
The widget will automatically connect to your agent’s Active version and be ready for user interactions.

​
Integration Options

​
HTML Embed

Simple iframe-based integration for quick deployment: 
<iframe src="https://widget.airia.com/chat/[your-widget-id]" 
        width="400" height="600" frameborder="0">
</iframe>

​
JavaScript Widget

More flexible integration with customization options: 
<script src="https://widget.airia.com/embed.js"></script>
<script>
  AiriaWidget.init({
    widgetId: 'your-widget-id',
    position: 'bottom-right',
    primaryColor: '#your-brand-color'
  });
</script>

​
Mobile App Integration

For mobile applications, use the provided SDK or web view implementation with the widget URL.

​
Managing Your Chat Widget

​
Monitoring Usage

  • Conversation Analytics: Track widget interactions and usage patterns
  • Performance Metrics: Monitor response times and user satisfaction
  • Error Tracking: Identify and resolve integration issues

​
Customization

  • Visual Branding: Update colors, fonts, and styling to match your brand
  • Behavior Settings: Configure auto-open, greeting messages, and interaction flows
  • Content Updates: Modify prompts, descriptions, and capabilities as needed

​
Maintenance

  • Version Control: Widget automatically uses your agent’s Active version
  • Uptime Management: Take widget offline for maintenance without affecting other interfaces
  • Integration Updates: Update embed code when making significant changes

​
Best Practices

​
User Experience

  • Clear Purpose: Make it obvious what your chat widget can help with
  • Helpful Prompts: Provide example questions that demonstrate value
  • Quick Responses: Ensure your agent provides timely, relevant responses
  • Graceful Fallbacks: Handle edge cases and unexpected inputs well

​
Technical Implementation

  • Test Thoroughly: Verify widget functionality across different browsers and devices
  • Performance: Ensure the widget doesn’t negatively impact page load times
  • Security: Implement appropriate access controls and domain restrictions
  • Monitoring: Set up analytics to track usage and identify issues

​
Brand Consistency

  • Visual Integration: Match your website’s design language and color scheme
  • Voice and Tone: Ensure your agent’s responses align with your brand voice
  • Content Quality: Maintain high-quality, brand-appropriate responses

​
Troubleshooting