Overlay

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

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 the visibility of the handle logo.
layoutMode	"WIDGET" | "SIDE_PANEL"	"SIDE_PANEL"	No	Select between the compact widget or the full side-panel overlay layout.
horizontalAlignment	"LEFT" | "RIGHT"	"RIGHT"	No	Position the Agent on the left or right edge of the viewport.
verticalAlignment	"TOP" | "CENTER" | "BOTTOM"	"CENTER"	No	Position the Agent at the top, middle, or bottom of the viewport.
isDraggable	boolean	true	No	Allow end users to click and drag the Agent to reposition it on the screen.
hostWidth	number	window.top.innerWidth	No	Set the overlay container’s width in pixels (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: