LiveChat Installation & Setup Guide - Add Live Chat to Your Website

Step 1: Get Your Account ID

Log in to the dashboard management system and find your Account ID in the "Account Management" section.

Example: company_id=XU22 (Your Account ID is a string identifier)

Step 2: Add Code to Your Website

Add the following code before the </body> tag on each page of your website:

💡 Performance Optimization Tip: This code will load the chat component after the page content is fully loaded, ensuring it doesn't affect page load speed.

🌐 Official Domain: The official domain is poplivechat.com. Replace the domain in the code below with https://poplivechat.com when deploying to production.

<!-- 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>

Step 3: Customize Styles (Optional)

You can customize the chat button and window styles to match your website design. Modify the following parameters in the initialization code:

window.LiveChatWidget.init({
    companyId: 'YOUR_COMPANY_ID',        // Your account ID (required)
    buttonText: '💬 Chat Now',           // Button text
    buttonPosition: 'bottom-right',       // Button position: bottom-right, bottom-left
    primaryColor: '#667eea'               // Theme color
});

Step 4: Complete

Save the file and refresh the webpage. You should see the chat button in the bottom-right corner. Click it to test if the chat functionality works properly.

Step 1: Get Your Chat Link

Log in to the dashboard management system and find your exclusive chat link in the "Company Management" section.

Link format: https://poplivechat.com/chat/chat.php?company_id=YOUR_COMPANY_ID

🌐 Official Domain: The official domain is poplivechat.com. Use this domain for production deployment.

Step 2: Add to Your Website

You can add the link in the following ways:

• Navigation Menu: Add an "Online Support" or "Chat Now" menu item in your website's navigation bar, linking to the chat page
• Button/Banner: Add a button or banner in a prominent position on your webpage that redirects to the chat page when clicked
• Contact Page: Add the chat link to your "Contact Us" page

Example code:

<a href="https://poplivechat.com/chat/chat.php?company_id=YOUR_COMPANY_ID" 
   target="_blank" 
   class="chat-link">
    Chat Now
</a>

Step 3: Test the Link

Click the link to test and confirm that it opens the chat page correctly and allows communication with customer service.

How to Start Chatting

• Embedded Method: Click the chat button in the bottom-right corner of the website to open the chat window
• Link Method: Click links such as "Chat Now" or "Online Support" to open the chat page

Sending Messages

• Type your question or message in the input box
• Click the "Send" button or press Enter to send
• Support for sending images (click the 📷 icon to select and upload an image)
• Image size limit: Maximum 5MB
• Supported formats: JPG, PNG, GIF, WebP

Waiting for Staff Response

• After sending a message, please wait patiently for the staff member to reply
• When staff are online, they usually respond to your messages quickly
• If staff are temporarily offline, your messages will be saved and staff will see them when they come online

Logging into the Staff System

• Access the staff login page: https://poplivechat.com/chat/staff.php (Official domain: poplivechat.com)
• Log in using the username and password provided by the administrator
• After successful login, you will see the conversation list on the left

Viewing and Replying to Messages

• Conversation List: The left side displays all visitor conversations, with red numbers indicating unread messages
• Select Conversation: Click a conversation item on the left to view the visitor's chat history on the right
• Send Reply: Type your message in the input box at the bottom, then click "Send" or press Enter
• Visitor Information: On the right, you can see detailed visitor information, including IP address, region, browser, etc.

Using Quick Replies

• Click the 💬 button next to the input box to open the quick reply menu
• Select preset common phrases to quickly reply to visitors
• You can click "+ Add Quick Reply" to add company-specific common phrases
• Quick reply content supports up to 2000 characters

Sending Images

• Click the 📷 button next to the input box to select an image to send
• Images will be automatically uploaded and displayed in the chat
• Supports JPG, PNG, GIF, WebP formats, with a maximum size of 5MB

Multi-Staff Collaboration

• When multiple staff members are online simultaneously, conversations will be assigned to one staff member
• The conversation list on the left will show "Staff A is chatting" notifications
• Other staff can view the conversation history but cannot send messages
• If you need to take over a conversation, click the "Transfer to Me" button
• After transferring, the original staff member will no longer be able to send messages

Admin Login

• Access the admin dashboard: https://poplivechat.com/admin/ (Official domain: poplivechat.com)
• Log in using the admin account (default: admin / admin123)
• Note: Please change the password promptly after the first login

Company Management

• View Company List: On the "Company Management" page, view all registered companies
• Add Company: Click the "Add Company" button and fill in company information
• Edit Company: Click the "Edit" button to modify company information, account expiration date, etc.
• Quick Reply Management: Set preset quick reply phrases for each company
• Search and Pagination: Support searching by company name and pagination browsing

Staff Management

• View Staff List: On the "Staff Management" page, view all staff members for a specific company
• Add Staff: Add new staff accounts for the specified company
• Edit Staff: Modify staff name, password, and other information
• Delete Staff: Delete unnecessary staff accounts (use with caution)
• Search and Pagination: Support searching by username and pagination browsing

Order Management

• View Orders: On the "Order Management" page, view all purchase orders
• Order Status: View payment status, service period, and other order information
• Renewal Management: Extend the service period for company accounts
• Search and Pagination: Support searching by order number, company name, and pagination browsing

Free Trial Period

• 3 Months Completely Free: All new registered users automatically receive a 3-month free trial period
• Unlimited Usage: No visitor limits during the free period, all features available
• No Payment Required: No need to bind a payment method during the free period, completely free experience

After Free Trial Period

• Paid Plans Required: After the 3-month free trial ends, you must purchase a paid plan to continue using the service
• Plan Options: Choose from Basic ($29.99/month), Professional ($79.99/month), or Enterprise ($199.99/month) plans
• Billing Periods: Select monthly or annual billing (annual plans include discounts)
• Automatic Extension: Your account will be automatically extended upon successful payment

Payment Information

• Secure Payment: All payments are processed securely through PayPal
• Flexible Plans: Choose the plan that best fits your business needs
• Discounts Available: Annual plans and longer subscription periods include discounts
• Detailed Pricing: For specific pricing details, please visit the Purchase Page