Skip to main content
After the widget script loads, you can control it programmatically through the window.PSquaredChat object.

Initialization

The widget auto-initializes from the script tag, but you can also initialize manually:
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  theme: 'auto',        // 'light', 'dark', or 'auto'
  primaryColor: '#10b981',
  position: 'bottom-right', // 'bottom-left' or 'bottom-right'
  uiLang: 'multi',      // 'en', 'de', or 'multi'
  buttonIcon: 'messageCircle', // 'messageCircle', 'chat', 'help', 'support', 'bubble', or 'custom'
  buttonAnimation: 'default'   // 'default', 'bounce', 'slide', 'fade', or 'none'
});

Widget instance

Access the active widget instance:
const widget = window.PSquaredChat.widget;

Destroying the widget

Remove the widget from the page:
window.PSquaredChat.destroy();

Configuration options

OptionTypeDescription
agentIdstringYour agent’s unique identifier
themestringlight, dark, or auto (follows system preference)
primaryColorstringHex color for the widget theme
positionstringbottom-left or bottom-right
uiLangstringen, de, or multi (auto-detect)
buttonIconstringPreset icon or custom with buttonIconUrl
buttonIconUrlstringURL for a custom button icon
buttonAnimationstringTrigger button animation style
showOnPagesstring[]URL patterns where the widget should appear
hideOnPagesstring[]URL patterns where the widget should be hidden

Email collection

Configure email collection within the widget:
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  emailCollection: {
    enabled: true,
    requestAfterMessage: 3, // Ask for email after 3 messages
    collectName: true
  }
});

Human handover

Configure human support availability (Pro and Business plans):
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  humanSupport: {
    enabled: true,
    // Customize handover messages per language
  }
});

Delayed messages

Show timed messages to engage visitors. Supports multi-language:
window.PSquaredChat.init({
  agentId: 'your-agent-id',
  delayedMessages: [
    {
      delay: 5000, // 5 seconds
      message: {
        en: 'Need help? Ask me anything!',
        de: 'Brauchen Sie Hilfe? Fragen Sie mich!'
      }
    }
  ]
});