Override Configuration

You can also configure all of these settings in our Studio. Note that any SDK-side configuration will override the Studio values—allowing you to vary settings on a per-page or contextual basis.

Property	Type	Default	Required	Description
`displayName`	`string`	`Copilot`	No	The agent’s display name
`logoUrl`	`string`	URL to the Eucera bee icon	No	URL for the agent’s primary logo.
`modalLogoUrl`	`string`	URL to the Eucera bee icon	No	URL for the logo used within modals or dialogs.
`titleText`	`string`	`How can I help you today?`	No	The main heading displayed in the agent panel.
`quickStartHint`	`string`	`Need help? Here are some topics we can start with`	No	Instructional text guiding users on quick-start actions.
`quickReplies`	`Array<{ title: string; subtitle?: string }>`	`[]`	No	A list of preset buttons to kick off common conversations.
`theme`	`<see Theme Properties below>`	—	No	Color, font and bubble styling options
`isLogoVisible`	`boolean`	`true`	No	Toggle to show or hide the agent’s logo.
`isLTR`	`boolean`	`true`	No	Text direction: left-to-right (`true`) or right-to-left (`false`).
`isAudioEnabled`	`boolean`	`false`	No	Allow users to send voice input instead of typing.
`resumePreviousSession`	`boolean`	`false`	No	Automatically reload the last session if the previous interaction was within 24 hours

Theme Properties

Property	Type	Default	Required	Description
`primaryColor`	`string`	`#3248F2`	No	Brand or primary color
`secondaryColor`	`string`	`#3248F2`	No	Secondary color
`primaryFontColor`	`string`	`#121926`	No	Primary text color
`secondaryFontColor`	`string`	`#697586`	No	Secondary text color
`backgroundColor`	`string`	`#ffffff`	No	Widget background color
`speechBubble`	`string`	`#f4f4f4`	No	Speech-bubble color
`speechBubbleText`	`string`	`#121926`	No	Text color inside speech-bubbles
`widgetBubbleBackgroundColor`	`string`	`#3248F2`	No	Bubble handle background color (applies only in mode `"OVERLAY"` & layoutMode `"WIDGET"`)
`fontFamily`	`string`	`Roboto`	No	UI font family

Example

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME, 
    mode: "EMBEDDED", 
    configuration: {
      // UI text & icons
      displayName:       "Support Bot",
      logoUrl:           "https://example.com/logo.png",
      modalLogoUrl:      "https://example.com/modal-logo.png",
      titleText:         "How can I help you today?",
      quickStartHint:    "Try one of these quick commands:",
      quickReplies: [
        { title: "Show me features",    subtitle: "What this bot can do" },
        { title: "Contact support",     subtitle: "Talk to a human" }
      ],

      // Theme & styling
      theme: {
        primaryColor:                "#0055FF",
        secondaryColor:              "#FF5500",
        primaryFontColor:            "#FFFFFF",
        secondaryFontColor:          "#333333",
        backgroundColor:             "#F4F4F4",
        speechBubble:                "#E0E0E0",
        speechBubbleText:            "#000000",
        widgetBubbleBackgroundColor: "#FF0000",
        fontFamily:                  "Arial, sans-serif"
      },

      // Feature toggles
      isLogoVisible:         true,
      isLTR:                 true,
      isAudioEnabled:        false,
      resumePreviousSession: true,
    }
  });
});

Configuration at Runtime

Update any part of the AgentConfiguration after initialization—logos, theme, quick replies, etc.


eucera("when", "ready", () => {
  const agent = eucera.agent({ /* …common setup… */ });
  agent.setConfiguration({
    displayName: "Support Bot",
    logoUrl: "https://cdn.example.com/logo.png",
    theme: { /* … */ }
  });
});

Configuration Override (Optional)

The agent supports both common and mode-specific settings. All attributes go under configuration.overlayConfiguration:

Property	Type	Default	Required	Description
`isHandleLogoVisible`	`boolean`	`true`	No	Toggle visibility of the handle/logo that users click to open the overlay. Applies only in `"WIDGET"` mode.
`layoutMode`	`"WIDGET"`	`"SIDE_PANEL"`	`"FLOATING_SIDE_PANEL"`	`"FLOATING_SIDE_PANEL"`	No	Choose between a compact widget icon (`"WIDGET"`), a full side-panel docked to the side (`"SIDE_PANEL"`), or a floating overlay side-panel (`"FLOATING_SIDE_PANEL"`).
`horizontalAlignment`	`"LEFT"`	`"RIGHT"`	`"RIGHT"`	No	Align the overlay trigger on the left or right edge of the viewport. In `"SIDE_PANEL"` or `"FLOATING_SIDE_PANEL"` mode, this controls which edge the panel slides in from.
`verticalAlignment`	`"TOP"`	`"CENTER"`	`"BOTTOM"`	`"CENTER"`	No	Align the overlay trigger at the top, middle, or bottom of the viewport (only relevant in `"WIDGET"` mode).
`isDraggable`	`boolean`	`true`	No	Allow end users to drag & reposition the widget overlay trigger. Ignored in `"SIDE_PANEL"` and `"FLOATING_SIDE_PANEL"` modes.
`hostWidth`	`number`	`window.innerWidth`	No	Width (in pixels) of the overlay container. Defaults to the full browser window width. You may provide a custom fixed value.

Example: Side Panel Overlay

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME,
    configuration: {
      overlayConfiguration: {
        layoutMode: "SIDE_PANEL",
        horizontalAlignment: "RIGHT", // slides in from the right
        hostWidth: window.innerWidth,
        isDraggable: false // ignored in SIDE_PANEL mode
      }
    }
  });
});

Example: Widget Overlay

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME,
    configuration: {
      overlayConfiguration: {
        layoutMode: "WIDGET",
        isHandleLogoVisible: true,
        horizontalAlignment: "LEFT",
        verticalAlignment: "BOTTOM",
        isDraggable: true
      }
    }
  });
});