General Installation Guide

This guide applies to all types of websites including HTML, PHP, static sites, and custom-built websites. Follow the steps below to add the LiveChat widget to your website.

📝 Platform-Specific Guides: WordPress | WooCommerce | Shopify | All Guides
📋 Before You Begin:
  • Get Your Installation Code: Log in to your LiveChat Dashboard and go to "Installation Code" to get your personalized code with your Account ID
  • You need access to edit your website's HTML files
  • The chat widget will appear on all pages where you add this code
  • Note: The code shown in this guide is sample code. Use the code from your Dashboard for actual installation
  • Official Domain: Use https://www.poplivechat.com for production deployment

Step-by-Step Installation

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

📌 Sample Code Notice:

The code below is sample code for demonstration purposes. The YOUR_COMPANY_ID shown is a placeholder. To get your actual installation code with your Account ID, please log in to your LiveChat Dashboard and navigate to the "Installation Code" section.

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

<!-- PopLiveChat Widget -->
<script>
window.LiveChatWidgetConfig = { companyId: 'YOUR_COMPANY_ID' };
</script>
<link rel="stylesheet" href="https://www.poplivechat.com/css/chat-widget.css">
<script src="https://www.poplivechat.com/js/chat-widget.js"></script>
<!-- End PopLiveChat Widget -->

⚠️ Important: This is sample code. Replace YOUR_COMPANY_ID with your actual Account ID. Get your personalized installation code from your Dashboard → Installation Code page.

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.

✅ What You'll See:
  • A floating chat button appears in the bottom-right corner of your website
  • Visitors can click the button to open a chat window without leaving your site
  • The chat widget loads after page content, ensuring fast page load times
  • The widget appears on all pages where you added the code
💡 Tips for Success:
  • Make sure you paste the code before the </body> tag, not after it
  • If you have multiple HTML files, add the code to each file or use a template/footer file
  • Ensure your website supports HTTPS for secure connections
  • Clear your browser cache if you don't see the widget immediately
  • The code will automatically load after page content for better performance

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

Need Help?

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

📧 Email: contact@items7.com
🏠 Access Dashboard | All Installation Guides