Website widget

Add your agent as a chat widget on your website. Configure it from the agent dashboard and embed it with a short script snippet.

Configure the widget

1. Open your agent profile in the Fonema dashboard.
2. Go to the Media tab.
3. Open Website widget and customize its appearance and copy.

Settings

Setting	Description
Widget title	Title shown in the widget header (for example, Agente Chat).
Icon URL	Image URL for the widget icon (for example, https://example.com/icon.png).
Primary color	Main accent color for the widget (hex value, for example #1e3a8a).
Welcome message	Greeting shown when a visitor opens the chat (for example, Hola!).
Message field text	Placeholder text in the message input (for example, Send a message...).
Suggested messages	Quick-reply chips visitors can tap to start the conversation. Use Add suggested message to add more.
Launcher text	Main text shown on the floating launcher button before the chat is opened.
Launcher subtitle	Secondary text shown below the launcher text.

After saving, copy the embed code shown at the bottom of the section.

Embed on your site

Paste this snippet before the closing </body> tag of your website:

<script src="https://dashboard.fonema.ai/sdk/text-embed.js" async></script>
<script>
  function initFonemaWidget() {
    if (!window.Fonema) return setTimeout(initFonemaWidget, 50);
    window.Fonema.init({ slug: 'YOUR_AGENT_SLUG' });
  }
  initFonemaWidget();
</script>

Replace YOUR_AGENT_SLUG with the slug from your dashboard (for example, Kevin-DEPG28K8).

Programmatic control

Fonema.init() returns a widget instance you can use to open or close the chat panel from your own JavaScript.

// Launcher mode (default): floating button
const widget = Fonema.init({
  slug: 'YOUR_AGENT_SLUG',
  displayMode: 'launcher',
});

// Inline mode: pass target (displayMode is optional)
const inlineWidget = Fonema.init({
  slug: 'YOUR_AGENT_SLUG',
  target: document.getElementById('fonema-widget'),
});

// Optional: expose in the browser console while developing
window.widget = widget;

// Open the launcher panel (no-op in inline mode, which is always open)
widget.open();

Fonema.init() options

Option	Type	Description
slug	string	Required. Agent slug from the dashboard embed code.
displayMode	string	Optional. launcher shows a floating button (default). inline embeds the chat inside target. You can omit this when target is set.
target	HTMLElement	Optional. Container element for inline mode. When provided, the widget renders inside it and displayMode is optional.

Widget methods

Method	Description
widget.open()	Opens the chat panel. In inline mode the chat is always visible, so this has no effect.
widget.close()	Closes the chat panel.

Example: open on page load

function initFonemaWidget() {
  if (!window.Fonema) return setTimeout(initFonemaWidget, 50);

  const widget = window.Fonema.init({ slug: 'YOUR_AGENT_SLUG' });
  window.widget = widget;
  widget.open();
}
initFonemaWidget();

Example: custom button

<button type="button" id="open-chat">Chat with us</button>

<script src="https://dashboard.fonema.ai/sdk/text-embed.js" async></script>
<script>
  let widget;

  function initFonemaWidget() {
    if (!window.Fonema) return setTimeout(initFonemaWidget, 50);
    widget = window.Fonema.init({ slug: 'YOUR_AGENT_SLUG' });
    document.getElementById('open-chat').addEventListener('click', () => widget.open());
  }

  initFonemaWidget();
</script>