Widget Mode

Test the floating corner widget integration

How Widget Mode Works

Displays a floating chat widget in the corner of the page
Always visible and accessible to visitors
Minimalist design that doesn't interfere with your content
Expandable to show chat interface when clicked
Perfect for e-commerce and content websites
Fully responsive and mobile-friendly

Select a Test User

John Doe

[email protected]

@johndoe

Jane Smith

[email protected]

@janesmith

Bob Wilson

[email protected]

@bobwilson

Guest User

Test as anonymous visitor

Currently logged in as:

Widget Position

Choose where the chat widget should appear on your website

Bottom Right

Default position

Bottom Left

Alternative corner

Top Right

Header area

Top Left

Upper corner

Center Right

Middle edge

Center Left

Left edge

Bottom Center

Footer area

Current: Bottom Right

Test Widget Integration

The widget will appear in the selected position on your screen

Implementation Code

// Initialize in widget mode with position options
LiveChatHelper.init({
    apiKey: 'lc_98b277c9f9c4f2f5b9f0dcb46748ab1a3f6360c6b6490edc',
    mode: 'widget',
    baseUrl: 'https://livechat.kopisugar.cc',
    widgetConfig: {
        position: 'bottom-right',  // Position options:
        // 'bottom-right', 'bottom-left', 'top-right', 'top-left',
        // 'center-right', 'center-left', 'bottom-center'
        offset: {
            x: 20,  // Distance from edge (pixels)
            y: 20   // Distance from edge (pixels)
        }
    }
});

// Widget appears automatically at specified position
// Users can click to start chatting

// Change widget position dynamically
function changeWidgetPosition(position) {
    LiveChatHelper.setWidgetPosition(position);
}

// Optional: Programmatically open chat
function openLiveChat() {
    if (currentUser.isLoggedIn) {
        LiveChatHelper.openChat({
            userId: currentUser.id,
            name: currentUser.name,
            email: currentUser.email
        });
    } else {
        LiveChatHelper.openAnonymousChat();
    }
}
                    

Widget Mode Features

Always Visible

Persistent chat button in corner of screen

Non-Intrusive

Doesn't interfere with your website content

Easy Access

One-click to start chatting

Mobile Optimized

Perfect size and positioning for mobile

Perfect For

E-commerce Sites

Help customers with product questions and checkout

Content Websites

Engage readers without disrupting content flow

Service Businesses

Always available for customer inquiries