Get started

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.

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

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.

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)
Floating widget

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.

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.

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.

Setup

Identify the user

Show the agent: embedded or floating widget

Configure look and behavior

Set up with your AI coding tool