General Installation Guide

Step 1: Locate Your Website's HTML Files

Find the HTML file(s) you want to add the chat widget to. Common files include:

• index.html or index.php - Main homepage
• footer.html or footer.php - Footer template (if using templates)
• _layout.html or similar - Layout template file

Tip: If your website uses templates, add the code to the footer template so it appears on all pages automatically.

Step 2: Find the Closing </body> Tag

Open the HTML file in a text editor and scroll to the bottom. Look for the </body> tag - this is usually near the very end of the file.

The code should be placed just before the </body> tag.

Step 3: Copy and Paste the Code

Copy the code below and paste it just before the </body> tag in your HTML file:

<!-- LiveChat Chat Widget - Place before closing </body> tag -->
<!-- This code will load after page content is fully loaded for better performance -->
<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
                // Replace YOUR_COMPANY_ID with your actual account ID
                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 4: Save and Test

Save your HTML file and upload it to your web server (if using FTP or file manager).

Visit your website in a browser and look for the chat button in the bottom-right corner. Click it to test if the chat window opens correctly.

Troubleshooting

Chat widget not appearing?

• Check that the code is placed before the </body> tag
• Verify your Account ID is correct in the code
• Check browser console (F12) for JavaScript errors
• Ensure the LiveChat server domain is accessible
• Try clearing your browser cache

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