Widget Installation

Add the Chat24Plus live chat widget to your website in minutes. The widget provides a beautiful, customizable interface for customer conversations.

Quick Installation

Step 1: Get Your Widget ID

1. Log in to your Chat24Plus Dashboard
2. Navigate to Settings → Widget
3. Copy your unique Widget ID (format: c24p_xxxxxxxxxxxxx)

Step 2: Add the Code Snippet

Copy this code and paste it just before the closing </body> tag on every page where you want the chat widget to appear:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['Chat24Plus']=o;w[o] = w[o] || function () {
      (w[o].q = w[o].q || []).push(arguments)
    };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'c24p', 'https://cdn.chat24plus.com/widget.js'));

  c24p('init', {
    widgetId: 'YOUR_WIDGET_ID'
  });
</script>

Important

Replace YOUR_WIDGET_ID with your actual Widget ID from the dashboard.

Step 3: Verify Installation

1. Save your changes and upload to your web server
2. Visit your website
3. Look for the chat widget button (usually bottom-right corner)
4. Click to open and send a test message

Testing

Send a test message and check your dashboard to confirm it appears in the Conversations section.

Platform-Specific Installation

WordPress

Option 1: Plugin (Recommended)

1. Install the Chat24Plus plugin from WordPress Plugin Directory
2. Activate the plugin
3. Go to Settings → Chat24Plus
4. Enter your Widget ID
5. Click Save Changes

Option 2: Manual Installation

1. Go to Appearance → Theme Editor
2. Select footer.php from the right sidebar
3. Paste the widget code before </body>
4. Click Update File

Shopify

1. Go to Online Store → Themes in your Shopify admin
2. Click Actions → Edit Code
3. Open theme.liquid from the Layout folder
4. Paste the widget code before </body>
5. Click Save

Shopify App

We also offer a native Shopify app for easier integration. Search for "Chat24Plus" in the Shopify App Store.

Wix

1. Open your Wix Editor
2. Click Settings → Custom Code
3. Click + Add Custom Code
4. Paste the widget code
5. Set to load on All Pages
6. Place code in Body - End
7. Click Apply

Webflow

1. Open your project in Webflow Designer
2. Click Pages icon on the left
3. Select the page (or use site-wide settings)
4. Click Settings → Custom Code
5. Paste the widget code in Footer Code
6. Click Save and Publish

Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the widget code in Footer section
3. Click Save

Version 7.0 vs 7.1

Instructions work for both Squarespace versions. Code injection is available on Business plans and above.

Custom HTML / Static Sites

Simply paste the widget code before the closing </body> tag in your HTML files.

React / Vue / Angular

See our Framework Integration Guide for implementation in modern JavaScript frameworks.

Widget Configuration

Customize the widget appearance and behavior through the dashboard or JavaScript options.

Dashboard Configuration

Configure these options at Settings → Widget:

Appearance:

• Theme (Light/Dark/Auto)
• Primary color
• Button position (Right/Left)
• Button icon
• Welcome message

Behavior:

• Auto-open after delay
• Show on specific pages only
• Hide on mobile devices
• Require name/email before chat

Working Hours:

• Set business hours
• Custom offline message
• Collect email when offline

JavaScript Configuration

For advanced customization, pass options to the init function:

c24p('init', {
  widgetId: 'YOUR_WIDGET_ID',

  // Appearance
  theme: 'light', // 'light', 'dark', 'auto'
  primaryColor: '#0066FF',
  position: 'right', // 'right', 'left'

  // Behavior
  autoOpen: false,
  autoOpenDelay: 5000, // milliseconds
  showOnMobile: true,
  soundEnabled: true,

  // Custom text
  welcomeMessage: 'Hi! How can we help you today?',
  inputPlaceholder: 'Type your message...',

  // User information (pre-fill)
  user: {
    name: 'John Doe',
    email: '[email protected]',
    phone: '+1234567890',
    customFields: {
      company: 'Acme Corp',
      plan: 'Business'
    }
  }
});

Advanced Features

Dynamic User Information

Pass user information from your system:

// After user logs in
c24p('identify', {
  userId: '12345',
  name: 'Jane Smith',
  email: '[email protected]',
  customFields: {
    subscriptionPlan: 'Premium',
    accountCreated: '2024-01-15'
  }
});

Triggering Widget Programmatically

Control the widget via JavaScript:

// Open the widget
c24p('open');

// Close the widget
c24p('close');

// Toggle widget
c24p('toggle');

// Show widget button
c24p('show');

// Hide widget button
c24p('hide');

// Send a message programmatically
c24p('sendMessage', 'Hello, I need help with...');

Event Listeners

