Widgets

What is a Widget?

A Widget is an embeddable AI chat interface you can add to any website. Once embedded, visitors can interact with your AI assistant directly on your site — without leaving the page.

Widgets are configured in the emercai dashboard and deployed via a small script snippet. You control the appearance, behavior, and content through a JSON configuration. One widget per use case is typical: a support widget for your help center, a product advisor for your shop, or a lead generator for a landing page.

Create a Widget

Navigate to Widgets in the left sidebar. Click New Widget in the top-right corner.

You will be prompted to enter a name. After confirming, the widget is created and you land on its detail page where you can configure everything further.

Set a Name

The name is internal-only — your website visitors never see it. Use something descriptive enough that you and your team can identify the widget at a glance, for example Support Chat – Help Center or Product Advisor – Shop.

You can rename a widget at any time from its detail page without affecting the embed on your site.

Add a Description

The description is also internal. It lives inside the widget configuration and is useful for teams working across multiple widgets. Describe the widget's purpose, the target audience, or any special behavior it has.

Example: Answers questions about pricing and plans. Escalates to human support if the user asks for a refund.

Configure Your Widget

The configuration determines how the widget looks and behaves. You edit it as a JSON object directly in the dashboard. Changes take effect after you save.

Widget Type

Each widget has a type that controls its layout on the page. Currently one type is supported:

FooterBar — a compact chat bar pinned to the bottom of the page. It expands into a full chat window when a visitor clicks it. This is the standard format for website chat assistants.

The type is set when you create the widget and cannot be changed afterwards. If you need a different layout, create a new widget.

Appearance Settings

The JSON configuration accepts appearance options such as:

• Colors — primary color, button color, background
• Position — left or right alignment of the FooterBar
• Branding — custom logo, avatar image, or greeting text
• Behavior — auto-open delay, welcome message, placeholder text

Refer to the configuration reference for a full list of supported keys and their default values.

Screenshot

You can upload a screenshot to the widget. This is useful for documentation or team handoff — it gives others a quick visual of what the widget looks like in production. The screenshot is stored internally and not shown to end users.

Embed on Your Website

Once your widget is configured, you embed it by adding a script tag to your site's HTML. The embed code is available on the widget's detail page.

Embed Code

The snippet looks like this:

<script
  src="https://cdn.emercai.com/loader.js"
  data-widget-id="YOUR_WIDGET_ID"
  async
></script>

Place this tag before the closing </body> tag on every page where you want the widget to appear. Replace YOUR_WIDGET_ID with the actual ID shown in the dashboard.

The loader script is lightweight and loads the widget bundle asynchronously, so it does not block your page from rendering.

Testing the Embed

After adding the snippet:

1. Open the page in your browser and scroll to the bottom — the FooterBar should appear.
2. Click the chat button and verify the widget opens correctly.
3. Send a test message and confirm the AI responds.

If the widget does not appear, double-check that the data-widget-id matches the ID in your dashboard and that the script tag is placed correctly in the HTML.

For staging environments, add the widget to your staging site first and test there before rolling out to production.

Manage Your Widgets

Search and Filter

The Widgets list shows all widgets in your account. Use the search field at the top of the list to filter by name. This is especially useful when you manage many widgets across different sites or use cases.

Widgets are paginated — if you have more than a page's worth, use the navigation controls at the bottom of the list to move between pages.

Edit a Widget

Click on any widget in the list to open its detail page. From there you can:

• Rename the widget
• Update the description
• Modify the JSON configuration
• Upload or replace the screenshot

Save your changes with the Save button. Configuration changes are applied immediately — active embeds on your site will pick up the new settings on the next page load.

Delete a Widget

Open the widget's detail page and use the delete option (typically in the settings menu or a danger zone at the bottom of the page).

Before deleting, remove the embed script from your website. If the script stays on your site after the widget is deleted, the loader will not find the widget and nothing will render — but it avoids any console errors to clean up the snippet first.

Deletion is permanent. If you need the widget again later, you will have to create a new one from scratch.