Classic

A subtle, floating chat bubble that expands into a sleek slide-in panel on demand—delivering help exactly when users need it, without ever cluttering your main interface.

Prerequisite

This page assumes you’ve already installed Eucera SDK.

Installation

Initialize your overlay agent with your API name:

JavaScript

// using the api name of your agent
const AGENT_API_NAME = "playground";

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME, 
    mode: "OVERLAY"
  });
});

Configuration

The embedded agent supports both common and mode-specific settings. All attributes go under configuration.overlayConfiguration:

Property	Type	Default	Required	Description
isHandleLogoVisible	boolean	true	No	Toggle visibility of the handle/logo that users click to open the overlay.
layoutMode	"WIDGET" "SIDE_PANEL"	"SIDE_PANEL"	No	Choose between a compact widget icon or the full side-panel overlay layout.
horizontalAlignment	"LEFT" "RIGHT"	"RIGHT"	No	Align the overlay trigger on the left or right edge of the viewport.
verticalAlignment	"TOP" "CENTER" "BOTTOM"	"CENTER"	No	Align the overlay trigger at the top, middle, or bottom of the viewport.
isDraggable	boolean	true	No	Allow end users to drag & reposition the overlay trigger on screen.
hostWidth	number	window.top.innerWidth	No	Width (in pixels) of the overlay container; defaults to the full browser window width.

JavaScript

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME, 
    mode: "OVERLAY",
    configuration: {
      overlayConfiguration: {
        hostWidth: window.innerWidth,
        isDraggable: false,
        verticalAlignment: 'BOTTOM',
        horizontalAlignment: 'LEFT',
        layoutMode: 'WIDGET',
        isHandleLogoVisible: true
      }
    }
  });
});

For the full list of shared options across all modes, see Common Configuration.

Programmatic Control API

Once your agent is initialized, you can call any of these methods on the returned instance. Each method returns the agent instance itself, so you can chain calls.

JavaScript

eucera("when", "ready", () => {
  const agent = eucera.agent({ /* …common setup… */ });
  // Now you can call any of the methods below:
  // agent.message(...).open().setViewType("WIDGET").hide()...
});

---

message(text: string): this

Programmatically send a chat message as if the user typed it.

JavaScript

agent.message("Hello, agent! What's on my agenda today?");

---

Overlay Controls

Open the overlay

JavaScript

agent.open();

Close the overlay

JavaScript

agent.close();

---

Visibility Controls

Show the agent

JavaScript

agent.show();

Hide the agent

JavaScript

agent.hide();

---

View Type

Switch between widget and side-panel layouts on the fly:

JavaScript

// Options: "WIDGET" or "SIDE_PANEL"
agent.setViewType("WIDGET");

---

Remove / Destroy

Tear down the agent completely—unmounts the UI, clears its state, and frees resources.

JavaScript

agent.remove();

---

Example: Chaining Multiple Calls

JavaScript

eucera("when", "ready", () => {
  eucera.agent({ /* …common setup… */ })
    .message("Let’s get started.")
    .open()
    .setViewType("SIDE_PANEL")
    .hide()
    .remove();
});

AI Actions

Empower your agent with custom, AI-powered actions that automate workflows and deliver smarter, context-aware responses.

Knowledge Base

Enhance your agent’s expertise by integrating a tailored knowledge base for accurate, authoritative, and context-rich answers.

Live Playground

Try it out in our interactive demo: