Agent Configuration Example

An example showcasing how to customize your Foldspace Agent’s look and behavior.

foldspace.agent('API-KEY').setConfiguration({
  // String properties
  agentDisplayName: "Foldspace Assistant",
  entryMessage: "What can I help with?",
  logoUrl: "https://assets.foldspace.com/logos/foldspace-logo-light.svg",
  renderMode: "IFRAME",
  promptBarHint: "Ask me anything...",

  // Boolean properties
  allowAgentDrag: true,
  enableVoiceChat: true,
  enableSpeechToText: true,
  displaySparkIcon: true,

  // Position property (format: "VERTICAL_HORIZONTAL")
  initialAgentPosition: "BOTTOM_RIGHT",
  
	// Session timeout in minutes
  sessionTimeout: 30,

  // Theme object
  theme: {
    primaryColor: "#0066FF",
    primaryFontColor: "#0B1220",
    backgroundColor: "#FFFFFF",
    fontFamily: "Roboto",
    fontSize: 14,
    secondaryFontColor: "#6B7280",
    secondaryColor: "#F3F4F6",
    borderColor: "#E6E9EE"
  },

  // Dark mode settings
  darkModeSettings: {
    darkTheme: {
      primaryColor: "#3B82F6",
      primaryFontColor: "#FFFFFF",
      backgroundColor: "#0F1724",
      fontFamily: "Roboto",
      fontSize: 14,
      secondaryFontColor: "#9CA3AF",
      secondaryColor: "#111827",
      borderColor: "#1F2937"
    },
    darkLogoUrl: "https://assets.foldspace.com/logos/foldspace-logo-dark.svg"
  },

  // Border animation settings
  borderAnimationSettings: {
    enableBorderAnimation: true,
    borderColors: ["#0066FF", "#3B82F6", "#60A5FA"]
  },

  // Conversation starters settings
  conversationStartersSettings: {
    defaultConversationStarter: "KNOWLEDGE",
    startNewConversationOnStarterClick: true,
    conversationStarters: {
      KNOWLEDGE: [
        { title: "What is your return policy?" },
        { title: "How do I track my order?" },
        { title: "Show me product specifications" }
      ],
      ACTION: [
        { title: "Schedule a demo" },
        { title: "Check my order status" },
        { title: "Contact support" }
      ]
    }
  },

  // Style override
  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"
    }
  },
  
  shareStateSettings: {
  	active: true,
    tooltipText: "Enable Tandem Mode — allow the assistant to read the page to help complete tasks",
		tooltipStarters: [
      "Fill out this form for me",
      "Suggest values for the fields on this page"
    ]
  },
  
  screenSharingSettings: {
    active: true,
    tooltipText: "Allow the assistant to understand this page and provide helpful suggestions",
    tooltipStarters: [
      "Summarize this page for me",
      "Highlight important information here"
    ],
    shareMode: "both"
  }
});