Top 10 Essential Custom Code Snippets for New Webflow Websites

Welcome to the digital age where your website is more than just a business card—it's a dynamic hub for your digital presence.

For those building or refreshing their site on Webflow, integrating custom code snippets can dramatically elevate functionality and user experience.

Whether you're a seasoned developer or a creative entrepreneur, these top 10 essential custom code snippets are designed to seamlessly enhance your Webflow website.

From enriching user interactions to streamlining backend processes, these snippets will ensure your site is not only functional but also future-proof and fully optimized.

1. Dynamic Copyright Date

At Dee7 Studio, we ensure our website footer remains up to date without the need for manual edits each year. Located at the bottom of every page, this snippet automatically updates the copyright year, demonstrating our attention to detail and commitment to current content.

Typically added in the footer section of your HTML.

Usability: Automatically updates the copyright year, ensuring your website always appears current and well-maintained without manual updates.

<p>Copyright &copy; <script>document.write(new Date().getFullYear())</script> Your Name All Rights Reserved</p>

2. GSAP ScrollSmoother

Our portfolio pages at Dee7 Studio feature the GSAP ScrollSmoother to provide a fluid browsing experience that showcases our graphic and web design projects. This enhances the user experience by creating seamless transitions and animations as visitors scroll through our creative works.

Add the GSAP library and ScrollSmoother plugin to your site’s script.

Usability: Provides a smooth, polished scrolling experience that can make navigation feel more fluid and enhance the overall user experience.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.x/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.x/ScrollSmoother.min.js"></script>
<script>
  gsap.registerPlugin(ScrollSmoother);
  ScrollSmoother.create({
    smooth: 1.5,
    effects: true
  });
</script>

3. Google Analytics

We've integrated Google Analytics into the header of our site to gather valuable insights about visitor behavior. This tool helps us understand which projects attract the most interest and how we can optimize our content to enhance user engagement and satisfaction.

Insert the Google Analytics tracking code in the head section of your website.

Usability: Essential for tracking website traffic and user behavior, helping you make data-driven decisions to improve site performance and user engagement.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>

4. WhatsApp Chat Button

Dee7 Studio prioritizes client communication. We've added a WhatsApp chat button on the contact page, making it easier for clients to reach out and discuss projects directly from their mobile devices, offering convenience and a direct line to our team.

Can be implemented as part of the contact or footer section in HTML.

Usability: Allows visitors to initiate a chat via WhatsApp directly from your website, enhancing customer support and engagement.

<a href="https://wa.me/YOUR_PHONE_NUMBER?text=Hi%20there!" target="_blank">
  <img src="whatsapp-icon.png" alt="Chat on WhatsApp" style="height: 60px;">
</a>

5. Cookie Consent Banner

To comply with privacy laws and ensure transparency, we've placed a cookie consent banner on our site. This banner informs visitors about cookie use and provides options to accept or decline, ensuring compliance and respecting user preferences.

Where to Find It: Add the banner code in the body section of your HTML.

Usability: Ensures compliance with privacy laws like GDPR and improves user trust by transparently informing visitors about cookie use.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "theme": "classic",
  "position": "bottom-right",
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Got it!",
    "link": "Learn more"
  }
})});
</script>

6. Embedded Google Maps

Located on our contact page, the embedded Google Map provides visitors with a clear view of our studio's location. This helps potential clients find our studio easily, enhancing the usability of our site for local business interactions.

Typically embedded within the contact or about us page.

Usability: Helps users locate your business physically, which is particularly useful for local SEO and improving visitor trust by providing transparency.

<div style="width: 100%; height: 400px;">
  <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
    src="https://maps.google.com/maps?q=YOUR_LOCATION&amp;output=embed">
  </iframe>
</div>

7. Lazy Loading for Images

To improve site speed and efficiency, Dee7 Studio uses lazy loading for images across our website. This technique ensures images load as they enter the viewport, reducing initial page load times and enhancing performance on both desktop and mobile devices.

