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://widget.ansa.so/embed.min.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
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
dismissibleMessagestringnullDismissible banner
welcomeBubblesarray[]Floating welcome bubbles
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.

​
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://widget.ansa.so/embed.min.js"></script>