Widget Customization

Customize the look, feel, and behavior of your Agentix chat widget to match your brand.

Dashboard Configuration

The easiest way to customize the widget is through the Agentix dashboard:

Navigate to Agents > your agent > Widget
Modify theme colors, position, behavior settings
Preview changes in real time
Click Save

Changes take effect immediately for all embedded instances.

Theme Colors

Configure colors in the dashboard or via the widget configuration API:

Property	Description	Default
Primary Color	Header, send button, user message bubbles	`#6366f1`
Background Color	Chat window background	`#ffffff`
Text Color	Default text color	`#1f2937`
Chat Header Color	Chat window header background	Primary Color
User Message Color	User message bubble background	Primary Color
Bot Message Color	Bot message bubble background	`#f3f4f6`
Input Background	Message input field background	`#ffffff`
Send Button Color	Send button color	Primary Color
Border Radius	UI element roundness	`12px`
Font Family	CSS font stack	System default

Custom CSS

For advanced styling, inject custom CSS that targets widget elements:


<script
  src="https://cdn.agentix.cl/widget/v1/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-api-key="agx_live_YOUR_KEY"
></script>
 
<style>
  /* Widget trigger button */
  .agentix-trigger {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
 
  /* Chat window container */
  .agentix-chat-window {
    border-radius: 16px !important;
    max-height: 600px !important;
  }
 
  /* Chat header */
  .agentix-chat-header {
    padding: 16px 20px !important;
  }
 
  /* Message bubbles */
  .agentix-message-user {
    border-radius: 16px 16px 4px 16px !important;
  }
 
  .agentix-message-bot {
    border-radius: 16px 16px 16px 4px !important;
  }
 
  /* Input area */
  .agentix-input-container {
    border-top: 1px solid #e5e7eb !important;
  }
</style>

Note: Custom CSS is applied outside the widget iframe. For styles that need to penetrate the iframe, use the dashboard theme settings instead.

Events and Callbacks

The widget emits events you can listen to for analytics, custom behavior, or integration with your application:

Using Manual Init


window.AgentixWidget.init({
  agentId: 'YOUR_AGENT_ID',
  apiKey: 'agx_live_YOUR_KEY',
 
  // Called when the widget finishes loading
  onReady: function() {
    console.log('Widget ready')
  },
 
  // Called when the widget is opened
  onOpen: function() {
    analytics.track('widget_opened')
  },
 
  // Called when the widget is closed
  onClose: function() {
    analytics.track('widget_closed')
  },
 
  // Called when a new message is sent or received
  onMessage: function(message) {
    console.log(`${message.role}: ${message.content}`)
    if (message.role === 'assistant') {
      analytics.track('bot_response', { length: message.content.length })
    }
  },
 
  // Called when the visitor submits their email
  onLeadCapture: function(data) {
    console.log('Lead captured:', data.email, data.name)
    // Sync with your CRM
    syncToCRM(data)
  },
 
  // Called when the visitor rates the conversation
  onRating: function(data) {
    console.log('Rating:', data.rating, data.feedback)
  },
 
  // Called on any error
  onError: function(error) {
    console.error('Widget error:', error.code, error.message)
  },
})

Using Event Listeners


window.addEventListener('agentix:ready', function(e) {
  console.log('Widget ready')
})
 
window.addEventListener('agentix:message', function(e) {
  console.log('Message:', e.detail)
})
 
window.addEventListener('agentix:lead', function(e) {
  console.log('Lead:', e.detail)
})

Mobile Behavior

The widget automatically adapts to mobile devices:

Small screens (< 768px): The chat window expands to full screen when opened
Touch support: Swipe down to close the widget
Keyboard handling: The input field scrolls into view when the virtual keyboard opens
Safe area: Respects iOS safe area insets on notched devices

You can customize mobile behavior:


window.AgentixWidget.init({
  agentId: 'YOUR_AGENT_ID',
  apiKey: 'agx_live_YOUR_KEY',
  mobile: {
    fullScreen: true,       // Force full screen on mobile (default: true)
    hideOnScroll: false,     // Hide trigger button while scrolling
    bottomOffset: 20,        // Offset from bottom edge (px)
  },
})

Positioning

Default Positions

Use data-position to place the widget:

Position	Description
`bottom-right`	Bottom-right corner (default)
`bottom-left`	Bottom-left corner
`top-right`	Top-right corner
`top-left`	Top-left corner

Custom Offset


window.AgentixWidget.init({
  agentId: 'YOUR_AGENT_ID',
  apiKey: 'agx_live_YOUR_KEY',
  position: 'bottom-right',
  offset: {
    x: 24,  // Horizontal offset from edge (px)
    y: 24,  // Vertical offset from edge (px)
  },
})

Localization

The widget UI supports multiple languages. Set the language with data-language:


<script
  src="https://cdn.agentix.cl/widget/v1/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-api-key="agx_live_YOUR_KEY"
  data-language="en"
></script>

Supported languages:

Code	Language
`es`	Spanish (default)
`en`	English

The language setting affects UI labels (send button, placeholder text, timestamps, etc.) but not the agent’s response language, which is controlled by the agent’s instructions.

Accessibility

The widget follows WAI-ARIA guidelines:

All interactive elements have appropriate ARIA labels
Keyboard navigation support (Tab, Enter, Escape)
Screen reader compatible message announcements
Focus management when opening/closing
High contrast mode support via system preferences