Energy Oasis Chat Widget Integration

Implementation Instructions

To add this chat widget to your Squarespace site:

Go to your Squarespace dashboard
Navigate to Settings → Advanced → Code Injection
Paste the code below into the Header field
Save your changes

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Create chat container
    const chatContainer = document.createElement('div');
    chatContainer.className = 'chat-container';
    chatContainer.innerHTML = `
        <button class="chat-btn" id="chatToggle">💬</button>
        <div class="chat-window" id="chatWindow">
            <div class="chat-header">
                Energy Oasis Assistant
                <button class="close-btn" id="closeChat">×</button>
            </div>
            <iframe class="chat-iframe" src="https://aiagent.gogreenhub.tech/webhook/ca23afc8-17fc-4022-ad4a-9d50493618bc/chat" frameborder="0"></iframe>
        </div>
    `;
    document.body.appendChild(chatContainer);
    
    // Toggle chat window
    const chatToggle = document.getElementById('chatToggle');
    const chatWindow = document.getElementById('chatWindow');
    const closeChat = document.getElementById('closeChat');
    
    chatToggle.addEventListener('click', function() {
        if (chatWindow.style.display === 'flex') {
            chatWindow.style.display = 'none';
        } else {
            chatWindow.style.display = 'flex';
        }
    });
    
    closeChat.addEventListener('click', function() {
        chatWindow.style.display = 'none';
    });
    
    // Add styles
    const style = document.createElement('style');
    style.textContent = `
        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 10000;
        }
        .chat-btn {
            background-color: #0b6e4f;
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        .chat-btn:hover {
            background-color: #094b35;
            transform: scale(1.05);
        }
        .chat-window {
            display: none;
            position: absolute;
            bottom: 70px;
            right: 0;
            width: 350px;
            height: 500px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.15);
            overflow: hidden;
            flex-direction: column;
        }
        .chat-header {
            background-color: #0b6e4f;
            color: white;
            padding: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-iframe {
            flex: 1;
            border: none;
        }
        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
        @media (max-width: 480px) {
            .chat-window {
                width: 300px;
                height: 400px;
            }
        }
    `;
    document.head.appendChild(style);
});
</script>
        

Note: The chat widget will appear on every page of your website after adding this code to Squarespace's Code Injection.

Test the Widget

Click the button in the bottom right corner to test the chat widget functionality.

The actual n8n chat will only work when embedded on your domain, but you can test the UI here.

Energy Oasis Assistant