# Setup Install the Foldspace SDK, identify the user so conversation history persists, and show the agent. Install the Foldspace SDK with one snippet. Copy yours from **Agent Studio → Setup** (pre-filled with your loader URL and Agent Key) and paste it before the closing `` tag. The SDK loads asynchronously, so it never blocks or slows your site. ```html title="index.html" ``` Replace `YOUR-AGENT-KEY` with your Agent Key from **Agent Studio → Setup**. ## Identify the user `foldspace.identify()` ties the session to your signed-in user. This is what gives the agent real user context and persists each user's **conversation history** across sessions and devices, instead of treating every visit as a new anonymous session. Identity is built in, so the agent runs without `identify()`, but pass your real `user.id` (and `subscription.id`, if you bill by subscription) in production. Add fields like `email`, `name`, `role`, or your own attributes to enrich context and analytics. See [User context](/start/user-context/) for the full field list and custom attributes. :::caution Call `identify()` before `show()`, inside the `when('ready')` callback, so the agent has the user's context before it renders. ::: ## Show the agent: embedded or floating widget This is the first thing everyone asks, so decide it as part of setup. The agent renders two ways — pick one inside the same `when('ready')` callback: - **Embedded (recommended).** The agent mounts inline inside a container you place in your layout, so it feels like a native part of your product. This is the way we recommend shipping — it drives the most engagement. See [Embedded mode](/guides/embedded-agent/). - **Floating widget.** The agent rides in a floating launcher that overlays your app. Quickest to drop in when you don't yet have a place to host it inline. **Embedded (recommended)** Mount the agent into a container element you control: ```javascript // A container somewhere in your layout. const agentContainer = document.getElementById('agentContainer'); foldspace('when', 'ready', () => { foldspace.identify(context); foldspace.agent({ apiName: 'YOUR-API-NAME', // from Agent Studio → Setup mode: 'EMBEDDED', configuration: { embeddedConfiguration: { container: agentContainer }, }, }); }); ``` See [Embedded mode](/guides/embedded-agent/) for layout and sizing options. **Floating widget** Call `show()` to render the floating launcher: ```javascript foldspace('when', 'ready', () => { foldspace.identify(context); foldspace.agent('YOUR-AGENT-KEY').show(); }); ``` ## Configure look and behavior Set the agent's appearance, greeting, and behavior in **Agent Studio → Style & Behavior**, or override it in code from the [SDK configuration](/customize/configuration/) reference. ## Set up with your AI coding tool Prefer to let your editor do the wiring? Install the Foldspace plugin and your AI coding tool adds the agent, connects your users, and discovers your actions for you. See [Vibe coding](/guides/vibe-coding/).