Super Easy Ways to Customize your Website Cookies and Why you need it

Mar 25

We know the importance of receipts when we buy something. It holds the vital information (like our bank account) that we can use to return the goods if they are damaged. That’s what website cookies take into action.

Every time we open a new website, a pop-up appears simply saying, are we willing to accept their cookies? (If it’s a delicious treat, then yes. Just kidding!) But, most are still hesitant to accept cookies since some think it is some kind of virus. The truth is, most people won’t know its importance unless they need to build a website on their own or required for a computer class. That’s why I’m writing this blog post to inform and educate basic Squarespace terminologies. Hence, you’re more aware of what you’re into. So, the next time you go to hang out with your friends, you can flex your new knowledge *wink*.

Spoiler Alert: I’ll also share some basic coding strategies, yay!

Website cookies may not be as delicious as your favorite Chips Ahoy, but they play a crucial role in enhancing user experiences online. In this guide, we'll break down the essentials of website cookies, explain their significance, and show you super easy ways to customize them for your site. So, whether you're a seasoned coder or a newbie, let's dive in and make your website even more user-friendly.

FOR YOU NOT TO GET LOST:

So wait, what are Website Cookies? Are they different from my favorite Chips Ahoy?
Ingredients in a Website Cookie
Customizing Your Cookie Banner
BONUS: FAQ
Summary

So wait, what are Website Cookies? Are they different from my favorite Chips Ahoy?

Yes, website cookies are more than crispy peanut butter and a chewy chocolate chip (they’re also not a monster!). In fact, they make your work convenient. Internet cookies have many versions, but we will only focus on one- a website cookie.

Website cookies are like secret recipes that websites use to store and exchange data between themselves and visitors' browsers. Their primary function is to track visitor activities on your site, which includes items in their shopping carts, login information, and their browsing preferences.

SO WHAT DOES THAT MEAN FOR ME?

Cookies serve as your virtual assistants, helping you better understand your visitors. They take note of what they put in their shopping cart, their log-in information, and note the wants and needs of each visitor (they can pass as your virtual assistant, tbh!). They provide valuable insights by tracking analytics and traffic on your website. Importantly, having website cookies is a legal requirement, and it's essential to inform visitors about them and obtain their consent.

Cookies can significantly improve user experiences by eliminating the need for visitors to sign in repeatedly and remembering their preferences, increasing the likelihood of return visits.

Ingredients in a Website Cookie

Typically, a simple website cookie contains a website’s name and an ID for the visitor. But, of course, other special cookies have additional ingredients (like peanuts and raisins). It totally depends on what your website needs.

Preferences: Visitor settings and options.
Time spent: How long visitors linger on your site.
Shopping basket items: What's in their carts.
Links clicked: Pages they've explored.
Accounts logged in: User login data.

All these ingredients are used for marketing purposes. You can easily track your visitors’ demographics, like what’s age group, gender, etc. Because not all like raisins, information from your cookies can help what’s best for your website.

Customizing Your Cookie Banner

Now, let's get into customizing your cookie banner. This is where you can make a significant impact on the user experience.

Step 1: Enable the Cookie Banner

Go to Settings.
Navigate to Cookies & Visitor Data.
Check 'Enable Cookie Banner.'

It's that easy! Plus, since 2018, Squarespace has improved the graphics of the cookie banner, making it even more appealing.

For those who are comfortable with coding, you can further tweak the banner to match your style. But don't worry, if you're new to coding, you can start by changing fonts and colors to align with your site's design.

Step 2: Choose Your Banner Layout

Bar (Top/Bottom): A discreet bar that can appear at the top or bottom of your website.
Pop-up (Top Left/Right or Bottom Left/Right): A more prominent pop-up that can appear in different corners of your site.

Step 3: Pick Your Banner Theme

Light: Black text on a light grey background.
Dark: White text on a black background.

Step 4: Customize Your Call to Action (CTA)

You have the freedom to choose the content of your buttons or text, making it more personalized.

Layout time!

Just navigate to the settings to enable a pop-up version. In that way, it won’t annoy your visitors, and they will take time to read what is written.

Cookie Banner Type:

