(function() {
                const widgetId = '68b623100c53e1ae836e6cfb';
                if (!widgetId) return;

                const iframe = document.createElement('iframe');
                iframe.src = 'https://heroos.hero.church/ConnectionButtonWidget?widget_id=68b623100c53e1ae836e6cfb';
                iframe.style.position = 'fixed';
                iframe.style.bottom = '20px';
                iframe.style.right = '20px';
                iframe.style.width = '400px';
                iframe.style.height = '80vh';
                iframe.style.maxWidth = '90vw';
                iframe.style.maxHeight = '85vh';
                iframe.style.border = 'none';
                iframe.style.zIndex = '99999';
                iframe.style.borderRadius = '12px';
                iframe.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)';
                iframe.style.display = 'none'; // Initially hidden
                iframe.id = 'hero-connection-widget-iframe';
                document.body.appendChild(iframe);

                const button = document.createElement('button');
                button.id = 'hero-connection-widget-button';
                button.style.position = 'fixed';
                button.style.bottom = '20px';
                button.style.right = '20px';
                button.style.zIndex = '99998';
                button.style.border = 'none';
                button.style.cursor = 'pointer';
                button.style.width = '60px';
                button.style.height = '60px';
                button.style.borderRadius = '50%';
                button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                button.style.transition = 'transform 0.2s ease';
                button.style.backgroundSize = 'cover';
                button.style.backgroundPosition = 'center';
                document.body.appendChild(button);
                
                let widgetData = {};

                // Fetch data to get avatar and colors
                fetch('https://heroos.hero.church/api/functions/getClientData?widget_id=' + widgetId)
                    .then(res => res.json())
                    .then(data => {
                        widgetData = data;
                        button.style.backgroundColor = data.theme_settings?.button_color || '#3B82F6';
                        const avatarUrl = data.avatar_url || 'https://herowidget.b-cdn.net/hero-icon.png';
                        button.innerHTML = `<img src="${avatarUrl}" style="width: 32px; height: 32px; margin: auto; border-radius: 50%;"/>`;
                        
                        if(data.floating_button_cta) {
                            const ctaBubble = document.createElement('div');
                            ctaBubble.id = 'hero-connection-widget-cta';
                            ctaBubble.textContent = data.floating_button_cta;
                            ctaBubble.style.position = 'fixed';
                            ctaBubble.style.bottom = '30px';
                            ctaBubble.style.right = '95px';
                            ctaBubble.style.background = 'white';
                            ctaBubble.style.padding = '8px 12px';
                            ctaBubble.style.borderRadius = '8px';
                            ctaBubble.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
                            ctaBubble.style.fontSize = '14px';
                            ctaBubble.style.zIndex = '99997';
                            ctaBubble.style.opacity = '0';
                            ctaBubble.style.transform = 'scale(0.8)';
                            ctaBubble.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                            document.body.appendChild(ctaBubble);
                            setTimeout(() => {
                                ctaBubble.style.opacity = '1';
                                ctaBubble.style.transform = 'scale(1)';
                            }, 500);
                        }
                    });

                let isOpen = false;

                function toggleWidget() {
                    isOpen = !isOpen;
                    if (isOpen) {
                        iframe.style.display = 'block';
                        button.style.transform = 'scale(0)';
                        const ctaBubble = document.getElementById('hero-connection-widget-cta');
                        if (ctaBubble) ctaBubble.style.display = 'none';

                    } else {
                        iframe.style.display = 'none';
                        button.style.transform = 'scale(1)';
                    }
                }
                
                button.addEventListener('click', toggleWidget);

                window.addEventListener('message', function(event) {
                    if (event.source !== iframe.contentWindow) return;
                    if (event.data === 'hero-widget-close') {
                        toggleWidget();
                    }
                });
            })();