import React, {FunctionComponent, useEffect} from 'react';
import {CustomerlyProvider, useCustomerly} from 'react-live-chat-customerly';

const PROJECT_ID = 'YOUR_CUSTOMERLY_PROJECT_ID';

const App: FunctionComponent = () => (
    <CustomerlyProvider appId={PROJECT_ID}>
        <HomePage/>
    </CustomerlyProvider>
);

const HomePage: FunctionComponent = () => {
    const {load, open} = useCustomerly();

    // Automatically load the chat when the component mounts
    useEffect(() => {
        load();
    }, []);

    // Button to open the chat interface
    const handleOpenChat = () => {
        open();
    };

    return (
        <button onClick={handleOpenChat}>
            Open Chat
        </button>
    );
};

export default App;

import React, {FunctionComponent, useEffect} from 'react';
import {CustomerlyProvider, useCustomerly} from 'react-live-chat-customerly';

const PROJECT_ID = 'YOUR_CUSTOMERLY_PROJECT_ID';

const App: FunctionComponent = () => (
    <CustomerlyProvider appId={PROJECT_ID}>
        <UserChatComponent/>
    </CustomerlyProvider>
);

const UserChatComponent: FunctionComponent = () => {
    const {load} = useCustomerly();

    // Effect to load the chat with user details when the component mounts
    useEffect(() => {
        load({
            user_id: "123456", // Unique identifier for the user
            name: "John Doe",  // User's full name
            email: "john.doe@example.com", // User's email address
            attributes: { // Custom attributes for the user
                signup_date: 1384902000,  // Example attribute: user's signup date (Add dates as Unix timestamp)
                plan_level: "premium",    // Example attribute: user's subscription plan
                age: 30                   // Example attribute: user's age
            }
        });
    }, []);

    return (
        <div>
            <h1>Welcome to Customerly Live Chat!</h1>
            <p>Your chat is ready. Click the chat icon to start interacting with us.</p>
        </div>
    );
};

export default App;

import React, {FunctionComponent, useEffect} from 'react';
import {CustomerlyProvider, useCustomerly} from 'react-live-chat-customerly';

const PROJECT_ID = 'YOUR_CUSTOMERLY_PROJECT_ID';

const App: FunctionComponent = () => (
    <CustomerlyProvider appId={PROJECT_ID}>
        <ChatComponent/>
    </CustomerlyProvider>
);

const ChatComponent: FunctionComponent = () => {
    const {load} = useCustomerly();

    // Load function with user and company details
    useEffect(() => {
        load({
            user_id: "USER_ID",  // Optionally pass user ID if available
            email: "USER_EMAIL", // Replace with actual user email
            name: "USER NAME",   // Replace with actual user name
            company: {
                company_id: "COMPANY_ID",
                name: "ACME",
                address: "Ground Floor, 71 Lower Baggot Street",
                city: "Dublin",
                employees: 10,
                admin_url: "https://www.company.com/admin/companyID",
                sub_name: "Pro",
                sub_period: "Yearly",
                sub_state: "Active",
                sub_amount: 1188,
                last_payment_amount: 1188,
                total_revenues: 5940,
                domain: "company.com"
            }
        });
    }, []);

    return (
        <div>
            <h1>Welcome to Our Chat!</h1>
            <p>This setup pre-loads the chat with user and company information.</p>
        </div>
    );
};

export default App;

import React, {FunctionComponent, useEffect, useContext} from 'react';
import {useCustomerly} from 'react-live-chat-customerly';
import {useLocation} from 'react-router-dom';

const UserProfilePage: FunctionComponent = () => {
    const {update} = useCustomerly();
    const location = useLocation();

    const userDetails = {
        email: 'john.doe@example.com',
        name: 'John Doe',
        attributes: {
            membershipLevel: 'Gold',
        }
    };

    useEffect(() => {
        // Triggering the update function to refresh chat settings and surveys
        update();
    }, [location.pathname]); // Dependency on location.pathname to re-run on route changes

    useEffect(() => {
        update({
            email: userDetails.email,
            name: userDetails.name,
            attributes: userDetails.attributes
        });
    }, [userDetails]); // Dependency on userDetails to re-run on user data changes

    return (
        <div>
            <h1>User Profile</h1>
            <p>Welcome, {userDetails.name}! Your membership level is {userDetails.customAttributes.membershipLevel}.</p>
        </div>
    );
};

export default UserProfilePage;

import React, {FunctionComponent, useEffect} from 'react';
import {CustomerlyProvider, useCustomerly} from 'react-live-chat-customerly';

const PROJECT_ID = 'YOUR_CUSTOMERLY_PROJECT_ID';

const App: FunctionComponent = () => (
    <CustomerlyProvider appId={PROJECT_ID}>
        <LeadGenChatComponent/>
    </CustomerlyProvider>
);

const LeadGenChatComponent: FunctionComponent = () => {
    const {registerCallback, load} = useCustomerly();

    useEffect(() => {
        load();

        // Define the callback function for a new lead generation
        const onLeadGenerated = (email: string) => {
            // Here you can add the logic to handle the new lead, such as
            // sending the data to your analytics tool
        };

        // Register the callback
        registerCallback({
            type: 'onLeadGenerated',
            function: onLeadGenerated
        });
    }, []);

    // Render UI here
    return <div>Chat with us and become a lead!</div>;
};

export default App;

import React, {FunctionComponent} from 'react';
import {CustomerlyProvider, useCustomerly} from 'react-live-chat-customerly';

const PROJECT_ID = 'YOUR_CUSTOMERLY_PROJECT_ID';

const TestChatFunctionsPage: FunctionComponent = () => {
    const {
        load,
        update,
        open,
        close,
        show,
        hide,
        event,
        attribute,
        logout,
        showNewMessage,
        sendNewMessage,
        registerCallback
    } = useCustomerly();

    useEffect(() => {
        load({
            user_id: "test_user_id",
            email: "test@example.com",
            name: "Test User",
            attributes: {
                role: "tester"
            },
            company: {
                company_id: "test_company_id",
                name: "Test Company"
            }
        });

        // Define the callback function for a new conversation started
        const onNewConversation = (message: string) => {
            console.log('New conversation started:', message);
        };

        // Register the callback
        registerCallback({
            type: 'onNewConversation',
            function: onNewConversation
        });
    }, []);


    const testUpdate = () => {
        update({
            user_id: "test_user_id",
            email: "test@example.com",
            name: "Test User Updated",
            attributes: {
                role: "tester",
                plan: "Enterprise",
            },
            company: {
                company_id: "test_company_id",
                name: "Test Company"
            }
        });
    };


    return (
        <div>
            <h1>Test Customerly Live Chat Functions</h1>
            <button onClick={open}>Open Chat</button>
            <button onClick={close}>Close Chat</button>
            <button onClick={show}>Show Chat</button>
            <button onClick={hide}>Hide Chat</button>
            <button onClick={() => event("test_event")}>Fire Event</button>
            <button onClick={() => attribute("test_key", "test_value")}>Update Attribute</button>
            <button onClick={logout}>Logout User</button>
            <button onClick={() => showNewMessage("Hello, I'm interested in upgrading.")}>Show New Message</button>
            <button onClick={() => sendNewMessage("Hello, I'm interested in upgrading.")}>Send New Message</button>
            <button onClick={testUpdate}>Test Update</button>
        </div>
    );
};

const App: FunctionComponent = () => (
    <CustomerlyProvider appId={PROJECT_ID}>
        <TestChatFunctionsPage/>
    </CustomerlyProvider>
);

export default App;