WordPress LiveChat Installation Guide

WordPress Installation Methods

There are several ways to add the LiveChat widget to your WordPress site. We recommend Method 1 (Theme Footer) for the best performance and site-wide coverage.

📋 Before You Begin:

Log in to your LiveChat Dashboard and get your Account ID
Make sure you have admin access to your WordPress site
We recommend backing up your site before making changes
Replace YOUR_COMPANY_ID with your actual Account ID
Official Domain: Use https://poplivechat.com for production deployment

Method 1: Add to Theme Footer (Recommended)

This method adds the chat widget to all pages of your WordPress site by editing the theme's footer file.

Step 1: Access WordPress Admin Dashboard

Step 2: Navigate to Theme Editor

Go to Appearance → Theme File Editor in your WordPress admin sidebar.

Note: If you don't see "Theme File Editor", you may need to enable file editing in your wp-config.php file by adding: define('DISALLOW_FILE_EDIT', false);

Step 3: Edit footer.php File

In the Theme File Editor, select footer.php from the list of theme files on the right side.

Find the closing </body> tag (usually at the very end of the file).

Step 4: Add LiveChat Code

Paste the following code just before the </body> tag:

<!-- LiveChat Chat Widget - WordPress Integration -->
<script>
    // Defer loading of LiveChat widget until page is fully loaded
    (function() {
        function loadLiveChatWidget() {
            // Load CSS dynamically
            var cssLink = document.createElement('link');
            cssLink.rel = 'stylesheet';
            cssLink.href = 'https://poplivechat.com/css/chat-widget.css';
            cssLink.media = 'all';
            document.head.appendChild(cssLink);
            
            // Load JS dynamically
            var jsScript = document.createElement('script');
            jsScript.src = 'https://poplivechat.com/js/chat-widget.js';
            jsScript.async = true;
            jsScript.onload = function() {
                // Initialize chat widget after script loads
                window.LiveChatWidget.init({
                    companyId: 'YOUR_COMPANY_ID',
                    buttonText: '💬 Chat Now',
                    buttonPosition: 'bottom-right',
                    primaryColor: '#667eea'
                });
            };
            document.body.appendChild(jsScript);
        }
        
        // Wait for full page load before loading chat widget
        if (window.addEventListener) {
            window.addEventListener('load', loadLiveChatWidget, false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', loadLiveChatWidget);
        } else {
            window.onload = loadLiveChatWidget;
        }
    })();
</script>

⚠️ Important: Replace YOUR_COMPANY_ID with your actual Account ID (e.g., XU22). The official domain is poplivechat.com.

Step 5: Save and Update

Click the Update File button at the bottom of the editor.

Visit your website to verify the chat widget appears in the bottom-right corner.

💡 Advantages of This Method:

✅ Appears on all pages automatically
✅ Loads after page content (better performance)
✅ No additional plugins required
✅ Works with all WordPress themes

⚠️ Important Note:

If you update your WordPress theme, the code you added to footer.php will be lost. To prevent this, consider using a Child Theme or Method 2 (Plugin) below.

Method 2: Using a Plugin (Insert Headers and Footers)

This method uses a WordPress plugin to add the code, which is safer and won't be lost during theme updates.

Step 1: Install Plugin

Go to Plugins → Add New in your WordPress admin.

Search for "Insert Headers and Footers" by WPBeginner and click Install Now, then Activate.

Alternative plugins: "Code Snippets", "WPCode", or any custom code injection plugin.

Step 2: Add Code to Footer

Go to Settings → Insert Headers and Footers (or your plugin's settings page).

Paste the LiveChat code (from Method 1, Step 4) into the "Scripts in Footer" section.

Click Save.

💡 Advantages of This Method:

✅ Code persists through theme updates
✅ Easy to enable/disable
✅ No need to edit theme files
✅ Safe and user-friendly

Method 3: Using Page Builders (Elementor, Gutenberg, etc.)

If you use a page builder, you can add the chat widget using HTML/Custom Code blocks.

For Elementor:

Edit any page with Elementor
Drag an "HTML" widget to your page
Paste the LiveChat code (from Method 1, Step 4) into the HTML widget
Set the widget position to "After Footer" or use Elementor's "Theme Builder" to add it site-wide
Save and publish

For Gutenberg Block Editor:

Edit any page or post
Add a "Custom HTML" block
Paste the LiveChat code into the block
For site-wide display, use a plugin like "Header Footer Code Manager" or add to footer.php
Save and publish

For Other Page Builders:

Most page builders (Beaver Builder, Divi, etc.) have an HTML/Custom Code widget. Add the LiveChat code there.

For site-wide display, use the builder's Theme Builder or Header/Footer feature.

Method 4: Using WordPress Functions.php (Advanced)

For developers who want to add the code programmatically via PHP.

Step 1: Edit functions.php

Go to Appearance → Theme File Editor and select functions.php.

Step 2: Add PHP Hook

Add the following code at the end of functions.php:

<?php
// Add LiveChat widget to WordPress footer
function add_livechat_widget() {
    ?>
    <!-- LiveChat Chat Widget -->
    <script>
        (function() {
            function loadLiveChatWidget() {
                var cssLink = document.createElement('link');
                cssLink.rel = 'stylesheet';
                cssLink.href = 'https://poplivechat.com/css/chat-widget.css';
                cssLink.media = 'all';
                document.head.appendChild(cssLink);
                
                var jsScript = document.createElement('script');
                jsScript.src = 'https://poplivechat.com/js/chat-widget.js';
                jsScript.async = true;
                jsScript.onload = function() {
                    window.LiveChatWidget.init({
                        companyId: 'YOUR_COMPANY_ID',
                        buttonText: '💬 Chat Now',
                        buttonPosition: 'bottom-right',
                        primaryColor: '#667eea'
                    });
                };
                document.body.appendChild(jsScript);
            }
            
            if (window.addEventListener) {
                window.addEventListener('load', loadLiveChatWidget, false);
            } else if (window.attachEvent) {
                window.attachEvent('onload', loadLiveChatWidget);
            } else {
                window.onload = loadLiveChatWidget;
            }
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_livechat_widget');
?>

⚠️ Replace: YOUR_COMPANY_ID with your actual Account ID. Official domain is poplivechat.com.

💡 Advantages of This Method:

✅ Clean PHP implementation
✅ Uses WordPress hooks
✅ Easy to add conditional logic
✅ Good for child themes

Verification & Testing

How to Verify Installation

Visit your WordPress website in a browser
Look for the chat button in the bottom-right corner (or bottom-left if configured)
Click the button to open the chat window
Test sending a message to ensure it works correctly
Check different pages to ensure the widget appears site-wide

Troubleshooting

Chat widget not appearing?

Check browser console (F12) for JavaScript errors
Verify your Account ID is correct
Ensure the LiveChat server domain is accessible
Check if your theme's footer is loading properly
Try clearing WordPress and browser cache
Disable other plugins temporarily to check for conflicts

Widget appears but won't connect?

Verify WebSocket server (port 8282) is running
Check firewall settings allow WebSocket connections
If using Cloudflare, ensure WebSocket support is enabled
Check browser console for connection errors

Customization Options

Customize Chat Button

You can customize the chat widget appearance by modifying the initialization parameters:

window.LiveChatWidget.init({
    companyId: 'YOUR_COMPANY_ID',        // Required: Your account ID
    buttonText: '💬 Chat Now',           // Button text
    buttonPosition: 'bottom-right',       // Position: 'bottom-right' or 'bottom-left'
    primaryColor: '#667eea',              // Theme color (hex code)
    wsHost: '127.0.0.1',                  // WebSocket host (default: 127.0.0.1)
    wsPort: 8282                          // WebSocket port (default: 8282)
});

✅ Best Practices:

Use HTTPS for your LiveChat server domain (required for secure connections)
Test the widget on mobile devices to ensure responsive design works
Consider adding the widget only on specific pages using conditional logic
Monitor chat performance and adjust as needed
Keep your WordPress site and plugins updated for security

📝 Important Notes:

Always replace YOUR_COMPANY_ID with your actual Account ID from the dashboard
Official domain: poplivechat.com - Use this domain for production deployment
If you update your WordPress theme, code added directly to theme files may be lost
We recommend using Method 2 (Plugin) or Method 4 (functions.php with child theme) for persistence
For multisite WordPress installations, add the code to each site separately or use a network-wide plugin

Need Help?

If you encounter any issues during installation, please contact our support team:

📧 Email: contact@items7.com
📖 View General Installation Guide
🏠 Access Dashboard