Control the widget from JavaScript

The widget script defines window.IperChat as soon as it runs. With the data-iperchat-auto-init attribute the widget starts by itself. Without it, you start it with IperChat.init() whenever you like.

Auto-init. With data-iperchat-auto-init, the widget starts once the page has been parsed. A script added later, for example by a single-page app or a loader that runs on click, starts as soon as it runs.
From JavaScript. Leave out data-iperchat-auto-init and call init():

window.IperChat.init({
  tenant_id: 'YOUR_TENANT_ID',
  language: 'en',
  position: 'bottom-right',
})

The widget starts once per page, so a second init() is ignored. To start it again with other options, call destroy() first.

Options

Each option has a matching attribute for the auto-init snippet.

Option	Attribute	Value	Default
`tenant_id`	`data-tenant-id`	Your tenant ID	Required
`language`	`data-language`	`it`, `en`, `es`, or `auto` (the visitor’s browser, otherwise English)	`it`
`position`	`data-position`	`bottom-right`, `bottom-left` or `inline`	`bottom-right`
`containerId`	`data-container-id`	ID of the element that holds the inline chat	None
`origin_website`	`data-origin-website`	An origin ID from “Agent Configurations”	Your tenant ID
`loadOnOpen`	`data-load="on-open"`	`true`: nothing loads until the chat is opened (details)	`false`
`launcherText`	`data-launcher-text`	Button label shown before your settings load (with `loadOnOpen`)	Chat icon only
`theme.primaryColor`, `theme.secondaryColor`	`data-primary-color`, `data-secondary-color`	Hex colours such as `#174de6`	Your panel settings
`theme.fontFamily`	None	A CSS font family already available on your page	Your panel settings, else Inter
`disableFirebaseAuth`	None	`true`: the widget stays anonymous and never uses sign-in storage	`false`

Colours and a font set in your panel take precedence over theme.

Opening and closing

window.IperChat.open()
window.IperChat.close()
window.IperChat.destroy() // removes the widget from the page

open() works even before the widget has finished loading: the chat opens as soon as the widget is ready. With loadOnOpen, open() is what loads the chat.

Knowing when it’s ready

await window.IperChat.ready

// or
window.addEventListener('iperchat:ready', () => {
  // the widget is on the page
})

IperChat.ready is a promise that resolves once the widget is on the page and its button, or the inline chat, is shown. After destroy(), it resolves again after the next init(). The iperchat:ready event fires on window at the same moment.

Events

Event on `window`	Sent by	Meaning
`iperchat:ready`	The widget	The widget is ready
`iperchat:open`	You	Open the chat
`iperchat:close`	You	Close the chat

Dispatching iperchat:open or iperchat:close has the same effect as open() and close(), for code that can’t reach window.IperChat:

window.dispatchEvent(new CustomEvent('iperchat:open'))

Loading the script on click

This loads nothing from IperChat until the visitor clicks your own button:

<button id="open-chat" type="button">Chat with us</button>
<script>
  document.getElementById('open-chat').addEventListener('click', function () {
    if (window.IperChat) {
      window.IperChat.open()
      return
    }
    var script = document.createElement('script')
    script.src = 'https://widget.iperchat.ai/iperchat.iife.js'
    script.onload = function () {
      window.IperChat.init({ tenant_id: 'YOUR_TENANT_ID', language: 'en' })
      window.IperChat.open()
    }
    document.body.appendChild(script)
  })
</script>

If your site sends a Content-Security-Policy, use the nonce-ready version of this loader in Content Security Policy.

Older integrations

window.GriefAgentChat is an alias of window.IperChat, and the data-griefagent-auto-init attribute still works. Both are kept for integrations made before the rename; use IperChat in new code.