Skip to main content

​
Configuration Options

Customize the widget appearance using window.__ansa_config: 
<script>
  window.__ansa_config = {
    agentId: "your-agent-id",
    apiUrl: "https://api.ansa.so",
    url: "https://widget.ansa.so",

    // Appearance
    theme: "light",
    primaryColor: "#6366f1",
    chatBubbleColor: "#6366f1",

    // Branding
    displayName: "Acme Support",
    profilePicture: "https://example.com/avatar.png",

    // Messages
    initialMessage: "Hi! How can I help you today?",
    messagePlaceholder: "Type your question...",
    footerMessage: "Powered by Acme Corp"
  };
</script>
<script src="https://cdn.ansa.so/embed.js"></script>

​
All Options

OptionTypeDefaultDescription
agentIdstringRequiredYour agent identifier
apiUrlstringRequiredAnsa API URL
urlstringRequiredWidget URL
themestring"light""light" or "dark"
primaryColorstring"#3b82f6"Header and button color
chatBubbleColorstring"#3b82f6"User message bubble color
widgetButtonColorstring"#3b82f6"Floating button background color
buttonIconstringnullCustom button icon (emoji, URL, or uploaded image)
buttonIconTypestringnullIcon type: "emoji", "url", or "upload"
displayNamestring"AI Assistant"Bot name in header
profilePicturestringnullBot avatar URL
initialMessagestring"Hello! How can I help you today?"Welcome message
suggestedMessagesarray[]Quick reply buttons
messagePlaceholderstring"Type a message..."Input placeholder text
footerMessagestringnullFooter text
showPoweredBybooleantrueShow “Powered by Ansa” branding
dismissibleMessagestringnullDismissible banner
welcomeBubblesarray[]Floating welcome bubbles
disableAibooleanfalseDisable AI responses, route all to human inbox
escalationButtonLabelstring"Talk to a human"Text for escalation button
languagestring"en"Widget language code
Most of these settings can be configured in the dashboard under Settings > Widget. The embed code will automatically use your saved settings.

​
Theme Options

​
Light Theme

{
  theme: "light",
  primaryColor: "#3b82f6"
}

​
Dark Theme

{
  theme: "dark",
  primaryColor: "#6366f1"
}

​
Suggested Messages

Add quick-reply buttons that appear at the start of a conversation: 
{
  suggestedMessages: [
    "What are your business hours?",
    "I need help with my order",
    "Pricing information"
  ]
}

​
Welcome Bubbles

Show floating message bubbles that animate in when the widget loads: 
{
  welcomeBubbles: [
    "👋 Hi there!",
    "Have a question? I'm here to help."
  ]
}

​
Remove Branding

On Growth and Pro plans, you can customize or remove the footer: 
{
  footerMessage: "Support by YourCompany"
  // or
  footerMessage: "" // Empty to hide
}
Removing branding is available on Growth and Pro plans only.

​
User Feedback

By default, thumbs up/down buttons appear on assistant messages to collect user feedback. You can toggle this in the dashboard under Settings > Widget > Collect User Feedback. Feedback is tracked in your analytics and helps you identify areas for improvement.

​
Button Customization

Customize the floating chat button appearance:

​
Custom Icon

Use an emoji, URL, or uploaded image as the button icon: 
{
  // Emoji icon
  buttonIcon: "💬",
  buttonIconType: "emoji",

  // Or URL icon
  buttonIcon: "https://example.com/chat-icon.png",
  buttonIconType: "url",

  // Or uploaded image (from dashboard)
  buttonIcon: "https://cdn.ansa.so/uploads/xxx.png",
  buttonIconType: "upload"
}

​
Button Color

{
  widgetButtonColor: "#6366f1"  // Indigo button
}

​
Escalation Settings

Configure how users can request human support: 
{
  // Custom button label
  escalationButtonLabel: "Contact Support",

  // Or disable AI entirely (all messages go to human inbox)
  disableAi: true
}
See Escalations & Human Handoff for full escalation configuration.

​
Multi-language Support

Override widget text for different languages: 
{
  // Set the language
  language: "es",

  // Override specific strings via dashboard or API
}
You can also change the language dynamically: 
ansa.setLanguage("fr");
See Multi-language for the full list of supported languages.

​
Full Example

<script>
  window.__ansa_config = {
    agentId: "agent_xxx",
    apiUrl: "https://api.ansa.so",
    url: "https://widget.ansa.so",

    // Theme
    theme: "light",
    primaryColor: "#6366f1",
    chatBubbleColor: "#6366f1",

    // Branding
    displayName: "Acme Support",
    profilePicture: "https://acme.com/support-avatar.png",

    // Messages
    initialMessage: "Hi! I'm Acme's AI assistant. How can I help you today?",
    suggestedMessages: [
      "Track my order",
      "Return policy",
      "Contact human support"
    ],
    messagePlaceholder: "Ask me anything...",
    footerMessage: "Powered by Acme AI",

    // Welcome
    welcomeBubbles: [
      "👋 Need help?",
      "Ask me anything about Acme!"
    ]
  };
</script>
<script src="https://cdn.ansa.so/embed.js"></script>