Loading...
Free
Current Plan
Banner Views
Consent Rate
1
Websites

Banner Customization

Installation Script

Copy this script and paste it before the closing </body> tag of your website:

Live Preview

See how your cookie banner will look on your website:

Quick Stats

Total Impressions: 0
Accept Rate: 0%
Last Updated: Never

Need to upgrade?

Unlock advanced features with our Pro plan

View Plans

Account Settings

Profile Information

Subscription

Plan: Free

Status: Active

Next billing: -

Upgrade Plan
`; document.getElementById('installation-script').textContent = scriptContent; } function updatePreviewFrame() { if (!userId) { console.error('No user ID available for preview'); return; } const previewFrame = document.getElementById('preview-frame'); if (previewFrame) { // Create a custom preview page URL with the user's actual ID const previewContent = generatePreviewHTML(); const blob = new Blob([previewContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); previewFrame.src = url; // Clean up the blob URL after a delay setTimeout(() => URL.revokeObjectURL(url), 1000); } } function generatePreviewHTML() { if (!userId) return 'Error: No user ID'; return ` Banner Preview
Preview Mode: This shows how your cookie banner will appear on your website. ${currentUser?.status === 'active' ? 'Your subscription is active.' : 'Note: Your subscription needs to be active for the banner to work on live websites.'}

Sample Website

This is a preview of how your cookie banner will appear on your website.

The banner should appear based on your current settings below.

`; } function loadStats() { // Mock stats - replace with real API calls later document.getElementById('banner-views').textContent = '1,234'; document.getElementById('consent-rate').textContent = '85%'; document.getElementById('total-impressions').textContent = '2,456'; document.getElementById('accept-rate').textContent = '78%'; document.getElementById('last-updated').textContent = 'Just now'; } // Handle customization form submission document.getElementById('customization-form').addEventListener('submit', async function(e) { e.preventDefault(); const token = localStorage.getItem('cookeys_token'); const customizationData = { bannerTitle: document.getElementById('banner-title').value, bannerText: document.getElementById('banner-text').value, bannerPosition: document.getElementById('banner-position').value, primaryColor: document.getElementById('primary-color').value, backgroundColor: document.getElementById('background-color').value, showRejectAll: document.getElementById('show-reject-all').checked, granularConsent: document.getElementById('granular-consent').checked }; try { const response = await fetch('/api/user/customization', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify(customizationData) }); const result = await response.json(); if (result.success) { showSuccess('Banner settings saved successfully!'); // Refresh preview with new settings setTimeout(() => updatePreviewFrame(), 500); } else { throw new Error(result.error); } } catch (error) { console.error('Save customization error:', error); showError('Failed to save settings'); } }); // Handle profile form submission document.getElementById('profile-form').addEventListener('submit', async function(e) { e.preventDefault(); const token = localStorage.getItem('cookeys_token'); const profileData = { name: document.getElementById('profile-name').value, website: document.getElementById('profile-website').value }; try { const response = await fetch('/api/auth/profile', { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify(profileData) }); const result = await response.json(); if (result.success) { showSuccess('Profile updated successfully!'); // Update stored user info currentUser.name = profileData.name; currentUser.website = profileData.website; localStorage.setItem('cookeys_user', JSON.stringify(currentUser)); document.getElementById('user-name').textContent = profileData.name; } else { throw new Error(result.error); } } catch (error) { console.error('Update profile error:', error); showError('Failed to update profile'); } }); function copyScript() { const scriptElement = document.getElementById('installation-script'); const textArea = document.createElement('textarea'); textArea.value = scriptElement.textContent; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showSuccess('Script copied to clipboard!'); } function logout() { localStorage.removeItem('cookeys_token'); localStorage.removeItem('cookeys_user'); window.location.href = '/login'; } function manageSubscription() { alert('Subscription management coming soon!'); } function showError(message) { const errorDiv = document.getElementById('error-message'); errorDiv.textContent = message; errorDiv.style.display = 'block'; setTimeout(() => errorDiv.style.display = 'none', 5000); } function showSuccess(message) { const successDiv = document.getElementById('success-message'); successDiv.textContent = message; successDiv.style.display = 'block'; setTimeout(() => successDiv.style.display = 'none', 3000); }