Style Override Settings

entryComponentStyle

Defines the styling of the entry component, allowing customization of its layout and borders. This object contains nested properties for different areas within the entry component.

Type: object
Default Value:

{
  "header": {
    "horizontalAlignment": "start"
  },
  "conversationStarter": {
    "borderWidth": 1,
    "borderColor": "#000000"
  }
}

Structure:

• header
  • horizontalAlignment — Alignment of header content. Type: "start" | "center" | "end" Default: "center"
• conversationStarter
  • borderWidth — Alignment of header content. Type: number Default: 1
  • borderColor — Alignment of header content. Type: string Default: ""

speechBubbleStyle

Defines the style of the user message speech bubble. Use this object to control layout, color, and typography inside the bubble.

Type: object
Default Value: {}
Available properties:

• padding — Internal spacing inside the speech bubble. Type: string
• borderRadius — Rounding applied to the speech bubble corners. Type: string
• backgroundColor — Background color of the speech bubble. Type: string
• color — Text color used inside the speech bubble. Type: string
• fontSize — Font size used for bubble text. Type: string
• lineHeight — Line height for text inside the bubble. Type: string

Example

foldspace.agent('API-KEY').setConfiguration({
  styleOverride: {
    entryComponentStyle: {
      header: {
        horizontalAlignment: "start"
      },
      conversationStarter: {
        borderColor: "#E6E9EE",
        borderWidth: 1
      }
    },
    speechBubbleStyle: {
      padding: "14px 16px",
      borderRadius: "12px",
      backgroundColor: "#FFFFFF",
      color: "#0B1220",
      fontSize: "14px",
      lineHeight: "1.4"
    }
  }
});