Home
Docs
PongSetup options

PongSetup options

Set window.PongSetup before the loader runs. Options set here win over the workspace defaults chosen in the desk; data-* attributes on the loader tag win over both.

<script>
  PongSetup = {
    language: 'en',
    theme: 'auto',
    buttonStyle: 'round',
    buttonPosition: 'bl',
    colors: { buttonBg: '#2f6fed', buttonText: '#fff' },
  };
</script>
<script src="https://js.pong.ee/YOUR_PUBLIC_KEY" async></script>

As attributes

Most options can also go on the loader tag itself, with no extra script — handy in site builders and GTM:

Attribute	Values	Same as
`data-id`	your public key, only with the older `call.pong.ee/pong.js` address	`PongID`
`data-language`	`en`, `ru`	`language`
`data-theme`	`light` \| `dark` \| `auto`	`theme`
`data-color`	`#hex`	`colors.buttonBg`
`data-button-style`	`3d` \| `round` \| `tab`	`buttonStyle`
`data-button-position`	`br` \| `bl`	`buttonPosition`
`data-button-text`	text	`buttonText`
`data-size`	`small` \| `normal` \| `large`	`size`
`data-title`, `data-subtitle`	text	`title`, `subtitle`
`data-chat-width`, `data-chat-height`	pixels	`chatWidth`, `chatHeight`
`data-z-index`	number	`zIndex`
`data-start-hidden`	`true` \| `false`	`startHidden`
`data-group-id`	group id	`groupId`
`data-client-id`	your user id	`clientId`
`data-deferred-loading`	`true` \| `false`	`deferredLoading`
`data-inject-to`	element id	`injectTo`
`data-commands`	`true` \| `false`	`commands`
`data-data-layer`	layer name, or `false` for none	`dataLayer`
`data-debug`	`true` \| `false`	`debug`
`data-onload`	a function name, e.g. `onPong` or `app.onPong`	— (see below)

To run your own setup code once the widget is ready, name a function in data-onload; it receives the Pong API — see Run your code when Pong is ready.

Look

Option	Type	What it does
`theme`	`'light'` \| `'dark'` \| `'auto'`	Widget theme; `auto` follows the visitor’s system. Default `light`.
`colors`	object	`buttonBg`, `buttonText` (accent colour), `clientBubbleBg`, `clientBubbleText`, `agentBubbleBg`.
`buttonStyle`	`'round'` \| `'tab'` \| `'3d'`	Launcher look. Default: the workspace setting.
`buttonText`	string	Text on the launcher.
`title`, `subtitle`	string	Header of the chat window.
`language`	`'en'` \| `'ru'`	Widget interface language. Default: the page’s `<html lang>`, then English.

Placement

Option	Type	What it does
`buttonPosition`	`'br'` \| `'bl'`	Bottom-right or bottom-left corner.
`startHidden`	boolean	Keep the button hidden until you call `show` or an agent writes.
`size`	`'small'` \| `'normal'` \| `'large'`	Widget size: the open chat on desktop (320×460, 350×510 or 380×560 px) and the launcher (a 48, 56 or 64 px ball; the tab scales the same way). Default: the workspace setting (Settings → Chat widget), `large` if none. On phones the chat is full screen.
`chatWidth`, `chatHeight`	number (px)	Exact size of the open chat on desktop; wins over `size`. On phones the chat is full screen.
`zIndex`	number	Stacking order, if your page has overlays above the chat.
`injectTo`	element id	Mount the widget inside this element instead of `<body>`.

Behaviour

Option	Type	What it does
`deferredLoading`	boolean	Wait for the `load` event and an idle moment before mounting.
`groupId`	string	Initial group (also `window.PongGroupID`).
`identity`	object	Signed identity `{ userhash, ts, sig }` — see Verified identity.
`clientId`	string	Your own user id, sent as a hint to label the visitor.
`commands`	boolean	Set `false` to stop agents from reloading the page or opening another page of your site for the visitor.
`dataLayer`	string \| false	Where chat events are pushed for Google Tag Manager: another layer's name, or `false` for none. Overrides Settings → Chat widget → Analytics (`dataLayer` by default).
`onAnalyticEvent`	function	Called with `Chat opened`, `Chat closed`, `Message sent`, `Chat initiated by agent`.
`debug`	boolean	Log unsupported calls and `Pong.debug` output to the browser console.

Hide parts of the page from screenshots

Agents can request a snapshot of what the visitor sees. Password, card and one-time-code fields and the chat itself are always hidden. Mark anything else private with an attribute:

<div data-pong-private>Account balance: €1,240</div>

← Events Verified identity →