# 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.

Property	Type	Description
Dev Code URL	url	Specify the URL to your DEV mode code, typically using localhost.
Test Code URL	url	The URL to your TEST mode code, typically a CDN served integration branch from your Github repo.
Prod Code URL	url	The URL to your PROD mode code, typically a CDN served from your Github release branch.
Async	boolean	Optional async
Defer	boolean	Optional 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` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/script-manager.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.