JavaScript写一个客服弹出组件

马楼何
已于 2024-02-27 11:32:52 修改
阅读量514
点赞数 9
文章标签： javascript 前端 css
于 2024-01-05 11:03:49 首次发布
本文链接：https://blog.csdn.net/m0_61011225/article/details/135404714
版权
<!DOCTYPE html>

<html>

<meta charset="UTF-8">



<head>

    <style>

 #chat-widget{position:fixed;bottom:200px;left:20px;width:300px;height:400px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:9999;display:none}

#chat-widget .header{background-color:#ffffff;padding:10px;font-weight:bold}

#chat-widget .body{padding:10px;height:340px;overflow-y:auto;background-color:#EAEEF3;border:1px solid #ccc;border-bottom:none}

#chat-widget .footer{background-color:#ffffff;border:none;border:1px solid #ccc;border-top:none}

#chat-widget .close-button{float:right;cursor:pointer}

.qkwi{border:none;background-color:#fff}

.qkwi_img{width:100px;height:100px;border-radius:50px}

.qkwi_img_top{width:50px;height:50px;border-radius:50px}

.nicoles{position:absolute;top:25px;left:71px}

.message p{background-color:#ffffff;border-radius:20px;font-size:16px;line-height:20px;max-width:100%;padding:15px 17px}

#message-input{color:rgb(150,155,166);font-size:16px;height:50px;line-height:20px;padding:0 20px;border:none;outline:none}

.sr-span{position:relative;top:5px}

.user{text-align:right;margin-bottom:10px}

.assistant{text-align:left;margin-bottom:10px}

#options-container{display:flex;flex-wrap:wrap;justify-content:space-between}

.option-button{flex-basis:30%;margin-bottom:10px}

</style>

</head>

<body>

    <button class="qkwi" onclick="toggleChatWidget()">

        <img src="./1kGx6CIr3Cu_qKwi.jpeg" class="qkwi_img" alt="">

    </button>



    <div id="chat-widget">

        <div class="header">

            <img src="./1kGx6CIr3Cu_qKwi.jpeg" alt="" class="qkwi_img_top"><span class="nicoles">Nicole</span>

            <span class="close-button" onclick="toggleChatWidget()">&times;</span>

        </div>

        <div class="body" id="chat-body">



        </div>

        <div class="footer">

            <input type="text" id="message-input" placeholder="输入消息">

            <span class="sr-span">

                <svg t="1704353119062" onclick="sendMessage()" class="icon" viewBox="0 0 1024 1024" version="1.1"

                    xmlns="http://www.w3.org/2000/svg" p-id="1463" width="20" height="20">

                    <path

                        d="M998.976 554.3232C1031.232 539.6032 1031.328 515.7952 998.976 501.0432L122.88 101.3312C90.624 86.6112 64.448 103.5072 64.384 138.4832L64 426.9952 773.568 527.6672 64 628.3392 64.384 916.8832C64.448 952.1152 90.528 968.7872 122.88 954.0352L998.976 554.3232Z"

                        p-id="1464" fill="#d7d7d7"></path>

                </svg>

            </span>

        </div>

    </div>



    <script>

        window.onload = function () {

            sendInitialMessage();

        };



        function toggleChatWidget() {

            var chatWidget = document.getElementById("chat-widget");

            if (chatWidget.style.display === "none") {

                chatWidget.style.display = "block";

            } else {

                chatWidget.style.display = "none";

            }

        }

        function sendInitialMessage() {

            var initialMessage = "<p> Hello, I am Nicole, I am very glad to talk with you! </p><br><p> Please leave your email address. I can send you an email containing more information about our products as soon as possible.</p>";

            displayMessage("assistant", initialMessage);

            var options = [

                "AC Motor",

                "DC Motor",

                "Servo Motor",

                "Stepper Motor",

                "Linear Actuator",

                "Gear Motor",

                "Spindle Motor",

                "Hub Motor",

                "CNC Router"

            ];



            var optionsMessage = "<div id='options-container'>";

            for (var i = 0; i < options.length; i++) {

                optionsMessage += "<button class='option-button' onclick='selectOption(" + i + ")'>" + options[i] + "</button>";

            }

            optionsMessage += "</div>";



            displayMessage("assistant", optionsMessage);

        }



        function selectOption(optionIndex) {

            var options = [

                "AC Motor",

                "DC Motor",

                "Servo Motor",

                "Stepper Motor",

                "Linear Actuator",

                "Gear Motor",

                "Spindle Motor",

                "Hub Motor",

                "CNC Router"

            ];



            var selectedOption = options[optionIndex];

            displayMessage("user", selectedOption);



            var reply = "Please enter specific parameters for the " + selectedOption + ":";

            displayMessage("assistant", reply);



            var inputElement = document.createElement("input");

            inputElement.setAttribute("type", "text");

            inputElement.setAttribute("id", "parameter-input");

            inputElement.setAttribute("placeholder", "Output Power:");

            displayMessage("assistant", inputElement.outerHTML);



            var inputElement = document.createElement("input");

            inputElement.setAttribute("type", "text");

            inputElement.setAttribute("id", "parameter-input");

            inputElement.setAttribute("placeholder", "Voltage:");

            displayMessage("assistant", inputElement.outerHTML);

        }

       

        function sendParameters() {

            var parameterInput = document.getElementById("parameter-input");

            var parameters = parameterInput.value;

            displayMessage("user", parameters);



            var reply = "Thank you for providing the parameters. We will process your request.";

            displayMessage("assistant", reply);



            parameterInput.value = "";

        }



        function sendMessage() {

            var messageInput = document.getElementById("message-input");

            var message = messageInput.value;

            displayMessage("user", message);

            var reply = getReply(message);



            displayMessage("assistant", reply);



            messageInput.value = "";

        }



        function displayMessage(sender, message) {

            var chatBody = document.getElementById("chat-body");

            var messageElement = document.createElement("div");

            messageElement.classList.add("message");

            messageElement.classList.add(sender);

            var senderText = sender === "user" ? "You" : "Nicole";

            messageElement.innerHTML = "<strong>" + senderText + ":</strong> " + message;

            chatBody.appendChild(messageElement);

        }

        function getReply(message) {

            return "Thank you for your message. We will get back to you as soon as possible!";

        }

    </script>

</body>



</html>