# SDK configuration

Configure how your Foldspace agent looks, behaves, and renders through the SDK.

:::note[Prerequisites]
The [SDK is installed](/start/install/) on your page.
:::

The SDK accepts a single configuration object that controls how the agent looks, introduces itself, and behaves on the page. Pass it through `setConfiguration` on an agent instance:

```javascript
foldspace.agent('YOUR-AGENT-KEY').setConfiguration({
  // settings go here
});
```

<Mermaid chart={`flowchart TD
    SC["setConfiguration({ })"]
    AP["Appearance & greeting<br/>name, logo, entry message"]
    PL["Placement & rendering<br/>position, render mode, drag"]
    TH["Theme<br/>colors, fonts, border"]
    DM["Dark mode<br/>dark theme, dark logo"]
    IC["Interaction<br/>timeout, voice, speech"]
    CS["Conversation starters<br/>prompts, defaults"]
    SO["Style overrides<br/>CSS-level customization"]
    SC --> AP
    SC --> PL
    SC --> TH
    SC --> DM
    SC --> IC
    SC --> CS
    SC --> SO
`} />

Settings are grouped into focused areas. Each grouped setting (such as `theme`) has its own reference page covering every key, its type, and its default value.

## Setting groups

| Group | What it controls |
| :--- | :--- |
| [Appearance and greeting](/customize/appearance/) | The agent's display name, logo, entry message, and prompt bar hint. |
| [Placement and rendering](/customize/placement/) | How the agent is embedded, anchored, and positioned on screen. |
| [Theme](/customize/theme/) | The colors and typography used in the agent interface. |
| [Dark mode](/customize/dark-mode/) | Dark-theme colors and a dark-specific logo. |
| [Interaction and communication](/customize/interaction/) | Session timeout, voice chat, speech-to-text, and new-conversation triggers. |
| [Conversation starters](/customize/conversation-starters/) | Predefined prompts and behavior for starting conversations. |
| [Style overrides](/customize/style-overrides/) | CSS-level overrides for the entry button, speech bubble, and agent frame. |
| [Border animation](/customize/border-animation/) | The animated border around the agent entry point. |
| [Share current tab](/customize/share-current-tab/) | Let the agent read and understand the current page content. |
| [Embedded configuration](/customize/embedded-configuration/) | Render the agent inline inside a specific DOM container. |
| [Localization](/customize/localization/) | Language override and developer-translated strings. |

See also the [full configuration example](/customize/configuration-example/) for a single snippet that uses every group together.

## Studio and SDK precedence

<Mermaid chart={`flowchart TD
    ST["Studio settings<br/>dashboard UI"] --> D["Default values"]
    SDK["SDK setConfiguration<br/>code"] --> D
    SDK -->|"overrides"| ST
    D --> R["Rendered agent"]
    style SDK fill:#1842ef,stroke:#1842ef,color:#ffffff
    style R fill:#e8ecff,stroke:#1842ef,color:#0a0e1a
`} />

Configure every one of these settings visually in [Studio](https://app.foldspace.ai/agent/customize). SDK configuration takes precedence over Studio values, so you can override defaults per page or per context directly in code.