React to widget events:

// Widget opened
c24p('on', 'open', function() {
  console.log('Chat widget opened');
  // Your custom code
});

// Widget closed
c24p('on', 'close', function() {
  console.log('Chat widget closed');
});

// New message received
c24p('on', 'message', function(message) {
  console.log('New message:', message);
});

// Conversation started
c24p('on', 'conversationStarted', function(conversationId) {
  console.log('Conversation ID:', conversationId);
});

Conditional Display

Show widget only on specific conditions:

// Show only for logged-in users
if (userIsLoggedIn) {
  c24p('init', { widgetId: 'YOUR_WIDGET_ID' });
}

// Hide on specific pages
if (window.location.pathname === '/checkout') {
  c24p('hide');
}

// Show after user scrolls
window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    c24p('show');
  }
});

Mobile Considerations

The widget is fully responsive and optimized for mobile devices:

• Automatic Fullscreen: Opens fullscreen on small screens
• Touch Optimized: Large touch targets for easy interaction
• Performance: Lightweight and fast loading
• Native Feel: Smooth animations and transitions

Mobile-Specific Options

c24p('init', {
  widgetId: 'YOUR_WIDGET_ID',
  mobile: {
    fullscreen: true, // Always open fullscreen on mobile
    minimized: false, // Start minimized on mobile
    hideButton: false // Hide widget button on mobile
  }
});

Performance Optimization

The widget is designed for optimal performance:

• Async Loading: Non-blocking script load
• Lazy Initialization: Loads resources on first interaction
• CDN Delivery: Fast global content delivery
• Small Footprint: ~45KB gzipped
• No Dependencies: No jQuery or other libraries required

Best Practices

✅ Do:

• Place code at end of <body> for better page load performance
• Use async attribute (included by default)
• Test on various devices and browsers
• Monitor console for any errors

❌ Don't:

• Load multiple instances on same page
• Modify widget code directly
• Block script loading with ad blockers during testing

Customization Examples

Example 1: E-commerce Store

c24p('init', {
  widgetId: 'YOUR_WIDGET_ID',
  welcomeMessage: 'Welcome! Need help finding the perfect product?',
  primaryColor: '#FF6B6B',
  autoOpen: true,
  autoOpenDelay: 10000, // Open after 10 seconds
  user: {
    customFields: {
      cartValue: '$125.00',
      itemsInCart: 3
    }
  }
});

Example 2: SaaS Application

c24p('init', {
  widgetId: 'YOUR_WIDGET_ID',
  theme: 'dark',
  primaryColor: '#7C3AED',
  position: 'right',
  user: {
    userId: currentUser.id,
    name: currentUser.name,
    email: currentUser.email,
    customFields: {
      plan: currentUser.subscription,
      daysActive: currentUser.daysActive
    }
  }
});

Example 3: Support Portal

c24p('init', {
  widgetId: 'YOUR_WIDGET_ID',
  welcomeMessage: 'Hi! Having trouble? We\'re here to help!',
  autoOpen: false, // Don't auto-open
  soundEnabled: true,
  showOnMobile: true
});

// Auto-open if URL contains error parameter
if (window.location.search.includes('error=')) {
  c24p('open');
}

Troubleshooting

Widget Not Appearing

1. Check Widget ID: Ensure it's correct and properly formatted
2. Browser Console: Open DevTools and check for JavaScript errors
3. Script Location: Verify code is before </body> tag
4. Ad Blockers: Temporarily disable ad blockers
5. HTTPS: Ensure your site uses HTTPS

Widget Appears But Doesn't Work

1. Network Tab: Check if widget.js loads successfully
2. CORS Issues: Verify your domain is whitelisted in dashboard
3. Content Security Policy: Add Chat24Plus domains to CSP if applicable
4. Browser Compatibility: Test in different browsers

Multiple Widgets Appearing

• Ensure you haven't added the code multiple times
• Check if theme/plugins are injecting duplicate code
• Use browser DevTools to identify duplicate scripts

Widget Styling Issues

1. CSS Conflicts: Check for conflicting styles in your stylesheet
2. Z-index Issues: Widget uses z-index: 999999
3. Position Conflicts: Ensure no fixed elements overlap
4. Custom CSS: Contact support for custom styling needs

Security Considerations

• Widget uses HTTPS encryption for all communications
• User data is transmitted securely
• Widget validates origin domain
• XSS protection built-in
• Regular security audits performed

Next Steps

• Connect Integrations - Add WhatsApp, Telegram, etc.
• Configure Live Chat - Set up human agent features
• Customize Appearance - Advanced styling options

---

Need help with installation? Contact our support team or check the FAQ.