Using Slater Smart Script for Webflow Projects

Introduction

When working with Webflow projects, it's important to manage your script code correctly for both staging and production environments. This guide explains how to use the Slater smart script to automatically handle these environments without manually switching code.

Why You Should Not Paste Both Scripts

  • Do not paste both the staging and production script code on your Webflow page simultaneously.
  • Using both can lead to conflicts and errors, as each environment requires different configurations.

Using the Slater Smart Script

The Slater smart script provides a seamless way to manage your scripts based on the environment:

  • Automatic Environment Detection: The smart script reads the URL to determine whether it is in staging or production.
  • Dynamic Script Loading: If in staging, it loads the staging files; in production, it loads the production files.

Example of the Slater Smart Script

Here is an example of the Slater embed smart script:

<!--🤙 https://slater.app/1.js-->
<script>
document.addEventListener("DOMContentLoaded", function() {
  function loadWebflowProject(e){
    let t=document.createElement("script");
    t.setAttribute("src",e),
    t.setAttribute("type","module"),
    document.body.appendChild(t),
    t.addEventListener("load",()=>{
      console.log("Slater loaded Webflow Project.js: https://slater.app/1.js 🤙")
    }),
    t.addEventListener("error",e=>{
      console.log("Error loading file",e)
    })
  }
  let src=window.location.host.includes("webflow.io") ? 
          "https://slater.app/1.js" : 
          "https://assets.slater.app/slater/1.js?v=1.0";
  loadWebflowProject(src);
})
</script>

Benefits of Using the Slater Smart Script

  • Simplicity: Reduces the need for manual intervention when transitioning between environments.
  • Flexibility: Offers the ability to get single scripts for specific use cases, although the smart script is recommended for most scenarios.

Save to Staging and Production

  • Staging: You can save to staging by clicking "Save to Staging" in the save dropdown button found in the top right of the editor or pressing cmd + s.
  • Production: You can save to production by clicking "Save to Production" in the save dropdown button found in the top right of the editor or pressing cmd + shift + s.

Conclusion

By using the Slater smart script, you can streamline your Webflow project management, ensuring that the correct scripts are loaded for each environment. This approach minimizes errors and simplifies the development process.