Apply the loading="lazy" attribute to your <img> tags.

Usability: Improves page load times by loading images only as they enter the viewport, enhancing performance especially on pages with many images.

<img src="path/to/image.jpg" loading="lazy" alt="Description of the image">

8. Social Media Sharing Buttons

Social media sharing buttons are embedded on all our blog posts and portfolio pages, allowing visitors to easily share our content with their networks. This functionality not only increases our reach but also enhances user engagement and promotes our studio's visibility online.

Integrated within articles, blog posts, or footer sections.

Usability: Facilitates easy sharing of content on social media platforms, increasing your content’s reach and engagement.

<a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url=YOUR_URL&text=Check%20this%20out!" target="_blank">Tweet</a>

9. Responsive YouTube Embed

We feature tutorial videos and project showcases on our blog. The responsive YouTube embed ensures that our videos look great on any device, providing a seamless viewing experience that adapts to various screen sizes.

Insert into any part of your website that requires video content, such as blog posts or product descriptions.

Usability: Provides a mobile-friendly video viewing experience that adjusts seamlessly across different screen sizes.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen>
  </iframe>
</div>

10. Back to Top Button

On our longer content pages, such as the blog or project gallery, a "Back to Top" button appears once users scroll down. This small yet effective tool improves navigation, allowing users to quickly return to the top of the page without repetitive scrolling.

Usually implemented in the lower right or left corner of the webpage.

Usability: Improves navigation by allowing users to quickly return to the top of the page, useful for long pages and improving overall user experience.

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Bonus: Finsweet's Attributes Library for Interactive Tables

Code Snippet to Add:

‍To use Finsweet's Attributes Library for interactive tables, you need to include their JS library in your project. Here’s how to integrate it:

<!-- [Attributes by Finsweet] CMS Filter -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

How to Add the Attribute:

1. Add the script to the <head> or just before the closing </body> tag of your HTML.
2. Set up your table in Webflow using the Webflow Designer.
3. Apply custom data attributes to the table, rows, or individual cells depending on how you want to manage filters or searches.

Imagine you’re running an online store that sells a variety of electronic gadgets.

You have a webpage dedicated to showcasing the latest products with specifications and prices. However, with the growing inventory, customers find it challenging to navigate through this vast list.

Here's where Finsweet’s Attributes Library comes into play.

By integrating this library, you set up a dynamic table on your ‘Products’ page.

Customers can now use the search bar to quickly find products by typing keywords or use the filter options to narrow down choices by categories like 'Brand', 'Price Range', or 'New Arrivals'.

This interactive feature not only enhances user experience but also makes your website appear more professional and user-friendly.

You can access the full documentation and download the necessary scripts from Finsweet's official website under the Attributes Library section. They provide comprehensive guides and examples on how to implement and customize your tables.

Usability: The usability of adding Finsweet’s Attributes to your Webflow site is substantial:

• Enhanced User Experience: Allows users to interact with the data presented, making it easier to find what they are looking for.
• Increased Engagement: Interactive elements like search and filters can keep users on your site longer, which may lead to higher conversion rates.
• Improved Accessibility: Makes information more accessible by allowing users to manipulate the data display according to their preferences.

Adding Finsweet’s Attributes Library to your Webflow project can significantly upgrade the functionality of your tables, making your site more interactive and user-friendly. This is particularly useful for e-commerce sites, portfolios, or any site that requires sorting through a large amount of data.

Incorporating these custom code snippets into your Webflow site can transform it from good to great, ensuring it stands out in today’s competitive digital landscape.

These enhancements not only improve the aesthetics and functionality of your website but also bolster its efficiency and user engagement.

Remember, a little customization goes a long way in making your website feel unique and tailored to your audience's needs.

Dive into using these snippets today and watch your Webflow website rise to a new level of professionalism and polish!