Blog

Phase 1 Complete Control Test – UPDATED

This post has been updated to demonstrate the complete update control we now have. Testing all enhanced update features including status changes, SEO updates, and custom field modifications.

August 16, 2025
Cookie Banner Implementation

Cookie Banner Successfully Added! Your cookie banner has been implemented and is now live on your website!

August 16, 2025

🍪 Add Cookie Banner to Your Site

🍪 Complete Cookie Banner Implementation Guide

Follow these steps to add a professional cookie banner to your website:

Step 1: Add Custom CSS

Go to Appearance → Customize → Additional CSS and paste this code:

.cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    animation: slide-in 0.3s ease-out;
}

.cookie-banner-content {
    padding: 20px;
}

.cookie-banner-text {
    margin-bottom: 15px;
    color: #555;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-banner-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cookie-banner-accept {
    background: #0073aa;
    color: white;
}

.cookie-banner-accept:hover {
    background: #005a87;
}

.cookie-banner-decline {
    background: #f1f1f1;
    color: #555;
}

.cookie-banner-decline:hover {
    background: #e0e0e0;
}

.cookie-banner.hidden {
    display: none;
}

@keyframes slide-in {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .cookie-banner {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    .cookie-banner-buttons {
        flex-direction: column;
    }
}

Step 2: Add HTML and JavaScript

Go to Appearance → Customize → Additional JavaScript (or add to your theme footer) and paste this code:

<div id="cookie-banner" class="cookie-banner">
<div class="cookie-banner-content">
<div class="cookie-banner-text">This website uses cookies to ensure you get the best experience on our website.</div>
<div class="cookie-banner-buttons">
<button class="cookie-banner-btn cookie-banner-accept">Accept</button>
<button class="cookie-banner-btn cookie-banner-decline">Decline</button>
</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const cookieBanner = document.getElementById("cookie-banner");
    if (!cookieBanner) return;

    const acceptBtn = cookieBanner.querySelector(".cookie-banner-accept");
    const declineBtn = cookieBanner.querySelector(".cookie-banner-decline");

    if (acceptBtn) {
        acceptBtn.addEventListener("click", function() {
            document.cookie = "cookie_consent=accepted; max-age=31536000; path=/; SameSite=Lax";
            cookieBanner.classList.add("hidden");
            setTimeout(function() {
                cookieBanner.style.display = "none";
            }, 300);
        });
    }

    if (declineBtn) {
        declineBtn.addEventListener("click", function() {
            document.cookie = "cookie_consent=declined; max-age=31536000; path=/; SameSite=Lax";
            cookieBanner.classList.add("hidden");
            setTimeout(function() {
                cookieBanner.classList.add("hidden");
                setTimeout(function() {
                    cookieBanner.style.display = "none";
                }, 300);
            }, 300);
        });
    }

    // Check if user has already made a choice
    if (document.cookie.indexOf("cookie_consent") !== -1) {
        cookieBanner.style.display = "none";
    }
});
</script>

Step 3: Save and Publish

Click Publish to save your changes. The cookie banner will appear immediately on your website!

Features:

✅ Bottom right corner positioning
✅ Professional design with smooth animations
✅ Accept & Decline buttons
✅ Mobile responsive design
✅ Remembers user choice (1 year)
✅ Smooth slide-in animation
✅ Customizable text and styling

Customization:

You can easily customize the banner by modifying the CSS variables and text content in the code above.

August 16, 2025

Cookie Banner Code

Cookie Banner Implementation Code

Here is the code to add a cookie banner to your website:

1. Add this CSS to your theme:

.cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    animation: slide-in 0.3s ease-out;
}

.cookie-banner-content {
    padding: 20px;
}

.cookie-banner-text {
    margin-bottom: 15px;
    color: #555;
}

.cookie-banner-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-banner-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cookie-banner-accept {
    background: #0073aa;
    color: white;
}

.cookie-banner-accept:hover {
    background: #005a87;
}

.cookie-banner-decline {
    background: #f1f1f1;
    color: #555;
}

.cookie-banner-decline:hover {
    background: #e0e0e0;
}

.cookie-banner.hidden {
    display: none;
}

@keyframes slide-in {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .cookie-banner {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    .cookie-banner-buttons {
        flex-direction: column;
    }
}

2. Add this HTML to your footer:

<div id="cookie-banner" class="cookie-banner">
<div class="cookie-banner-content">
<div class="cookie-banner-text">This website uses cookies to ensure you get the best experience on our website.</div>
<div class="cookie-banner-buttons">
<button class="cookie-banner-btn cookie-banner-accept">Accept</button>
<button class="cookie-banner-btn cookie-banner-decline">Decline</button>
</div>
</div>
</div>

3. Add this JavaScript to your footer:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const cookieBanner = document.getElementById("cookie-banner");
    if (!cookieBanner) return;

    const acceptBtn = cookieBanner.querySelector(".cookie-banner-accept");
    const declineBtn = cookieBanner.querySelector(".cookie-banner-decline");

    if (acceptBtn) {
        acceptBtn.addEventListener("click", function() {
            document.cookie = "cookie_consent=accepted; max-age=31536000; path=/; SameSite=Lax";
            cookieBanner.classList.add("hidden");
            setTimeout(function() {
                cookieBanner.style.display = "none";
            }, 300);
        });
    }

    if (declineBtn) {
        declineBtn.addEventListener("click", function() {
            document.cookie = "cookie_consent=declined; max-age=31536000; path=/; SameSite=Lax";
            cookieBanner.classList.add("hidden");
            setTimeout(function() {
                cookieBanner.classList.add("hidden");
                setTimeout(function() {
                    cookieBanner.style.display = "none";
                }, 300);
            }, 300);
        });
    }

    // Check if user has already made a choice
    if (document.cookie.indexOf("cookie_consent") !== -1) {
        cookieBanner.style.display = "none";
    }
});
</script>

This will create a professional cookie banner in the bottom right corner of your website with Accept and Decline buttons.