What happened with the cookie banner

Hi there!

Opened our website today and the cookie banner was a mess. Tried editing it and it's more or less back on track again, but those huge buttons are in the way, and I can't find how to change them back to simple links.

Also, a cookie preferences link was inserted in the footer without any consideration for the layout or design, not even a mail to announce the change. Now the footer is a hot mess, with spacing, padding and margins broken, and we're changing it back, but it's half an hour of extra work when our company is very busy. And there may be also broken things we did not detect yet.

Anyone else experiencing this?

Hi everyone. A while back I added some custom CSS (with code I found online, as I'm not a coder) so that my cookie banner matched the rest of my brand colors and fonts. It worked perfectly for several months, and a couple of days ago it suddenly stopped working. The font is still the one I set up, but the colors I lost, it's just a big ugly black and white box. I'm adding the code below, can anyone help?

/*Cookie Banner*/
/*Cookie Banner*/
.sqs-cookie-banner-v2 p,  {
color: #ffffff !important;
font-family: raleway;
font-size: 12px;
font-style: normal;
font-weight: 100;
letter-spacing: 0px;
line-height: 150%;
}

.sqs-cookie-banner-v2 {
background-color: #223247!important;
padding:20px;
}
// Button Style  //
.sqs-cookie-banner-v2.DARK.BUTTON .sqs-cookie-banner-v2-cta {
  font-family: raleway;
  background: #137170;
  border: 1px solid #137170;
  letter-spacing: 0px;
}

I was using this to customize the font on my cookie banner, but now it isn’t working.

.sqs-cookie-banner-v2 p {

    color: #fafbff !important;

    font-family: 'New Kansas Regular';

    letter-spacing: .7px;

}

Everything else that I customized in the cookie banner is still working except for that one.

@samanthatroulis Hi! Can you share your site URL for context? 

Will the New Changes to the Cookie Banner send our Google Account Consent permissions in line with the new Consent Mode V2 regulation?

 

@Lesum samanthatroulis.com

Thank you!

Hi,

I noticed yesterday that Squarepace has changed their style editor and the cookie banner has changed from links to buttons.

I have two issues:

1. The text on one of my cookies doesn't fit inside the new buttons so it's not legible. I need to either make the button longer or convert the buttons back into normal linked text.
2. The "accept" button has a primary button style and the "strictly necessary" button has a secondary button style.
   To comply with some law I honestly can't remember the name of, the accept button shouldn't be so much more appealing (green for go!) than the other button so I want to change them both to the tertiary button style.

Any help would be greatly appreciated. I am happy implimenting small bits of css and code but I really dont know how to reference the cookie banner in my css, or how to change buttons.

Many thanks,

Zoe

5 hours ago, CADESIGN said:

Will the New Changes to the Cookie Banner send our Google Account Consent permissions in line with the new Consent Mode V2 regulation?

For third-party cookies, if a provider offers a "consent mode", Squarespace now (with this latest update - 10 July 2024) sends the appropriate consent signal based on the visitor’s category choices:

• Google Analytics:  Google’s consent mode is automatically integrated when added through the API keys panel
• Meta Pixel: Meta’s consent mode is automatically integrated when added through the API keys panel
• YouTube Videos: YouTube Privacy Enhanced Mode is automatically integrated when a video is added through the Video Block.

To use this feature, you must ensure you display either a Manage or Decline button to allow your visitors to decline cookies.

Did this help? Please give feedback by clicking an icon below  ⬇️

57 minutes ago, paul2009 said:

Google Analytics:  Google’s consent mode is automatically integrated when added through the API keys panel

That is great, it seems. we have everything in place for this although Google still seem to be telling us changes need to be made. I will ask them to re-review. 

Was this Consent Mode Integration only deployed by squarespace on this latest update?

Hey @lilyg & @samanthatroulis Squarespace changed all of the CSS selector classes for cookie banner elements yesterday - even for version 7.0 sites.

Here are the new selectors; and for those of you with my Squarespace CSS cheat sheet, it has been updated and I've added some new style plugins too.

Cookie Banner 
.gdpr-cookie-banner

Disclaimer Text
.gdpr-cookie-banner.full-styling.popup .disclaimer-text

All Buttons
.button-group

Accept Button
.accept.sqs-button-element--primary

Decline Button
.decline.sqs-button-element--secondary
 
Manage Button
.manage.sqs-button-element--tertiary

Manage Overlay
.manage-cookies-overlay

Manage Overlay: Section Titles
.category-selection

Manage Overlay: Description (also applies to on/off labels)
.category-description

Save Preferences Button
.manage-cookies-overlay .save .sqs-button-element--primary

@samanthatroulis Hi! You can update your existing code to the following:

.cookie-banner-mount-point p.disclaimer-text {
    font-family: 'New Kansas Regular' !important;
    color: #fafbff !important;
    letter-spacing: .7px;
}

I managed to fix my buttons to look how I wanted with this css

.decline.sqs-button-element--secondary {
  min-width: 290px !important;
  color: #919191 !important;
  border: 2px solid #919191 !important;
}

.decline.sqs-button-element--secondary:hover {
  min-width: 290px !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  background-color: #919191 !important;
}

.accept.sqs-button-element--primary {
  color: #919191 !important;
  border: 2px solid #919191 !important;
  background-color: #FFFFFF !important;
}

.accept.sqs-button-element--primary:hover {
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  background-color: #919191 !important;
}

The only problem I have now is that on mobile the buttons are clipped as they extend off the screen.

I've attached an image of how the mobile cookie bar looks at the moment.

Does anyone have any tips for how to shrink the gap between the buttons or stack them vertically to fix this?

4 hours ago, Z_Creative said:

the buttons are clipped

Have you tried setting a max-width on the buttons instead of a min-width. By default, the buttons have a max-width of 150px.

If it doesn't help, please share a link to the site.

3 hours ago, paul2009 said:

Have you tried setting a max-width on the buttons instead of a min-width. By default, the buttons have a max-width of 150px.

If it doesn't help, please share a link to the site.

Thanks so much for the advice. Unfortunately, it doesn't seemed to have changed it. My site link as requested 🙂

The new Cookie Banner has been built to accommodate buttons up to 150px wide, with longer captions being clipped:

Your CSS overrides this width restriction, but then you run out of space 🙂.

I haven't fully tested this, but I was able to wrap your super long button with the following CSS (in addition to forcing the max- or min-width). Let me know if this helps.

/* Wrap Long Cookie Buttons */
@media screen and (max-width: 767px) {
  .gdpr-cookie-banner .button-group {
    flex-wrap: wrap;
    row-gap: 14px;
  }
}

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 Thank you so much ! This did the trick 🙂

Is there a way to just set the buttons all to the primary style, rather than have all three (primary, secondary, and tertiary) in use?

1 hour ago, mvelentzas said:

Is there a way to just set the buttons all to the primary style, rather than have all three (primary, secondary, and tertiary) in use?

No, but you can style the banner's primary, secondary, and tertiary buttons using some CSS 🙂. What's your site URL and how do you want them to look?

We are being told by Google that:

 

"The domain (*****) is sending data to Google without properly indicating the user's consent choice in cases where the user has either explicitly denied consent or declined to interact with the consent banner.

Please review our guide for troubleshooting consent mode here, and reach out to your CMP if you need assistance correcting your implementation."

Our Google account is connected to our Squarespace account, shouldn't the data indicating a users consent choices be being transmitted to google?

As far as I am aware the squarespace banner doesn't manage the meta pixel consent (at least for me) and I have heard google services have a similar problem.

There was a post on how to do consent for google ads (google tag manager) here.

I adapted this for the meta pixel here.

Hopefully this is of some help.

Hi @Pementa Did anyone solve this for you as I'm having the same issue, I much prefer the simple text links for the buttons as I like to make my cookie banners not that prominent, I find the buttons now looks so silly and big. 

Anyway to simple convert the new button style back to simple text links would be useful. 

On 7/17/2024 at 4:47 PM, mooch said:

Hi @Pementa Did anyone solve this for you as I'm having the same issue, I much prefer the simple text links for the buttons as I like to make my cookie banners not that prominent, I find the buttons now looks so silly and big. 

Anyway to simple convert the new button style back to simple text links would be useful. 

Not yet, I still can't change the buttons to simple text links.

Question to the coders here: is there a way to make the floating cookie options sticky ? I noticed it will scroll up together with content while for example in a gallery, while still floating over the content. Not really looking good.  I'm on "Wells" template.

My website is: https://architectureshooting.com

15 hours ago, mgroeteke said:

Question to the coders here: is there a way to make the floating cookie options sticky ? I noticed it will scroll up together with content while for example in a gallery, while still floating over the content. Not really looking good.  I'm on "Wells" template.

My website is: https://architectureshooting.com

I see it already sticky on scroll up/down