WooCommerce Installation Guide

Method 1: Using a Plugin (Recommended)

This method is the safest and most persistent. The code will survive 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.

Step 2: Add Code to Footer

Go to Settings → Insert Headers and Footers. Paste the code below into the "Scripts in Footer" section:

<!-- LiveChat Chat Widget - WooCommerce 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.

Click Save to apply the changes.

Method 2: Using WordPress Functions.php

For developers who prefer adding code via PHP hooks. Go to Appearance → Theme File Editor and select functions.php.

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.

Note: If you update your theme, code added to functions.php will be lost. Use a Child Theme to prevent this.

Troubleshooting

Chat widget not appearing?

• Check that WooCommerce is active and functioning
• Verify the code is placed correctly in the plugin or functions.php
• Clear WordPress and browser cache
• Check browser console (F12) for JavaScript errors
• Disable other plugins temporarily to check for conflicts

Widget not showing on checkout page?

• Some checkout page builders may require additional configuration
• Check if your theme or plugin is blocking the footer on checkout
• Try using WooCommerce-specific hooks if needed (advanced users)