Setup

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 </body> tag. The SDK loads asynchronously, so it never blocks or slows your site.

index.html

<body>
  <!-- Your HTML content goes here -->
  <script type="text/javascript">
    (function (w, d, u, n, k, c) {
      w[n] = w[n] || function () { (w[n].q = w[n].q || []).push(arguments); };
      w.__FOLD_SPACE__ = n; w[n].k = k; w[n].c = c;
      var s = d.createElement('script'); s.async = true; s.src = u + '?k=' + k;
      var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);
    })(window, document, 'https://script.eucerahive.io/web/sdk/foldspace.js', 'foldspace', 'YOUR-AGENT-KEY');

    // Identify the signed-in user so the agent has real context and conversation
    // history persists for this user across sessions and devices.
    const context = {
      user: { id: 'YOUR-USER-ID' },
      subscription: { id: 'YOUR-SUBSCRIPTION-ID' },
    };

    foldspace('when', 'ready', () => {
      foldspace.identify(context);
      // Render the agent — choose embedded or the floating widget below.
    });
  </script>
</body>

Replace YOUR-AGENT-KEY with your Agent Key from Agent Studio → Setup.

If the agent doesn’t appear after adding the snippet, check your Content Security Policy first. A CSP that doesn’t allow script.eucerahive.io blocks the SDK silently, and the browser console names the directive it violated.

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 for the full field list and custom attributes.

Note

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.
• 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:

// 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 for layout and sizing options.

Floating widget

Call show() to render the floating launcher:

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 reference.

Connect your AI coding tool

Add the Foldspace MCP server to your editor, and your assistant can browse your actions and implement them in your code. See Vibe coding.