Configuration

All setup paths (window.WebfonConfig, initWebfon(config), Webfon.init(config)) accept the same configuration object.

Parameters

Parameter	Type	Default	Description
providerId	string	— (required)	Provider ID.
apiUrl	string	https://api.webfon.io	API base URL.
getToken	({jkt, providerId, apiUrl}) => Promise<string | null>	—	Called with the widget's jkt (plus the resolved apiUrl); returns a self-signed socket token — member login (see Authentication).
target	HTMLElement	document.body	Container the widget host element is appended to.
onMessage	(message) => void	—	Fires when a chat message arrives from the socket (see Events).
onAgentAvailable	(agent) => void	—	Fires when an agent transitions to an available state (online/away) (see Events).

Cannot be passed through data-*

getToken / on* (functions) and target (a DOM element) carry complex values, so they cannot be passed through the CDN data-* attributes. Use window.WebfonConfig or initWebfon() for these. on* callbacks can also be registered at runtime with Webfon.onEvent().

Full configuration example

A reference example with every parameter (most of them are optional):

import { initWebfon } from '@webfon/client';

const widget = initWebfon({
  // --- Required ---
  providerId: 'PROVIDER_ID',

  // --- Optional: connection ---
  apiUrl: 'https://api.webfon.com',          // default: https://api.webfon.io

  // --- Optional: member login ---
  getToken: async ({ jkt }) => {             // your backend signs the socket token
    const res = await fetch('/api/webfon-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ jkt }),
    });
    return res.ok ? (await res.json()).token : null;
  },

  // --- Optional: placement ---
  target: document.getElementById('webfon-slot'),  // default: document.body

  // --- Optional: events ---
  onMessage: (m) => console.log('new message', m),
  onAgentAvailable: (a) => console.log('agent online', a),
});

Appearance settings are not here

Appearance settings — color, corner position, offset, working hours, whether the chat/call channels are enabled — are held in the admin panel, not in the embed code, and arrive from the server. For details see Admin Panel.