> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/script-manager.md). # Script Manager ✅ {% hint style="success" %} **EXPERIMENTAL** \ Based on an idea by [**Patrick Corsetti**](https://x.com/corsettiDev). {% endhint %}
In general when you're injecting a code library into your Webflow site, it's best to directly include the script tag in your page \, pointing to the CDN-served code for your site. This makes is much easier to manage your code safely in Github, edit it more efficiently through VSCode, and setup efficient CI/CD workflows for your team. **But how do you test code with your Webflow site?** Traditionally my preference is to maintain separate URLs for DEV ( on localhost ), TEST & PROD ( on CDNs ), and then to swap them depending on what configuration I need to test. However to do this efficiently, you need a reverse proxy to manage your development mode and modify those scripts. > Developer Patrick Corsetti had the idea of using Webflow Code Components for this, and it lead to this experiment. ## Features * Dynamic script loading, based on your environment. * By default, automatically inject the correct script; * Inject the TEST script if you're on staging * Inject the PROD script if you're on production * Inject the DEV script if you're in dev mode ( defined by a cookie ) * Allow devs to easy override the default mode for testing on the site; * Append `?dev` to the URL to switch to DEV mode * Append `?test` to switch to TEST mode * Append `?prod` to switch to PROD mode * When you're in an override mode, see that easily ( bottom right indicator ) * Click the indicator to exit that override mode and restore default script loading behavior {% hint style="danger" %} **IMPORTANT** \ Using the code component approach, the script is injected at some point during page load. Unlike a manual tag placement, it's difficult to control the exact point at which the script will load. If your scripts use the DOMContentLoaded trigger, it's best to verify that the event has not already fired, using a pattern something like this; ```javascript (() => { function apply() { // Your code here } // Loader if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', apply, { once: true }); } else { apply(); } })(); ``` {% endhint %} ## Demonstration {% embed url="" %} In this demonstration we have one Script Manager component, which has defined three separate CDN URLs. For demo purposes, all 3 are coming from CodePen; * DEV - * TEST - * PROD - [https://codepen.io/memetican/pen/pvgNZEa/9af32f97a8e11f86c29cdba239f991c8.js ]() {% hint style="success" %} Typically, you'd use JSDeliver, npm, or Netlify to act as the CDN for your TEST and PROD branches. For DEV, you'd most likely use localhost. {% endhint %} ## Properties Use these properties to configure Script Manager.
PropertyType Description
Dev Code URLurlSpecify the URL to your DEV mode code, typically using localhost.
Test Code URLurlThe URL to your TEST mode code, typically a CDN served integration branch from your Github repo.
Prod Code URLurlThe URL to your PROD mode code, typically a CDN served from your Github release branch.
AsyncbooleanOptional async
DeferbooleanOptional defer
## Notes Sygnal has a more industrial-strength approach to this solution, which we call DevProxy. It requires a reverse proxy to manage the script loading, and support dedicated, password-protected environments like `test.mysite.com` See the **Sygnal Site Engine** framework for more - ## Future * Consider designer suppression- it's executing PROD mode code * Handle partial-configs, where some URLs are unspecified * Support multiple Script Manager components, with independently-tracked states * Name each component individually, e.g. `engine` , `sa5-layout` * Allow DEV mode to selectively use DEV-mode scripts, * e.g. `?dev=engine,sa5-layout` * e.g. `?dev` same as `?dev=*` * e.g. `?dev=engine` * Same for `?test` and `?prod`