Cara Memasang Chat WhatsApp Melayang di Blogspot

Menambahkan kode HTML

Tambahkan kode HTML di atas tag </body> di dalam template.

<div class="chat_widget">
        <button aria-label="Open WhatsApp Chat" class="chat_widget__toggle_button" data-item="1" type="button">
            <svg aria-hidden="true" fill="currentColor" viewbox="0 0 24 24">
                <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"></path>
            </svg>
            <svg aria-hidden="true" fill="currentColor" viewbox="0 0 24 24">
                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
            </svg>
        </button>

        <div class="chat_widget__popup">
            <div class="chat_widget__header">
                <div class="chat_widget__avatar">
                    <img alt="Admin" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqx-7uepnISXm0TJEQeBB3yExOOepQfzCgJkD-2AGCa-Lx1d0BhidUPJ1CXor9tsoi_GuTcEYCaQ46j8d9Ir-jRfesVU_AvONOPCPXQZsW5sQ7J3Gpca_UmbUA6gADXVxwDTxk-MGJ0kWwfuU4337TNAYbceap0f1tfhRZTXEimRpkM9Y/w100-h100-p-k-no-nu/IMG_20241222_115536_081.webp" width="40"/>
                </div>
                <div class="chat_widget__user-info">
                    <div class="chat_widget__user_name">Admin
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
                            <rect width="24" height="24" fill="none"/>
                            <path fill="#025cfb" d="m10.95 13.43l-1.796-1.79q-.14-.14-.341-.15q-.202-.01-.367.156q-.16.16-.16.354t.16.354l1.938 1.938q.243.242.566.242t.566-.242l4.038-4.038q.146-.146.153-.344q.007-.199-.153-.364q-.165-.165-.357-.168t-.356.162zm-2.28 7.186l-1.316-2.2l-2.481-.524q-.298-.055-.475-.32q-.177-.264-.146-.562l.237-2.556l-1.683-1.92q-.212-.217-.212-.534t.212-.534l1.683-1.92l-.237-2.555q-.03-.299.146-.563q.177-.264.475-.32l2.48-.523l1.316-2.2q.162-.268.435-.37q.273-.103.565.027L12 4.027l2.33-.985q.293-.13.566-.027q.273.102.435.37l1.315 2.2l2.481.523q.298.056.475.32t.146.563l-.236 2.555l1.682 1.92q.212.217.212.534t-.212.535l-1.682 1.919l.236 2.555q.03.299-.146.563q-.177.265-.475.32l-2.48.524l-1.316 2.2q-.162.267-.435.37t-.565-.028L12 19.973l-2.33.985q-.293.13-.566.027q-.273-.102-.435-.37"/>
                        </path></rect></svg>
                    </div>
                    <div class="chat_widget__user_role">Customer Service</div>
                </div>
            </div>

            <div class="chat_widget__body">
                <div class="chat_widget__message">Halo, Ada yang bisa kami bantu?</div>
            </div>

            <div class="chat_widget__footer">
                <div class="chat_widget__input-container">
                    <input aria-label="Ketik pesan" class="chat_widget__input" placeholder="Ketik pesan" autocomplete="off" type="text"/>
                </div>
                <button aria-label="Send message" class="chat_widget__send_button disabled" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
                        <rect width="24" height="24" fill="none"/>
                        <path fill="#fff" d="m21.426 11.095l-17-8A1 1 0 0 0 3.03 4.242l1.212 4.849L12 12l-7.758 2.909l-1.212 4.849a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81"/>
                    </path></rect></svg>
                </button>
            </div>
        </div>
    </div>

Menambahkan kode CSS

Tambahkan kode CSS di atas tag </body> di dalam template.

