All About Web Co. logo
All About Web Co.

How to Automatically Update the Copyright Year in Webflow

Author: Serhiy Manuilo, Publication Date: Feb 11, 2024, Last Updated: Jun 15, 2024
by Serhiy Manuilo, Jun 15, 2024
The article image: "How to Automatically Update the Copyright Year in Webflow"

Many website owners experience the same pain every year and it’s an outdated copyright year. Fortunately, there’s a way to automate it in Webflow and eliminate the problem forever.

To update the copyright year automatically in Webflow, navigate to the site Designer > Navigator > Footer, double-click on the copyright text block, go to the Settings tab of the right sidebar, and set the copyright block ID. Navigate to the site Settings > Custom code > Header code and add a script with the year calculation by the JavaScript Date API - new Date().getFullYear().

Right before we start: This article describes how to dynamically change the copyright year on the Webflow platform considering its specifics. If you don’t own a Webflow site or want to learn more about the subject, this guide covers it in general.

  1. Hover over the site tile and click on Open Designer Navigate to the Webflow Designer
  2. Click on the Navigator icon on the left side bar
  3. Navigate to the Footer Navigate to the Webflow site footer block
  4. Double-click on the copyright notice text block
  5. Go to the Settings tab on the right side bar
  6. Enter copyright in the ID field Set up the copyright notice block ID in Webflow
  7. Come back to the Dashboard
  8. Navigate to the site Settings Navigate to the Webflow site Settings
  9. Navigate to the Custom code section Navigate to the Webflow Custom code site Settings
  10. Put this script in the Header code text area
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function(){
    const copyrightElement = document.getElementById('copyright');
    const newCopyrightText = `Copyright © ${new Date().getFullYear()} allaboutweb.co`;

    if (currentYearElement) {
      currentYearElement.textContent = newCopyrightText;
    }
  });
</script>

How Does the Automation Code Work

The algorithm is pretty simple, we take the copyright text and replace it with the new one with the current year.

  1. document.addEventListener('DOMContentLoaded', function(){ ... }); - this block sets a page listener and the logic within function(){ ... } gets executed after the page is loaded
  2. document.getElementById('copyright') is looking for the copyright notice HTML element
  3. Copyright © ${new Date().getFullYear()} allaboutweb.co - the new copyright text with the injected value of the current year by new Date().getFullYear()
  4. if (currentYearElement) {...} - this line checks if the copyright element is present, which is needed to prevent issues in case you accidentally remove the copyright text or its ID
  5. currentYearElement.textContent = newCopyrightText - overrides the copyright notice with the old year value with the newCopyrightText value

You can copy the copyright symbol from here ©. Alternatively, you can use the MacOS shortcut Option + G or the Windows shortcut Alt + 0169 for plain text.

For the HTML code, use one of the following entities: &copy;, &#169;, &#xA9;.

Copyright is a type of intellectual property that protects a creator of original material from unauthorized duplication or use. When you publish content on a website, it becomes copyrighted automatically.

However, for the sake of extra protection, a copyright policy should be set explicitly. This helps to claim compensation in case of unauthorized usage and prevent Innocent Infringement.

Check out this post to learn more about the copyright stuff: Copyright Footer - Examples, HTML, Symbol, Format and More

This is a copyright notice format formula:

[1] Copyright [2] © [3] YYYY or YYYY - YYYY [4] Entity name [5] Rights statement

  1. The “Copyright” word (Optional)
  2. The copyright symbol © (Required)
  3. Current year 2024 or a range of years 2022 - 2024 (Required)
  4. An entity name (Required)
    1. An author’s full name
    2. A company name
    3. A website domain name
  5. A rights statement (Optional)
    1. All rights reserved
    2. Some rights reserved
    3. No rights reserved

Copyright notice examples:

My personal preference is the last one: “Copyright © 2024 allaboutweb.co”. Although you are free to use any format you like or consider valid in your particular case.

Summary

As you can see, automating the copyright year in Webflow is not rocket science. Even though it requires some coding, that is not very hard to implement and understand. Spending a few minutes setting this up will let you focus more on other things and keep your website up to date.