Bar (Top/Bottom)
Pop-up (Top Left/Right or Bottom Left/Right)

Cookie Banner Theme:

Light - Black text + light grey background
Dark - White text + black background

Cookie Banner Call to Action (CTA) Type:

Content of buttons or text is customizable.

Text
Button
Icon

FACTS ONLY: Did you know that when a visitor accepts your cookies, they won’t see the message again for 30 days unless they clear their cache.

If you’re still not satisfied with the look of your cookie banner, I gotcha!. A CSS or a Cascading Style Sheet is available, wherein you can mix your own ingredients for that perfectly chewy, chunky cookie.

Banner + Font

/*Banner text and button typography*/  
.sqs-cookie-banner-v2 p, 
.sqs-cookie-banner-v2 button {
    color: #222!important;
    font-family: futura-pt, arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.4em;
}

Background of Banner + Drop Shadow

/* Banner background color and drop shadow */
.sqs-cookie-banner-v2 {
  background-color: #f6dccc!important;
 -webkit-box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
 -moz-box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
  box-shadow: 0px 1px 3px 0px rgba(150,150,150,.3);
}

Button

/*Button Style*/
.sqs-cookie-banner-v2.BUTTON .sqs-cookie-banner-v2-accept {
  border: 2px solid #222!important;
  color: #222;
  background: #5c755f;
}

BONUS: FAQ

Yes, website cookies are safe and serve legitimate purposes, such as enhancing user experiences and gathering analytics data.
Yes, it's a legal requirement to inform visitors about cookies and obtain their consent.
Absolutely! You can easily customize the cookie banner's appearance and content to match your site's style and message.
Yes, there are different types of website cookies, each serving specific purposes. The two main categories are:
Session Cookies: These are temporary cookies that are deleted from a user's device after they leave your website or close their browser. They are often used to store temporary information, like items in a shopping cart during a single session.
Persistent Cookies: These cookies remain on a user's device even after they leave your website or close their browser. They can be used for various purposes, such as remembering login information or user preferences for future visits.
To ensure compliance with cookie regulations, follow these best practices:
Inform Visitors: Clearly inform visitors about the use of cookies on your website through a cookie banner or pop-up. Explain why you use cookies and provide a link to your cookie policy for more details.
Obtain Consent: Obtain explicit consent from visitors before placing non-essential cookies on their devices. This consent can typically be obtained through an "Accept" button on the cookie banner.
Offer Opt-Out Options: Provide users with the ability to manage their cookie preferences, including opting out of non-essential cookies. Ensure that your website functions even if users choose not to accept cookies.
Keep a Cookie Policy: Maintain a comprehensive cookie policy that outlines the types of cookies you use, their purposes, and how users can manage their preferences.
Regularly Update Your Policy: Keep your cookie policy up to date, especially if you make changes to your cookie practices. Notify users of any updates.
Monitor Compliance: Regularly review and monitor your website's cookie compliance to ensure ongoing adherence to regulations.
By following these steps, you can maintain compliance with cookie regulations and provide transparency to your website's visitors regarding their data privacy and choices.

Luckily, if you’re a coding chef, you can easily tweak some details above to suit your style. But for coding newbies, you can just change the fonts and color. In conclusion, website cookies are not to be feared; they are essential tools for improving user experiences and complying with legal requirements. By customizing your cookie banner, you can make your website even more user-friendly and inviting.

So, now that you have the knowledge and tools to serve up your website cookies to the digital world, go ahead and flaunt those delicious cookies. Your visitors will thank you for it!

And that wraps up today’s episode of my cooking adventures, just kidding! I hope you learned a lot from me. Now that you are ready to serve your cookies to the digital world, don’t forget to leave a comment on your website URL, and let’s flaunt those delicious cookies!

Congrats on reaching here. So here's our personal take on this whole website footer topic.

Now you know those website cookies are more than just a delicious treat. Here’s my BFF tip that you should treat yourself to. It doesn’t need to be significant like luxurious things, just simple things like eating your favorite pizza, exercising, or just watching Netflix. What’s more important than work is yourself. A simple me time restarts your headspace from the stress of website building. Always remember that your physical and mental health matters.

If you liked this post, Pin it to Pinterest!