<style>*, *::before, *::after{box-sizing: border-box}.chat_widget{position: fixed;right: 25px;bottom: 60px;z-index: 10000}.chat_widget__toggle_button{display: inline-flex;align-items: center;justify-content: center;background-color: #075e54;box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);border: none;border-radius: 50%;outline: none;color: #fff;width: 40px;height: 40px;padding: 6px}.chat_widget__toggle_button[data-item]:not([data-item^="0"]):before{content: attr(data-item);display: flex;align-items: center;justify-content: center;position: absolute;top: -4px;right: -4px;background-color: #d32f2f;border: 2px solid;border-color: #fff;border-radius: 100px;font-size: 8px;font-weight: 700;color: #fff;height: 20px;min-width: 20px;line-height: 1;padding: 0 2px}.chat_widget__toggle_button svg:last-child{display: none}.chat_widget.active .chat_widget__toggle_button svg:first-child{display: none}.chat_widget.active .chat_widget__toggle_button svg:last-child{display: block}.chat_widget__popup{background-image: url("https://res.cloudinary.com/do0pieaii/image/upload/v1762051767/20251101_183315_wd7ozt.png");background-size: cover;box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);border-radius: 5px;color: #1c1b1d;min-width: 320px;overflow: hidden;opacity: 0;visibility: hidden;transform: scale(.8) translateZ(0);transform-origin: bottom right;transition: opacity .03s linear, visibility .25s cubic-bezier(0,0,.2,1), transform .12s cubic-bezier(0,0,.2,1);position: absolute;right: 0;bottom: 50px}.chat_widget.active .chat_widget__popup{opacity: 1;visibility: visible;transform: scale(1) translateZ(0)}.chat_widget__header{display: flex;align-items: center;gap: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);padding: 10px}.chat_widget__avatar{flex: none;line-height: 0}.chat_widget__avatar img{aspect-ratio: 1 / 1;object-fit: cover;border-radius: 50%}.chat_widget__user_name{display: flex;align-items: center;gap: 6px;font-size: 16px;font-weight: 700}.chat_widget__user_name svg{width: 14px;height: 14px;fill: #025cfb}.chat_widget__user_role{font-size: 14px}.chat_widget__body{display: flex;flex-direction: column;gap: 16px;height: 300px;padding: 12px;overflow: auto}.chat_widget__message{display: inline-flex;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);border-radius: 4px 16px 16px 16px;font-size: 16px;width: 80%;max-width: fit-content;padding: 12px 16px}.chat_widget__message.chat_widget__message_user{place-self: flex-end;background-color: #DCF8C6;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);border-radius: 16px 4px 16px 16px;color: #000}.chat_widget__footer{display: flex;align-items: center;gap: 8px;padding: 8px;background-color: transparen}.chat_widget__input-container{flex: 1;background-color: #fff;border-radius: 50px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);padding: 0 16px}.chat_widget__input{background-color: transparent;border: none;outline: none;font-size: 16px;color: #1c1b1d;width: 100%;height: 40px}.chat_widget__send_button{display: inline-flex;align-items: center;justify-content: center;background-color: #25D366;border: none;border-radius: 50%;outline: none;color: #fff;width: 40px;height: 40px;padding: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}.chat_widget__send_button.disabled{background-color: #d9d9d9;color: #6e6e73;pointer-events: none}@media screen and (max-width: 640px){.chat_widget{right: 25px;bottom: 60px}}</style>

Menambahkan kode JavaScript

Tambahkan kode JavaScript di atas tag </body> di dalam template.

<script>
//<![CDATA[
function chatWidget() {
            // Konfigurasi dasar
            const whatsappNumber = '628123456789';
            const redirectNotice = 'Pesan Anda sedang diteruskan ke WhatsApp. Mohon tunggu sebentar.';

            // Element references
            const chatWidgetButton = document.querySelector('.chat_widget__toggle_button');
            const chatWidgetContainer = document.querySelector('.chat_widget');
            const inputField = document.querySelector('.chat_widget__input');
            const sendButton = document.querySelector('.chat_widget__send_button');
            const chatBody = document.querySelector('.chat_widget__body');

            // Toggle chat widget visibility
            if (chatWidgetButton && chatWidgetContainer) {
                chatWidgetButton.addEventListener('click', function() {
                    chatWidgetContainer.classList.toggle('active');
                    chatWidgetButton.setAttribute('data-item', '0');
                });
            }

            // Handle input field changes - enable/disable send button
            if (inputField && sendButton) {
                inputField.addEventListener('input', function() {
                    if (inputField.value.trim() !== '') {
                        sendButton.classList.remove('disabled');
                    } else {
                        sendButton.classList.add('disabled');
                    }
                });
            }

            // Handle send button click
            if (sendButton && inputField && chatBody) {
                sendButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    
                    const messageText = inputField.value.trim();
                    
                    // Validate input
                    if (!messageText || sendButton.classList.contains('disabled')) {
                        return;
                    }

                    // Create and append user message
                    const userMessage = document.createElement('div');
                    userMessage.className = 'chat_widget__message chat_widget__message_user';
                    userMessage.textContent = messageText;
                    chatBody.appendChild(userMessage);

                    // Create and append bot response
                    const botMessage = document.createElement('div');
                    botMessage.className = 'chat_widget__message';
                    botMessage.textContent = redirectNotice;
                    chatBody.appendChild(botMessage);

                    // Clear input and disable send button
                    inputField.value = '';
                    sendButton.classList.add('disabled');
                    
                    // Scroll to bottom of chat
                    chatBody.scrollTop = chatBody.scrollHeight;

                    // Redirect to WhatsApp after 1 seconds
                    setTimeout(() => {
                        const encodedMessage = encodeURIComponent(messageText);
                        const whatsappURL = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;
                        window.location.href = whatsappURL;
                    }, 1000);
                });

                // Also handle form submission
                const form = inputField.closest('form');
                if (form) {
                    form.addEventListener('submit', function(event) {
                        event.preventDefault();
                        sendButton.click();
                    });
                }
            }
        }

        // Initialize chat widget when DOM is loaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', chatWidget);
        } else {
            chatWidget();
        }
//]]>
</script>

Terima kasih telah mengikuti tutorial Cara Mudah Memasang Chat WhatsApp Melayang di Blogspot. Semoga panduan ini membantu Anda dalam menambahkan fitur chat WhatsApp yang praktis dan menarik di blog Anda.

Jangan lupa untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan, saran, atau ingin berbagi pengalaman setelah mencoba tutorial ini.

Interactive Demo

Admin

Customer Service

Halo, Ada yang bisa kami bantu?