diff --git a/how-to/integrate-with-snap/README.md b/how-to/integrate-with-snap/README.md
index 2dff988da8..318a36f370 100644
--- a/how-to/integrate-with-snap/README.md
+++ b/how-to/integrate-with-snap/README.md
@@ -135,7 +135,7 @@ You app should now be listed and you should be able to launch it and snap it wit
 
 ### Testing Snap with an existing Platform/Classic App
 
-We have a [preload.ts](./client/src/preload.ts) file that is a preload script that can be added to your platform provider or classic app to show Snap working without any coding. Your manifest will need to load the preload script snap.preload.bundle.js (this is how it is defined in our [webpack.config.js](./client/webpack.config.js)) and you will need to request the permissions and define the app asset.
+We have a [preload.ts](./client/src/preload/preload.ts) file that is a preload script that can be added to your platform provider or classic app to show Snap working without any coding. Your manifest will need to load the preload script snap.preload.bundle.js (this is how it is defined in our [webpack.config.js](./client/webpack.config.js)) and you will need to request the permissions and define the app asset. There is a version of the preload script that sets the debug window provided by Snap to true: [preload.debug.ts](./client/src/preload/preload.debug.ts).
 
 #### Preload Script Entry
 
@@ -147,12 +147,24 @@ If you are running the local example you will see:
   "preloadScripts": [{ "url": "http://localhost:8080/js/snap.preload.bundle.js" }],
 ```
 
+You can change this to the debug version by updating the preloadScript to the following:
+
+```json
+  "preloadScripts": [{ "url": "http://localhost:8080/js/snap.preload.debug.bundle.js" }],
+```
+
 If you just want to test Snap within your own manifest by using a hosted preload script then you can add the following to the "startup_app" or "platform" definition in your manifest:
 
 ```json
   "preloadScripts": [{ "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/integrate-with-snap/js/snap.preload.bundle.js" }],
 ```
 
+If you want the debug version with the debug window automatically showing then you can reference this preload script:
+
+```json
+  "preloadScripts": [{ "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/integrate-with-snap/js/snap.preload.debug.bundle.js" }],
+```
+
 #### Permissions
 
 These permissions need to be added at the platform or startup_app level depending on the type of application you are building. We are using the restrictive permission model so we are only allowing launch external process for an app asset that comes from a particular url.
diff --git a/how-to/integrate-with-snap/client/src/preload.ts b/how-to/integrate-with-snap/client/src/preload/preload.common.ts
similarity index 84%
rename from how-to/integrate-with-snap/client/src/preload.ts
rename to how-to/integrate-with-snap/client/src/preload/preload.common.ts
index 826e8e8b54..7ab8920270 100644
--- a/how-to/integrate-with-snap/client/src/preload.ts
+++ b/how-to/integrate-with-snap/client/src/preload/preload.common.ts
@@ -1,14 +1,6 @@
 import type OpenFin from "@openfin/core";
 import * as Snap from "@openfin/snap-sdk";
-import type { SnapProviderOptions } from "./shapes";
-
-if (window === window.top) {
-	console.log("Adding snap support through a preload.");
-
-	window.addEventListener("DOMContentLoaded", async () => {
-		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: true });
-	});
-}
+import type { SnapProviderOptions } from "../shapes";
 
 /**
  * Initialize the snap components.
diff --git a/how-to/integrate-with-snap/client/src/preload/preload.debug.ts b/how-to/integrate-with-snap/client/src/preload/preload.debug.ts
new file mode 100644
index 0000000000..25239bcbe2
--- /dev/null
+++ b/how-to/integrate-with-snap/client/src/preload/preload.debug.ts
@@ -0,0 +1,9 @@
+import { initialize } from "./preload.common";
+
+if (window === window.top) {
+	console.log("Adding snap support through a debug preload.");
+
+	window.addEventListener("DOMContentLoaded", async () => {
+		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: true });
+	});
+}
diff --git a/how-to/integrate-with-snap/client/src/preload/preload.ts b/how-to/integrate-with-snap/client/src/preload/preload.ts
new file mode 100644
index 0000000000..10b620a5a8
--- /dev/null
+++ b/how-to/integrate-with-snap/client/src/preload/preload.ts
@@ -0,0 +1,9 @@
+import { initialize } from "./preload.common";
+
+if (window === window.top) {
+	console.log("Adding snap support through a preload.");
+
+	window.addEventListener("DOMContentLoaded", async () => {
+		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: false });
+	});
+}
diff --git a/how-to/integrate-with-snap/client/webpack.config.js b/how-to/integrate-with-snap/client/webpack.config.js
index d5c417b26d..1ec1101de8 100644
--- a/how-to/integrate-with-snap/client/webpack.config.js
+++ b/how-to/integrate-with-snap/client/webpack.config.js
@@ -22,7 +22,7 @@ module.exports = [
 		}
 	},
 	{
-		entry: './client/src/preload.ts',
+		entry: './client/src/preload/preload.ts',
 		devtool: 'inline-source-map',
 		module: {
 			rules: [
@@ -40,5 +40,25 @@ module.exports = [
 			filename: 'snap.preload.bundle.js',
 			path: path.resolve(__dirname, '..', 'public', 'js')
 		}
+	},
+	{
+		entry: './client/src/preload/preload.debug.ts',
+		devtool: 'inline-source-map',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js']
+		},
+		output: {
+			filename: 'snap.preload.debug.bundle.js',
+			path: path.resolve(__dirname, '..', 'public', 'js')
+		}
 	}
 ];