LiveChat Integration Test

Test and demonstrate full-screen iframe integration for external websites

View Chat Page

Integration Features

Fullscreen Mode

Complete viewport integration for maximum screen space. Perfect for dashboard-style integrations.

Test Fullscreen Mode

Chat Frontend

Direct link to our full-featured LiveChat frontend interface. Complete chat experience.

View Chat Frontend

Corner Widget

Floating chat widget in the corner of the page. Always accessible to visitors.

Test Widget Mode

Quick Start Guide

Step 1 Include the Scripts

<!-- LiveChat Embed System -->
<script src="https://livechat.kopisugar.cc/assets/js/livechat-embed.js"></script>
<script src="https://livechat.kopisugar.cc/assets/js/livechat-helper.js"></script>
                    

Step 2 Initialize LiveChat

// Initialize with your API key
LiveChatHelper.init({
    apiKey: 'your_api_key_here',
    mode: 'fullscreen',  // 'fullscreen' | 'widget'
    baseUrl: 'https://livechat.kopisugar.cc'
});
                    

Step 3 Add to Navigation

<!-- Add to your navigation menu -->
<li class="nav-item">
    <a class="nav-link" href="#" onclick="openLiveChat(); return false;">
        <i class="bi bi-chat-dots"></i> Live Chat
    </a>
</li>

<script>
function openLiveChat() {
    if (currentUser.isLoggedIn) {
        LiveChatHelper.openChat({
            userId: currentUser.id,
            name: currentUser.name,
            email: currentUser.email
        });
    } else {
        LiveChatHelper.openAnonymousChat();
    }
}
</script>
                    

Test with Different Users

Current User:

Guest User

Browse anonymously