Skip to main content

Widget Builder

Use this interactive builder to customize your self-hosted PocketPing widget and generate the installation code.

For SaaS Users

If you're using app.pocketping.io, you can customize your widget directly in the dashboard under Project Settings > Widget.

Basic Settings

Your self-hosted bridge server URL

Appearance

Advanced Colors

From
→
To
From
→
To

Preview

Support
Online
Hi! How can we help you today?
Hi, I have a question

Installation Code

<script src="https://cdn.pocketping.io/widget.js"></script>
<script>
  PocketPing.init({
  endpoint: 'https://yoursite.com/pocketping',
  welcomeMessage: 'Hi! How can we help you today?',
  headerColor: {
    from: '#36e3ff',
    to: '#7c5cff'
  },
  toggleColor: {
    from: '#36e3ff',
    to: '#7c5cff'
  }
});
</script>
Add this code before the closing </body> tag

Manual Configuration​

If you prefer to write the configuration manually, here are all available options:

Basic Options​

PocketPing.init({
  // Required for self-hosted
  endpoint: 'https://yoursite.com/pocketping',

  // Branding
  operatorName: 'Support',
  operatorAvatar: 'https://example.com/avatar.png',

  // Appearance
  primaryColor: '#6366f1',
  position: 'bottom-right', // or 'bottom-left'
  theme: 'auto', // 'light', 'dark', or 'auto'

  // Behavior
  welcomeMessage: 'Hi! How can we help?',
  placeholder: 'Type a message...',
  soundEnabled: true,
});

Advanced Color Options​

For more control, you can customize individual widget colors. Colors can be solid hex values or gradients:

PocketPing.init({
  endpoint: 'https://yoursite.com/pocketping',

  // Basic appearance
  primaryColor: '#6366f1',

  // Advanced colors (solid)
  headerColor: '#7c5cff',      // Header background
  footerColor: '#f0f2f5',      // Input area background
  toggleColor: '#7c5cff',      // Floating button color
  chatBackground: 'whatsapp',  // 'whatsapp', 'dots', 'plain', or URL
});

Gradient Colors​

Header and toggle button support gradients:

PocketPing.init({
  endpoint: 'https://yoursite.com/pocketping',

  // Gradient header (default: cyan → violet)
  headerColor: {
    from: '#36e3ff',
    to: '#7c5cff',
    direction: 'to right',  // optional, default: 'to right'
  },

  // Gradient toggle button
  toggleColor: {
    from: '#36e3ff',
    to: '#7c5cff',
  },
});

Theme-Aware Colors​

For different colors in light and dark modes:

PocketPing.init({
  endpoint: 'https://yoursite.com/pocketping',

  // Single color for both themes
  primaryColor: '#6366f1',

  // Different colors per theme (solid or gradient)
  headerColor: {
    light: { from: '#36e3ff', to: '#7c5cff' },  // gradient in light mode
    dark: '#202c33',                             // solid in dark mode
  },
  footerColor: {
    light: '#f0f2f5',
    dark: '#202c33',
  },
  toggleColor: {
    light: { from: '#36e3ff', to: '#7c5cff' },
    dark: { from: '#36e3ff', to: '#7c5cff' },
  },
});

Chat Background Options​

ValueDescription
'whatsapp'WhatsApp-style pattern (default)
'dots'Subtle dots pattern
'plain'Solid background color
'https://...'Custom image URL
// WhatsApp pattern (default)
PocketPing.init({
  endpoint: '...',
  chatBackground: 'whatsapp',
});

// Custom image
PocketPing.init({
  endpoint: '...',
  chatBackground: 'https://yoursite.com/chat-bg.jpg',
});

// Plain color
PocketPing.init({
  endpoint: '...',
  chatBackground: 'plain',
});

Pre-Chat Form​

Collect visitor contact info before they start chatting:

PocketPing.init({
  endpoint: 'https://yoursite.com/pocketping',

  preChatForm: {
    enabled: true,
    required: false,          // Allow skipping
    timing: 'after_first',    // 'before_first' or 'after_first'
    fields: 'email_only',     // See options below
  },
});

Field Options​

ValueDescription
'email_only'Email field only
'phone_only'Phone field only
'email_or_phone'Visitor chooses one
'email_and_phone'Both required

Full Example​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- PocketPing Widget -->
  <script src="https://cdn.pocketping.io/widget.js"></script>
  <script>
    PocketPing.init({
      endpoint: 'https://yoursite.com/pocketping',
      operatorName: 'Acme Support',
      operatorAvatar: 'https://acme.com/support-avatar.png',
      primaryColor: '#0ea5e9',
      theme: 'auto',
      position: 'bottom-right',
      welcomeMessage: 'Hi! How can we help you today?',
      headerColor: {
        light: '#0ea5e9',
        dark: '#0284c7',
      },
      chatBackground: 'whatsapp',
      preChatForm: {
        enabled: true,
        required: false,
        timing: 'after_first',
        fields: 'email_only',
      },
    });
  </script>
</body>
</html>

Next Steps​