diff --git a/.size-limit.js b/.size-limit.js
index a9f5501c4635..c984f999e15a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -55,12 +55,26 @@ module.exports = [
     limit: '35 KB',
   },
   {
-    name: '@sentry/browser (incl. Feedback) - Webpack (gzipped)',
+    name: '@sentry/browser (incl. feedbackIntegration) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, feedbackIntegration }',
     gzip: true,
     limit: '50 KB',
   },
+  {
+    name: '@sentry/browser (incl. feedbackModalIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedbackIntegration, feedbackModalIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedbackScreenshotIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
diff --git a/packages/core/src/envelope.ts b/packages/core/src/envelope.ts
index 9ec29c9d2a7e..3189cdc5278a 100644
--- a/packages/core/src/envelope.ts
+++ b/packages/core/src/envelope.ts
@@ -1,4 +1,6 @@
 import type {
+  Attachment,
+  AttachmentItem,
   DsnComponents,
   Event,
   EventEnvelope,
@@ -11,6 +13,7 @@ import type {
   SessionItem,
 } from '@sentry/types';
 import {
+  createAttachmentEnvelopeItem,
   createEnvelope,
   createEventEnvelopeHeaders,
   dsnToString,
@@ -86,3 +89,31 @@ export function createEventEnvelope(
   const eventItem: EventItem = [{ type: eventType }, event];
   return createEnvelope<EventEnvelope>(envelopeHeaders, [eventItem]);
 }
+
+/**
+ * Create an Envelope from an event.
+ */
+export function createAttachmentEnvelope(
+  event: Event,
+  attachments: Attachment[],
+  dsn?: DsnComponents,
+  metadata?: SdkMetadata,
+  tunnel?: string,
+): EventEnvelope {
+  const sdkInfo = getSdkMetadataForEnvelopeHeader(metadata);
+  enhanceEventWithSdkInfo(event, metadata && metadata.sdk);
+
+  const envelopeHeaders = createEventEnvelopeHeaders(event, sdkInfo, tunnel, dsn);
+
+  // Prevent this data (which, if it exists, was used in earlier steps in the processing pipeline) from being sent to
+  // sentry. (Note: Our use of this property comes and goes with whatever we might be debugging, whatever hacks we may
+  // have temporarily added, etc. Even if we don't happen to be using it at some point in the future, let's not get rid
+  // of this `delete`, lest we miss putting it back in the next time the property is in use.)
+  delete event.sdkProcessingMetadata;
+
+  const attachmentItems: AttachmentItem[] = [];
+  for (const attachment of attachments || []) {
+    attachmentItems.push(createAttachmentEnvelopeItem(attachment));
+  }
+  return createEnvelope<EventEnvelope>(envelopeHeaders, attachmentItems);
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3fe4d4b3a59a..fbf233ad8dd8 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -8,7 +8,7 @@ export type { IntegrationIndex } from './integration';
 
 export * from './tracing';
 export * from './semanticAttributes';
-export { createEventEnvelope, createSessionEnvelope } from './envelope';
+export { createEventEnvelope, createSessionEnvelope, createAttachmentEnvelope } from './envelope';
 export {
   captureCheckIn,
   withMonitor,
diff --git a/packages/feedback/.eslintrc.js b/packages/feedback/.eslintrc.js
index cf9985e769c0..0b547ffc828c 100644
--- a/packages/feedback/.eslintrc.js
+++ b/packages/feedback/.eslintrc.js
@@ -11,26 +11,6 @@ module.exports = {
       parserOptions: {
         project: ['tsconfig.test.json'],
       },
-      rules: {
-        'no-console': 'off',
-      },
-    },
-    {
-      files: ['test/**/*.ts'],
-
-      rules: {
-        // most of these errors come from `new Promise(process.nextTick)`
-        '@typescript-eslint/unbound-method': 'off',
-        // TODO: decide if we want to enable this again after the migration
-        // We can take the freedom to be a bit more lenient with tests
-        '@typescript-eslint/no-floating-promises': 'off',
-      },
-    },
-    {
-      files: ['src/types/deprecated.ts'],
-      rules: {
-        '@typescript-eslint/naming-convention': 'off',
-      },
     },
   ],
 };
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index bf75b64913f2..48d41f588447 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -44,7 +44,8 @@
   "dependencies": {
     "@sentry/core": "8.0.0-alpha.2",
     "@sentry/types": "8.0.0-alpha.2",
-    "@sentry/utils": "8.0.0-alpha.2"
+    "@sentry/utils": "8.0.0-alpha.2",
+    "preact": "^10.19.4"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
@@ -53,7 +54,7 @@
     "build:dev": "run-p build:transpile build:types",
     "build:types": "run-s build:types:core build:types:downlevel",
     "build:types:core": "tsc -p tsconfig.types.json",
-    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8 && yarn node ./scripts/shim-preact-export.js",
     "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
     "build:dev:watch": "run-p build:transpile:watch build:types:watch",
     "build:transpile:watch": "yarn build:transpile --watch",
diff --git a/packages/feedback/rollup.bundle.config.mjs b/packages/feedback/rollup.bundle.config.mjs
index d35b834711c6..f5794d328409 100644
--- a/packages/feedback/rollup.bundle.config.mjs
+++ b/packages/feedback/rollup.bundle.config.mjs
@@ -1,12 +1,15 @@
 import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
 
-const baseBundleConfig = makeBaseBundleConfig({
-  bundleType: 'addon',
-  entrypoints: ['src/index.ts'],
-  licenseTitle: '@sentry-internal/feedback',
-  outputFileBase: () => 'bundles/feedback',
-});
-
-const builds = makeBundleConfigVariants(baseBundleConfig);
-
-export default builds;
+export default makeBundleConfigVariants(
+  makeBaseBundleConfig({
+    bundleType: 'addon',
+    entrypoints: ['src/index.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry-internal/feedback',
+    outputFileBase: () => 'bundles/feedback',
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback/rollup.npm.config.mjs b/packages/feedback/rollup.npm.config.mjs
index 5a1800f23b08..3dc031c5ff82 100644
--- a/packages/feedback/rollup.npm.config.mjs
+++ b/packages/feedback/rollup.npm.config.mjs
@@ -12,5 +12,9 @@ export default makeNPMConfigVariants(
         preserveModules: false,
       },
     },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
   }),
 );
diff --git a/packages/feedback/scripts/shim-preact-export.js b/packages/feedback/scripts/shim-preact-export.js
new file mode 100644
index 000000000000..bd74e4da0a05
--- /dev/null
+++ b/packages/feedback/scripts/shim-preact-export.js
@@ -0,0 +1,75 @@
+// preact does not support more modern TypeScript versions, which breaks our users that depend on older
+// TypeScript versions. To fix this, we shim the types from preact to be any and remove the dependency on preact
+// for types directly. This script is meant to be run after the build/npm/types-ts3.8 directory is created.
+
+// Path: build/npm/types-ts3.8/global.d.ts
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * This regex looks for preact imports we can replace and shim out.
+ *
+ * Example:
+ * import { ComponentChildren, VNode } from 'preact';
+ */
+const preactImportRegex = /import\s*{\s*([\w\s,]+)\s*}\s*from\s*'preact'\s*;?/;
+
+function walk(dir) {
+  const files = fs.readdirSync(dir);
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.lstatSync(filePath);
+    if (stat.isDirectory()) {
+      walk(filePath);
+    } else {
+      if (filePath.endsWith('.d.ts')) {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const capture = preactImportRegex.exec(content);
+        if (capture) {
+          const groups = capture[1].split(',').map(s => s.trim());
+
+          // This generates a shim snippet to replace the type imports from preact
+          // It generates a snippet based on the capture groups of preactImportRegex.
+          //
+          // Example:
+          //
+          // import type { ComponentChildren, VNode } from 'preact';
+          // becomes
+          // type ComponentChildren: any;
+          // type VNode: any;
+          const snippet = groups.reduce((acc, curr) => {
+            const searchableValue = curr.includes(' as ') ? curr.split(' as ')[1] : curr;
+
+            // look to see if imported as value, then we have to use declare const
+            if (content.includes(`typeof ${searchableValue}`)) {
+              return `${acc}declare const ${searchableValue}: any;\n`;
+            }
+
+            // look to see if generic type like Foo<T>
+            if (content.includes(`${searchableValue}<`)) {
+              return `${acc}type ${searchableValue}<T> = any;\n`;
+            }
+
+            // otherwise we can just leave as type
+            return `${acc}type ${searchableValue} = any;\n`;
+          }, '');
+
+          // we then can remove the import from preact
+          const newContent = content.replace(preactImportRegex, '// replaced import from preact');
+
+          // and write the new content to the file
+          fs.writeFileSync(filePath, snippet + newContent, 'utf8');
+        }
+      }
+    }
+  });
+}
+
+function run() {
+  // recurse through build/npm/types-ts3.8 directory
+  const dir = path.join('build', 'npm', 'types-ts3.8');
+  walk(dir);
+}
+
+run();
diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
new file mode 100644
index 000000000000..9804fdedf431
--- /dev/null
+++ b/packages/feedback/src/constants/index.ts
@@ -0,0 +1,27 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+export { DEFAULT_THEME } from './theme';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+export const DOCUMENT = WINDOW.document;
+export const NAVIGATOR = WINDOW.navigator;
+
+export const ACTOR_LABEL = 'Report a Bug';
+export const CANCEL_BUTTON_LABEL = 'Cancel';
+export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+export const FORM_TITLE = 'Report a Bug';
+export const EMAIL_PLACEHOLDER = 'your.email@example.org';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+
+export const FEEDBACK_WIDGET_SOURCE = 'widget';
+export const FEEDBACK_API_SOURCE = 'api';
+
+export const SUCCESS_MESSAGE_TIMEOUT = 5000;
diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants/theme.ts
similarity index 58%
rename from packages/feedback/src/constants.ts
rename to packages/feedback/src/constants/theme.ts
index 07782968375f..7fff31f48964 100644
--- a/packages/feedback/src/constants.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -1,14 +1,8 @@
-import { GLOBAL_OBJ } from '@sentry/utils';
-
-// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
-// prevents the browser package from being bundled in the CDN bundle, and avoids a
-// circular dependency between the browser and feedback packages
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
 const LIGHT_BACKGROUND = '#ffffff';
 const INHERIT = 'inherit';
 const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
-const LIGHT_THEME = {
+
+export const LIGHT_THEME = {
   fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
   fontSize: '14px',
 
@@ -59,18 +53,3 @@ export const DEFAULT_THEME = {
     error: '#f55459',
   },
 };
-
-export const ACTOR_LABEL = 'Report a Bug';
-export const CANCEL_BUTTON_LABEL = 'Cancel';
-export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
-export const FORM_TITLE = 'Report a Bug';
-export const EMAIL_PLACEHOLDER = 'your.email@example.org';
-export const EMAIL_LABEL = 'Email';
-export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
-export const MESSAGE_LABEL = 'Description';
-export const NAME_PLACEHOLDER = 'Your Name';
-export const NAME_LABEL = 'Name';
-export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
-
-export const FEEDBACK_WIDGET_SOURCE = 'widget';
-export const FEEDBACK_API_SOURCE = 'api';
diff --git a/packages/feedback/test/utils/TestClient.ts b/packages/feedback/src/core/TestClient.ts
similarity index 84%
rename from packages/feedback/test/utils/TestClient.ts
rename to packages/feedback/src/core/TestClient.ts
index 61156a3be8b0..39ed51fcff67 100644
--- a/packages/feedback/test/utils/TestClient.ts
+++ b/packages/feedback/src/core/TestClient.ts
@@ -4,34 +4,50 @@ import { resolvedSyncPromise } from '@sentry/utils';
 
 export interface TestClientOptions extends ClientOptions, BrowserClientReplayOptions {}
 
+/**
+ *
+ */
 export class TestClient extends BaseClient<TestClientOptions> {
   public constructor(options: TestClientOptions) {
     super(options);
   }
 
+  /**
+   *
+   */
   public eventFromException(exception: any): PromiseLike<Event> {
     return resolvedSyncPromise({
       exception: {
         values: [
           {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             type: exception.name,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             value: exception.message,
-            /* eslint-enable @typescript-eslint/no-unsafe-member-access */
           },
         ],
       },
     });
   }
 
+  /**
+   *
+   */
   public eventFromMessage(message: string, level: SeverityLevel = 'info'): PromiseLike<Event> {
     return resolvedSyncPromise({ message, level });
   }
 }
 
+/**
+ *
+ */
 export function init(options: TestClientOptions): void {
   initAndBind(TestClient, options);
 }
 
+/**
+ *
+ */
 export function getDefaultClientOptions(options: Partial<ClientOptions> = {}): ClientOptions {
   return {
     integrations: [],
diff --git a/packages/feedback/src/widget/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
similarity index 74%
rename from packages/feedback/src/widget/Actor.css.ts
rename to packages/feedback/src/core/components/Actor.css.ts
index 44bd60a3418e..4e7a9466cd1e 100644
--- a/packages/feedback/src/widget/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -1,16 +1,26 @@
+import { DOCUMENT } from '../../constants';
+
 /**
  * Creates <style> element for widget actor (button that opens the dialog)
  */
-export function createActorStyles(d: Document): HTMLStyleElement {
-  const style = d.createElement('style');
+export function createActorStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
   style.textContent = `
 .widget__actor {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
   line-height: 25px;
 
   display: flex;
   align-items: center;
   gap: 8px;
 
+
   border-radius: var(--border-radius);
   cursor: pointer;
   font-size: 14px;
diff --git a/packages/feedback/src/core/components/Actor.ts b/packages/feedback/src/core/components/Actor.ts
new file mode 100644
index 000000000000..fb49d5d1b7ee
--- /dev/null
+++ b/packages/feedback/src/core/components/Actor.ts
@@ -0,0 +1,48 @@
+import { DOCUMENT } from '../../constants';
+import { createActorStyles } from './Actor.css';
+import { FeedbackIcon } from './FeedbackIcon';
+
+export interface ActorProps {
+  buttonLabel: string;
+  shadow: ShadowRoot;
+}
+
+export interface ActorComponent {
+  el: HTMLElement;
+
+  appendToDom: () => void;
+
+  removeFromDom: () => void;
+}
+
+/**
+ * The sentry-provided button to open the feedback modal
+ */
+export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
+  const el = DOCUMENT.createElement('button');
+  el.type = 'button';
+  el.className = 'widget__actor';
+  el.ariaHidden = 'false';
+  el.ariaLabel = buttonLabel;
+  el.appendChild(FeedbackIcon());
+  if (buttonLabel) {
+    const label = DOCUMENT.createElement('span');
+    label.className = 'widget__actor__text';
+    label.appendChild(DOCUMENT.createTextNode(buttonLabel));
+    el.appendChild(label);
+  }
+
+  const style = createActorStyles();
+
+  return {
+    el,
+    appendToDom(): void {
+      shadow.appendChild(style);
+      shadow.appendChild(el);
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+  };
+}
diff --git a/packages/feedback/src/core/components/FeedbackIcon.ts b/packages/feedback/src/core/components/FeedbackIcon.ts
new file mode 100644
index 000000000000..a6145ebf8900
--- /dev/null
+++ b/packages/feedback/src/core/components/FeedbackIcon.ts
@@ -0,0 +1,49 @@
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const SIZE = 20;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Feedback Icon
+ */
+export function FeedbackIcon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    WINDOW.document.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'feedback-icon',
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    viewBox: `0 0 ${SIZE} ${SIZE}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_80)',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
+  });
+  svg.appendChild(g).appendChild(path);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_80',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    fill: 'white',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/core/createMainStyles.ts
similarity index 77%
rename from packages/feedback/src/widget/Main.css.ts
rename to packages/feedback/src/core/createMainStyles.ts
index 32bb8048e678..9eb5bd4dc2ab 100644
--- a/packages/feedback/src/widget/Main.css.ts
+++ b/packages/feedback/src/core/createMainStyles.ts
@@ -1,3 +1,4 @@
+import { DOCUMENT } from '../constants';
 import type { FeedbackTheme, FeedbackThemes } from '../types';
 
 function getThemedCssVariables(theme: FeedbackTheme): string {
@@ -38,12 +39,8 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
 /**
  * Creates <style> element for widget actor (button that opens the dialog)
  */
-export function createMainStyles(
-  d: Document,
-  colorScheme: 'system' | 'dark' | 'light',
-  themes: FeedbackThemes,
-): HTMLStyleElement {
-  const style = d.createElement('style');
+export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', themes: FeedbackThemes): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
   style.textContent = `
 :host {
   --bottom: 1rem;
@@ -51,20 +48,13 @@ export function createMainStyles(
   --top: auto;
   --left: auto;
   --z-index: 100000;
-  --font-family: ${themes.light.fontFamily};
-  --font-size: ${themes.light.fontSize};
-
-  position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
-  z-index: var(--z-index);
+  --font-family: ${themes.themeLight.fontFamily};
+  --font-size: ${themes.themeLight.fontSize};
 
   font-family: var(--font-family);
   font-size: var(--font-size);
 
-  ${getThemedCssVariables(colorScheme === 'dark' ? themes.dark : themes.light)}
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
 }
 
 ${
@@ -72,7 +62,7 @@ ${
     ? `
 @media (prefers-color-scheme: dark) {
   :host {
-    ${getThemedCssVariables(themes.dark)}
+    ${getThemedCssVariables(themes.themeDark)}
   }
 }`
     : ''
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
new file mode 100644
index 000000000000..489bfd32728d
--- /dev/null
+++ b/packages/feedback/src/core/integration.ts
@@ -0,0 +1,280 @@
+import { defineIntegration, getClient } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { isBrowser, logger } from '@sentry/utils';
+import {
+  ACTOR_LABEL,
+  CANCEL_BUTTON_LABEL,
+  DEFAULT_THEME,
+  DOCUMENT,
+  EMAIL_LABEL,
+  EMAIL_PLACEHOLDER,
+  FORM_TITLE,
+  MESSAGE_LABEL,
+  MESSAGE_PLACEHOLDER,
+  NAME_LABEL,
+  NAME_PLACEHOLDER,
+  SUBMIT_BUTTON_LABEL,
+  SUCCESS_MESSAGE_TEXT,
+} from '../constants';
+import type { IFeedbackModalIntegration } from '../modal/integration';
+import type { IFeedbackScreenshotIntegration } from '../screenshot/integration';
+import type {
+  Dialog,
+  FeedbackInternalOptions,
+  OptionalFeedbackConfiguration,
+  OverrideFeedbackConfiguration,
+} from '../types';
+import { DEBUG_BUILD } from '../util/debug-build';
+import { isScreenshotSupported } from '../util/isScreenshotSupported';
+import { mergeOptions } from '../util/mergeOptions';
+import { Actor } from './components/Actor';
+import { createMainStyles } from './createMainStyles';
+import { sendFeedback } from './sendFeedback';
+
+type Unsubscribe = () => void;
+
+interface PublicFeedbackIntegration {
+  attachTo: (el: Element | string, optionOverrides: OverrideFeedbackConfiguration) => () => void;
+  createWidget: (optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean }) => Promise<Dialog>;
+  getWidget: () => Dialog | null;
+  remove: () => void;
+  openDialog: () => void;
+  closeDialog: () => void;
+  removeWidget: () => void;
+}
+export type IFeedbackIntegration = IntegrationFnResult & PublicFeedbackIntegration;
+
+export const _feedbackIntegration = (({
+  // FeedbackGeneralConfiguration
+  id = 'sentry-feedback',
+  showBranding = true,
+  autoInject = true,
+  showEmail = true,
+  showName = true,
+  showScreenshot = true,
+  useSentryUser = {
+    email: 'email',
+    name: 'username',
+  },
+  isNameRequired = false,
+  isEmailRequired = false,
+
+  // FeedbackThemeConfiguration
+  colorScheme = 'system',
+  themeLight,
+  themeDark,
+
+  // FeedbackTextConfiguration
+  buttonLabel = ACTOR_LABEL,
+  cancelButtonLabel = CANCEL_BUTTON_LABEL,
+  submitButtonLabel = SUBMIT_BUTTON_LABEL,
+  formTitle = FORM_TITLE,
+  emailLabel = EMAIL_LABEL,
+  emailPlaceholder = EMAIL_PLACEHOLDER,
+  messageLabel = MESSAGE_LABEL,
+  messagePlaceholder = MESSAGE_PLACEHOLDER,
+  nameLabel = NAME_LABEL,
+  namePlaceholder = NAME_PLACEHOLDER,
+  successMessageText = SUCCESS_MESSAGE_TEXT,
+
+  // FeedbackCallbacks
+  onFormOpen,
+  onFormClose,
+  onSubmitSuccess,
+  onSubmitError,
+  onFormSubmitted,
+}: OptionalFeedbackConfiguration = {}) => {
+  const _options = {
+    id,
+    autoInject,
+    showBranding,
+    isEmailRequired,
+    isNameRequired,
+    showEmail,
+    showName,
+    showScreenshot,
+    useSentryUser,
+
+    colorScheme,
+    themeDark: {
+      ...DEFAULT_THEME.dark,
+      ...themeDark,
+    },
+    themeLight: {
+      ...DEFAULT_THEME.light,
+      ...themeLight,
+    },
+
+    buttonLabel,
+    cancelButtonLabel,
+    submitButtonLabel,
+    formTitle,
+    emailLabel,
+    emailPlaceholder,
+    messageLabel,
+    messagePlaceholder,
+    nameLabel,
+    namePlaceholder,
+    successMessageText,
+
+    onFormClose,
+    onFormOpen,
+    onSubmitError,
+    onSubmitSuccess,
+    onFormSubmitted,
+  };
+
+  let _shadow: ShadowRoot | null = null;
+  let _subscriptions: Unsubscribe[] = [];
+
+  /**
+   * Get the shadow root where we will append css
+   */
+  const _createShadow = (options: FeedbackInternalOptions): ShadowRoot => {
+    if (!_shadow) {
+      const host = DOCUMENT.createElement('div');
+      host.id = String(options.id);
+      DOCUMENT.body.appendChild(host);
+
+      _shadow = host.attachShadow({ mode: 'open' });
+      _shadow.appendChild(createMainStyles(options.colorScheme, options));
+    }
+    return _shadow as ShadowRoot;
+  };
+
+  const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<Dialog> => {
+    const client = getClient(); // TODO: getClient<BrowserClient>()
+    if (!client) {
+      throw new Error('Sentry Client is not initialized correctly');
+    }
+    const modalIntegration = client.getIntegrationByName<IFeedbackModalIntegration>('FeedbackModal');
+    const screenshotIntegration = client.getIntegrationByName<IFeedbackScreenshotIntegration>('FeedbackScreenshot');
+    const screenshotIsSupported = isScreenshotSupported();
+
+    // START TEMP: Error messages
+    if (!modalIntegration && showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Modal & Screenshot integrations is not yet implemented');
+    } else if (!modalIntegration) {
+      throw new Error('Async loading of Feedback Modal is not yet implemented');
+    } else if (showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Screenshot integration is not yet implemented');
+    }
+    // END TEMP
+
+    if (!modalIntegration) {
+      // TODO: load modalIntegration
+      throw new Error('Not implemented yet');
+    }
+
+    if (showScreenshot && !screenshotIntegration && screenshotIsSupported) {
+      // TODO: load screenshotIntegration
+      throw new Error('Not implemented yet');
+    }
+
+    return modalIntegration.createDialog({
+      options,
+      screenshotIntegration: screenshotIsSupported ? screenshotIntegration : undefined,
+      sendFeedback,
+      shadow: _createShadow(options),
+    });
+  };
+
+  const attachTo = (el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): Unsubscribe => {
+    const mergedOptions = mergeOptions(_options, optionOverrides);
+
+    const targetEl =
+      typeof el === 'string' ? DOCUMENT.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
+
+    if (!targetEl) {
+      DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
+      throw new Error('Unable to attach to target element');
+    }
+
+    let dialog: Dialog | null = null;
+    const handleClick = async (): Promise<void> => {
+      if (!dialog) {
+        dialog = await _loadAndRenderDialog({
+          ...mergedOptions,
+          onFormClose: () => {
+            dialog && dialog.close();
+            mergedOptions.onFormClose && mergedOptions.onFormClose();
+          },
+          onFormSubmitted: () => {
+            dialog && dialog.removeFromDom();
+            mergedOptions.onFormSubmitted && mergedOptions.onFormSubmitted();
+          },
+        });
+      }
+      dialog.appendToDom();
+      dialog.open();
+    };
+    targetEl.addEventListener('click', handleClick);
+    const unsubscribe = (): void => {
+      _subscriptions = _subscriptions.filter(sub => sub !== unsubscribe);
+      dialog && dialog.removeFromDom();
+      dialog = null;
+      targetEl.removeEventListener('click', handleClick);
+    };
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  const autoInjectActor = (): void => {
+    const shadow = _createShadow(_options);
+    const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
+    const mergedOptions = mergeOptions(_options, {
+      onFormOpen() {
+        actor.removeFromDom();
+      },
+      onFormClose() {
+        actor.appendToDom();
+      },
+      onFormSubmitted() {
+        actor.appendToDom();
+      },
+    });
+    attachTo(actor.el, mergedOptions);
+
+    actor.appendToDom();
+  };
+
+  return {
+    name: 'Feedback',
+    setupOnce() {
+      if (!isBrowser() || !_options.autoInject) {
+        return;
+      }
+
+      autoInjectActor();
+    },
+
+    /**
+     * Adds click listener to the element to open a feedback dialog
+     *
+     * The returned function can be used to remove the click listener
+     */
+    attachTo,
+
+    /**
+     * Creates a new widget. Accepts partial options to override any options passed to constructor.
+     */
+    async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<Dialog> {
+      return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
+    },
+
+    /**
+     * Removes the Feedback integration (including host, shadow DOM, and all widgets)
+     */
+    remove(): void {
+      if (_shadow) {
+        _shadow.parentElement && _shadow.parentElement.remove();
+        _shadow = null;
+      }
+      // Remove any lingering subscriptions
+      _subscriptions.forEach(sub => sub());
+      _subscriptions = [];
+    },
+  };
+}) satisfies IntegrationFn;
+
+export const feedbackIntegration = defineIntegration(_feedbackIntegration);
diff --git a/packages/feedback/test/utils/mockSdk.ts b/packages/feedback/src/core/mockSdk.ts
similarity index 64%
rename from packages/feedback/test/utils/mockSdk.ts
rename to packages/feedback/src/core/mockSdk.ts
index c6afbc018317..cb9b2a982397 100644
--- a/packages/feedback/test/utils/mockSdk.ts
+++ b/packages/feedback/src/core/mockSdk.ts
@@ -1,16 +1,16 @@
 import type { Envelope, Transport, TransportMakeRequestResponse } from '@sentry/types';
 
-import type { TestClientOptions } from '../utils/TestClient';
-import { getDefaultClientOptions, init } from '../utils/TestClient';
+import type { TestClientOptions } from './TestClient';
+import { getDefaultClientOptions, init } from './TestClient';
 
 export interface MockSdkParams {
   sentryOptions?: Partial<TestClientOptions>;
 }
 
 class MockTransport implements Transport {
-  send: (request: Envelope) => PromiseLike<TransportMakeRequestResponse>;
+  public send: (request: Envelope) => PromiseLike<TransportMakeRequestResponse>;
 
-  constructor() {
+  public constructor() {
     this.send = jest.fn(async () => {
       return {
         statusCode: 200,
@@ -18,27 +18,30 @@ class MockTransport implements Transport {
     });
   }
 
-  async flush() {
+  public async flush(): Promise<boolean> {
     return true;
   }
-  async sendEvent(_e: Event) {
+  public async sendEvent(_e: Event): Promise<unknown> {
     return {
       status: 'skipped',
       event: 'ok',
       type: 'transaction',
     };
   }
-  async sendSession() {
+  public async sendSession(): Promise<void> {
     return;
   }
-  async recordLostEvent() {
+  public async recordLostEvent(): Promise<void> {
     return;
   }
-  async close() {
+  public async close(): Promise<void> {
     return;
   }
 }
 
+/**
+ *
+ */
 export async function mockSdk({ sentryOptions }: MockSdkParams = {}): Promise<void> {
   init({
     ...getDefaultClientOptions(),
diff --git a/packages/feedback/test/sendFeedback.test.ts b/packages/feedback/src/core/sendFeedback.test.ts
similarity index 92%
rename from packages/feedback/test/sendFeedback.test.ts
rename to packages/feedback/src/core/sendFeedback.test.ts
index e7c836527089..1b0ad480ca4e 100644
--- a/packages/feedback/test/sendFeedback.test.ts
+++ b/packages/feedback/src/core/sendFeedback.test.ts
@@ -1,7 +1,7 @@
 import { getClient } from '@sentry/core';
 
-import { sendFeedback } from '../src/sendFeedback';
-import { mockSdk } from './utils/mockSdk';
+import { mockSdk } from './mockSdk';
+import { sendFeedback } from './sendFeedback';
 
 describe('sendFeedback', () => {
   it('sends feedback', async () => {
diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/core/sendFeedback.ts
similarity index 59%
rename from packages/feedback/src/util/sendFeedbackRequest.ts
rename to packages/feedback/src/core/sendFeedback.ts
index 341611d94085..f3310303082a 100644
--- a/packages/feedback/src/util/sendFeedbackRequest.ts
+++ b/packages/feedback/src/core/sendFeedback.ts
@@ -1,24 +1,27 @@
-import { createEventEnvelope, getClient, withScope } from '@sentry/core';
+import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core';
 import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
-import { resolvedSyncPromise } from '@sentry/utils';
-
+import { getLocationHref } from '@sentry/utils';
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { SendFeedbackData, SendFeedbackOptions } from '../types';
-import { prepareFeedbackEvent } from './prepareFeedbackEvent';
+import type { SendFeedbackOptions, SendFeedbackParams } from '../types';
+import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
 
 /**
- * Send feedback using transport
+ * Public API to send a Feedback item to Sentry
  */
-export async function sendFeedbackRequest(
-  { feedback: { message, email, name, source, url } }: SendFeedbackData,
+export async function sendFeedback(
+  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ): Promise<TransportMakeRequestResponse> {
+  if (!message) {
+    throw new Error('Unable to submit feedback with empty message');
+  }
+
   const client = getClient();
   const transport = client && client.getTransport();
   const dsn = client && client.getDsn();
 
   if (!client || !transport || !dsn) {
-    return resolvedSyncPromise({});
+    throw new Error('Invalid Sentry client');
   }
 
   const baseEvent: FeedbackEvent = {
@@ -48,18 +51,39 @@ export async function sendFeedbackRequest(
       event: baseEvent,
     });
 
-    if (!feedbackEvent) {
-      return resolvedSyncPromise({});
+    if (client.emit) {
+      client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
     }
 
-    client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
-
-    const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
+    try {
+      const response = await transport.send(
+        createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel),
+      );
+
+      if (attachments && attachments.length) {
+        // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
+        await transport.send(
+          createAttachmentEnvelope(
+            feedbackEvent,
+            attachments,
+            dsn,
+            client.getOptions()._metadata,
+            client.getOptions().tunnel,
+          ),
+        );
+      }
 
-    let response: TransportMakeRequestResponse;
+      // Require valid status codes, otherwise can assume feedback was not sent successfully
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        if (response.statusCode === 0) {
+          throw new Error(
+            'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
+          );
+        }
+        throw new Error('Unable to send Feedback. Invalid response from server.');
+      }
 
-    try {
-      response = await transport.send(envelope);
+      return response;
     } catch (err) {
       const error = new Error('Unable to send Feedback');
 
@@ -72,13 +96,6 @@ export async function sendFeedbackRequest(
       }
       throw error;
     }
-
-    // Require valid status codes, otherwise can assume feedback was not sent successfully
-    if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
-      throw new Error('Unable to send Feedback');
-    }
-
-    return response;
   });
 }
 
diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts
index 9d14c45ab186..e8233ec2455e 100644
--- a/packages/feedback/src/index.ts
+++ b/packages/feedback/src/index.ts
@@ -1,2 +1,7 @@
-export { sendFeedback } from './sendFeedback';
-export { feedbackIntegration } from './integration';
+export { sendFeedback } from './core/sendFeedback';
+export { feedbackIntegration } from './core/integration';
+export { feedbackModalIntegration } from './modal/integration';
+export { feedbackScreenshotIntegration } from './screenshot/integration';
+
+export type { OptionalFeedbackConfiguration } from './types';
+export type { IFeedbackIntegration } from './core/integration';
diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts
deleted file mode 100644
index 91a5da323212..000000000000
--- a/packages/feedback/src/integration.ts
+++ /dev/null
@@ -1,385 +0,0 @@
-import type { Integration, IntegrationFn } from '@sentry/types';
-import { isBrowser, logger } from '@sentry/utils';
-
-import {
-  ACTOR_LABEL,
-  CANCEL_BUTTON_LABEL,
-  DEFAULT_THEME,
-  EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
-  FORM_TITLE,
-  MESSAGE_LABEL,
-  MESSAGE_PLACEHOLDER,
-  NAME_LABEL,
-  NAME_PLACEHOLDER,
-  SUBMIT_BUTTON_LABEL,
-  SUCCESS_MESSAGE_TEXT,
-  WINDOW,
-} from './constants';
-import { DEBUG_BUILD } from './debug-build';
-import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
-import { mergeOptions } from './util/mergeOptions';
-import { createActorStyles } from './widget/Actor.css';
-import { createShadowHost } from './widget/createShadowHost';
-import { createWidget } from './widget/createWidget';
-
-const doc = WINDOW.document;
-
-/**
- * Feedback integration. When added as an integration to the SDK, it will
- * inject a button in the bottom-right corner of the window that opens a
- * feedback modal when clicked.
- */
-export const feedbackIntegration = ((options?: OptionalFeedbackConfiguration) => {
-  return new Feedback(options);
-}) satisfies IntegrationFn;
-
-// TODO: Rewrite this to be functional integration
-class Feedback implements Integration {
-  /**
-   * @inheritDoc
-   */
-  public static id: string = 'Feedback';
-
-  /**
-   * @inheritDoc
-   */
-  public name: string;
-
-  /**
-   * Feedback configuration options
-   */
-  public options: FeedbackInternalOptions;
-
-  /**
-   * Reference to widget element that is created when autoInject is true
-   */
-  private _widget: FeedbackWidget | null;
-
-  /**
-   * List of all widgets that are created from the integration
-   */
-  private _widgets: Set<FeedbackWidget>;
-
-  /**
-   * Reference to the host element where widget is inserted
-   */
-  private _host: HTMLDivElement | null;
-
-  /**
-   * Refernce to Shadow DOM root
-   */
-  private _shadow: ShadowRoot | null;
-
-  /**
-   * Tracks if actor styles have ever been inserted into shadow DOM
-   */
-  private _hasInsertedActorStyles: boolean;
-
-  public constructor({
-    autoInject = true,
-    id = 'sentry-feedback',
-    isEmailRequired = false,
-    isNameRequired = false,
-    showBranding = true,
-    showEmail = true,
-    showName = true,
-    useSentryUser = {
-      email: 'email',
-      name: 'username',
-    },
-
-    themeDark,
-    themeLight,
-    colorScheme = 'system',
-
-    buttonLabel = ACTOR_LABEL,
-    cancelButtonLabel = CANCEL_BUTTON_LABEL,
-    submitButtonLabel = SUBMIT_BUTTON_LABEL,
-    formTitle = FORM_TITLE,
-    emailPlaceholder = EMAIL_PLACEHOLDER,
-    emailLabel = EMAIL_LABEL,
-    messagePlaceholder = MESSAGE_PLACEHOLDER,
-    messageLabel = MESSAGE_LABEL,
-    namePlaceholder = NAME_PLACEHOLDER,
-    nameLabel = NAME_LABEL,
-    successMessageText = SUCCESS_MESSAGE_TEXT,
-
-    onFormClose,
-    onFormOpen,
-    onSubmitError,
-    onSubmitSuccess,
-  }: OptionalFeedbackConfiguration = {}) {
-    this.name = Feedback.id;
-
-    // tsc fails if these are not initialized explicitly constructor, e.g. can't call `_initialize()`
-    this._host = null;
-    this._shadow = null;
-    this._widget = null;
-    this._widgets = new Set();
-    this._hasInsertedActorStyles = false;
-
-    this.options = {
-      autoInject,
-      showBranding,
-      id,
-      isEmailRequired,
-      isNameRequired,
-      showEmail,
-      showName,
-      useSentryUser,
-
-      colorScheme,
-      themeDark: {
-        ...DEFAULT_THEME.dark,
-        ...themeDark,
-      },
-      themeLight: {
-        ...DEFAULT_THEME.light,
-        ...themeLight,
-      },
-
-      buttonLabel,
-      cancelButtonLabel,
-      submitButtonLabel,
-      formTitle,
-      emailLabel,
-      emailPlaceholder,
-      messageLabel,
-      messagePlaceholder,
-      nameLabel,
-      namePlaceholder,
-      successMessageText,
-
-      onFormClose,
-      onFormOpen,
-      onSubmitError,
-      onSubmitSuccess,
-    };
-  }
-
-  /**
-   * Setup and initialize feedback container
-   */
-  public setupOnce(): void {
-    if (!isBrowser()) {
-      return;
-    }
-
-    try {
-      this._cleanupWidgetIfExists();
-
-      const { autoInject } = this.options;
-
-      if (!autoInject) {
-        // Nothing to do here
-        return;
-      }
-
-      this._createWidget(this.options);
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-    }
-  }
-
-  /**
-   * Allows user to open the dialog box. Creates a new widget if
-   * `autoInject` was false, otherwise re-uses the default widget that was
-   * created during initialization of the integration.
-   */
-  public openDialog(): void {
-    if (!this._widget) {
-      this._createWidget({ ...this.options, shouldCreateActor: false });
-    }
-
-    if (!this._widget) {
-      return;
-    }
-
-    this._widget.openDialog();
-  }
-
-  /**
-   * Closes the dialog for the default widget, if it exists
-   */
-  public closeDialog(): void {
-    if (!this._widget) {
-      // Nothing to do if widget does not exist
-      return;
-    }
-
-    this._widget.closeDialog();
-  }
-
-  /**
-   * Adds click listener to attached element to open a feedback dialog
-   */
-  public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
-    try {
-      const options = mergeOptions(this.options, optionOverrides || {});
-
-      return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
-        const targetEl =
-          typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
-
-        if (!targetEl) {
-          DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
-          return null;
-        }
-
-        const widget = createWidget({ shadow, options, attachTo: targetEl });
-        this._widgets.add(widget);
-
-        if (!this._widget) {
-          this._widget = widget;
-        }
-
-        return widget;
-      });
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-      return null;
-    }
-  }
-
-  /**
-   * Creates a new widget. Accepts partial options to override any options passed to constructor.
-   */
-  public createWidget(
-    optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
-  ): FeedbackWidget | null {
-    try {
-      return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-      return null;
-    }
-  }
-
-  /**
-   * Removes a single widget
-   */
-  public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
-    if (!widget) {
-      return false;
-    }
-
-    try {
-      if (this._widgets.has(widget)) {
-        widget.removeActor();
-        widget.removeDialog();
-        this._widgets.delete(widget);
-
-        if (this._widget === widget) {
-          // TODO: is more clean-up needed? e.g. call remove()
-          this._widget = null;
-        }
-
-        return true;
-      }
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-    }
-
-    return false;
-  }
-
-  /**
-   * Returns the default (first-created) widget
-   */
-  public getWidget(): FeedbackWidget | null {
-    return this._widget;
-  }
-
-  /**
-   * Removes the Feedback integration (including host, shadow DOM, and all widgets)
-   */
-  public remove(): void {
-    if (this._host) {
-      this._host.remove();
-    }
-    this._initialize();
-  }
-
-  /**
-   * Initializes values of protected properties
-   */
-  protected _initialize(): void {
-    this._host = null;
-    this._shadow = null;
-    this._widget = null;
-    this._widgets = new Set();
-    this._hasInsertedActorStyles = false;
-  }
-
-  /**
-   * Clean-up the widget if it already exists in the DOM. This shouldn't happen
-   * in prod, but can happen in development with hot module reloading.
-   */
-  protected _cleanupWidgetIfExists(): void {
-    if (this._host) {
-      this.remove();
-    }
-    const existingFeedback = doc.querySelector(`#${this.options.id}`);
-    if (existingFeedback) {
-      existingFeedback.remove();
-    }
-  }
-
-  /**
-   * Creates a new widget, after ensuring shadow DOM exists
-   */
-  protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
-    return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
-      const widget = createWidget({ shadow, options });
-
-      if (!this._hasInsertedActorStyles && widget.actor) {
-        shadow.appendChild(createActorStyles(doc));
-        this._hasInsertedActorStyles = true;
-      }
-
-      this._widgets.add(widget);
-
-      if (!this._widget) {
-        this._widget = widget;
-      }
-
-      return widget;
-    });
-  }
-
-  /**
-   * Ensures that shadow DOM exists and is added to the DOM
-   */
-  protected _ensureShadowHost<T>(
-    options: FeedbackInternalOptions,
-    cb: (createShadowHostResult: ReturnType<typeof createShadowHost>) => T,
-  ): T | null {
-    let needsAppendHost = false;
-
-    // Don't create if it already exists
-    if (!this._shadow || !this._host) {
-      const { id, colorScheme, themeLight, themeDark } = options;
-      const { shadow, host } = createShadowHost({
-        id,
-        colorScheme,
-        themeLight,
-        themeDark,
-      });
-      this._shadow = shadow;
-      this._host = host;
-      needsAppendHost = true;
-    }
-
-    // set data attribute on host for different themes
-    this._host.dataset.sentryFeedbackColorscheme = options.colorScheme;
-
-    const result = cb({ shadow: this._shadow, host: this._host });
-
-    if (needsAppendHost) {
-      doc.body.appendChild(this._host);
-    }
-
-    return result;
-  }
-}
diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
similarity index 85%
rename from packages/feedback/src/widget/Dialog.css.ts
rename to packages/feedback/src/modal/components/Dialog.css.ts
index b3924f00524a..4d5fe338871b 100644
--- a/packages/feedback/src/widget/Dialog.css.ts
+++ b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -1,8 +1,10 @@
+import { DOCUMENT } from '../../constants';
+
 /**
  * Creates <style> element for widget dialog
  */
-export function createDialogStyles(d: Document): HTMLStyleElement {
-  const style = d.createElement('style');
+export function createDialogStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
 
   style.textContent = `
 .dialog {
@@ -42,14 +44,20 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   background-color: var(--background);
   color: var(--foreground);
 
-  width: 320px;
   max-width: 100%;
   max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
+  gap: 16px;
   box-shadow: var(--box-shadow);
   transition: transform 0.2s ease-in-out;
   transform: translate(0, 0) scale(1);
+
+  padding: 24px;
+}
+.dialog__content-fullscreen {
+  top: 16px;
+  left: 16px;
 }
 
 .dialog__header {
@@ -58,9 +66,8 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   justify-content: space-between;
   font-size: 20px;
   font-weight: 600;
-  padding: 24px 24px 0 24px;
   margin: 0;
-  margin-bottom: 16px;
+
 }
 
 .brand-link {
@@ -69,25 +76,31 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 
 .error {
   color: var(--error);
-  margin-bottom: 16px;
 }
 
 .form {
-  display: grid;
+  display: flex;
+  overflow: auto;
+  flex-direction: row;
+  gap: 16px;
+  flex: 1 0;
+}
+
+.form__right {
+  width: 272px;
+  display: flex;
   overflow: auto;
   flex-direction: column;
+  justify-content: space-between;
   gap: 16px;
-  padding: 0 24px 24px;
+  flex-shrink: 0;
 }
 
+
 .form__error-container {
   color: var(--error);
 }
 
-.form__error-container--hidden {
-  display: none;
-}
-
 .form__label {
   display: flex;
   flex-direction: column;
@@ -176,6 +189,13 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 
 .success-message {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
   background-color: var(--background);
   border: var(--border);
   border-radius: var(--border-radius);
@@ -191,6 +211,10 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   cursor: default;
 }
 
+.success-icon {
+  display: flex;
+}
+
 .success-icon path {
   fill: var(--success);
 }
diff --git a/packages/feedback/src/modal/components/DialogContainer.tsx b/packages/feedback/src/modal/components/DialogContainer.tsx
new file mode 100644
index 000000000000..9c178ea9de2d
--- /dev/null
+++ b/packages/feedback/src/modal/components/DialogContainer.tsx
@@ -0,0 +1,58 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants';
+import type { FeedbackFormData } from '../../types';
+import { DialogContent } from './DialogContent';
+import { DialogHeader } from './DialogHeader';
+import type { Props as HeaderProps } from './DialogHeader';
+import type { Props as FormProps } from './Form';
+import { Form } from './Form';
+import { SuccessIcon } from './SuccessIcon';
+
+interface Props extends HeaderProps, FormProps {
+  successMessageText: string;
+  onFormSubmitted: () => void;
+  open: boolean;
+}
+
+export function DialogComponent({ open, onFormSubmitted, successMessageText, ...props }: Props): VNode {
+  const successIconHtml = useMemo(() => ({ __html: SuccessIcon().outerHTML }), []);
+
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const handleOnSuccessClick = useCallback(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      setTimeoutId(null);
+    }
+    onFormSubmitted();
+  }, [timeoutId]);
+
+  const onSubmitSuccess = useCallback(
+    (data: FeedbackFormData) => {
+      props.onSubmitSuccess(data);
+      setTimeoutId(() => setTimeout(onFormSubmitted, SUCCESS_MESSAGE_TIMEOUT));
+    },
+    [onFormSubmitted],
+  );
+
+  return (
+    <Fragment>
+      {timeoutId ? (
+        <div class="success-message" onClick={handleOnSuccessClick}>
+          {successMessageText}
+          <span class="success-icon" dangerouslySetInnerHTML={successIconHtml} />
+        </div>
+      ) : (
+        <dialog class="dialog" onClick={props.onFormClose} open={open}>
+          <DialogContent>
+            <DialogHeader {...props} />
+            <Form {...props} onSubmitSuccess={onSubmitSuccess} />
+          </DialogContent>
+        </dialog>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/feedback/src/modal/components/DialogContent.tsx b/packages/feedback/src/modal/components/DialogContent.tsx
new file mode 100644
index 000000000000..0a8ebb54a990
--- /dev/null
+++ b/packages/feedback/src/modal/components/DialogContent.tsx
@@ -0,0 +1,21 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { ComponentChildren, VNode } from 'preact';
+
+export interface Props {
+  children: ComponentChildren;
+}
+
+export function DialogContent({ children }: Props): VNode {
+  return (
+    <div
+      class="dialog__content"
+      onClick={e => {
+        // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/feedback/src/modal/components/DialogHeader.tsx b/packages/feedback/src/modal/components/DialogHeader.tsx
new file mode 100644
index 000000000000..2af30b580b56
--- /dev/null
+++ b/packages/feedback/src/modal/components/DialogHeader.tsx
@@ -0,0 +1,32 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useMemo } from 'preact/hooks';
+import type { FeedbackInternalOptions } from '../../types';
+import type { Props as LogoProps } from './SentryLogo';
+import { SentryLogo } from './SentryLogo';
+
+export interface Props extends LogoProps {
+  formTitle: FeedbackInternalOptions['formTitle'];
+  showBranding: FeedbackInternalOptions['showBranding'];
+}
+
+export function DialogHeader({ colorScheme, formTitle, showBranding }: Props): VNode {
+  const logoHtml = useMemo(() => ({ __html: SentryLogo({ colorScheme }).outerHTML }), [colorScheme]);
+
+  return (
+    <h2 class="dialog__header">
+      {formTitle}
+      {showBranding ? (
+        <a
+          class="brand-link"
+          target="_blank"
+          href="https://sentry.io/welcome/"
+          title="Powered by Sentry"
+          rel="noopener noreferrer"
+          dangerouslySetInnerHTML={logoHtml}
+        />
+      ) : null}
+    </h2>
+  );
+}
diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
new file mode 100644
index 000000000000..0b2b1bb98fb1
--- /dev/null
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -0,0 +1,233 @@
+import { logger } from '@sentry/utils';
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { JSX, VNode } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { FEEDBACK_WIDGET_SOURCE } from '../../constants';
+import type {
+  FeedbackFormData,
+  FeedbackInternalOptions,
+  ScreenshotInput,
+  SendFeedbackOptions,
+  SendFeedbackParams,
+} from '../../types';
+import { DEBUG_BUILD } from '../../util/debug-build';
+import { getMissingFields } from '../../util/validate';
+
+export interface Props
+  extends Pick<
+    FeedbackInternalOptions,
+    | 'cancelButtonLabel'
+    | 'emailLabel'
+    | 'emailPlaceholder'
+    | 'isEmailRequired'
+    | 'isNameRequired'
+    | 'messageLabel'
+    | 'messagePlaceholder'
+    | 'nameLabel'
+    | 'namePlaceholder'
+    | 'showEmail'
+    | 'showName'
+    | 'submitButtonLabel'
+  > {
+  defaultEmail: string;
+  defaultName: string;
+  onFormClose: () => void;
+  onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void;
+  onSubmitSuccess: (data: FeedbackFormData) => void;
+  onSubmitError: (error: Error) => void;
+  screenshotInput: ScreenshotInput | undefined;
+}
+
+function retrieveStringValue(formData: FormData, key: string): string {
+  const value = formData.get(key);
+  if (typeof value === 'string') {
+    return value.trim();
+  }
+  return '';
+}
+
+export function Form({
+  cancelButtonLabel,
+  defaultEmail,
+  defaultName,
+  emailLabel,
+  emailPlaceholder,
+  isEmailRequired,
+  isNameRequired,
+  messageLabel,
+  messagePlaceholder,
+  nameLabel,
+  namePlaceholder,
+  onFormClose,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitError,
+  showEmail,
+  showName,
+  submitButtonLabel,
+  screenshotInput,
+}: Props): VNode {
+  // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
+  const [error, setError] = useState<null | string>(null);
+
+  const [showScreenshotInput, setShowScreenshotInput] = useState(false);
+  const ScreenshotInput = screenshotInput && screenshotInput.input;
+  const includeScreenshotValue = ScreenshotInput && showScreenshotInput;
+
+  const [screenshotError, setScreenshotError] = useState<null | Error>(null);
+  const onScreenshotError = useCallback((error: Error) => {
+    setScreenshotError(error);
+    setShowScreenshotInput(false);
+  }, []);
+
+  const hasAllRequiredFields = useCallback(
+    (data: FeedbackFormData) => {
+      const missingFields = getMissingFields(data, {
+        emailLabel,
+        isEmailRequired,
+        isNameRequired,
+        messageLabel,
+        nameLabel,
+      });
+
+      if (missingFields.length > 0) {
+        setError(`Please enter in the following required fields: ${missingFields.join(', ')}`);
+      } else {
+        setError(null);
+      }
+
+      return missingFields.length === 0;
+    },
+    [emailLabel, isEmailRequired, isNameRequired, messageLabel, nameLabel],
+  );
+
+  const handleSubmit = useCallback(
+    async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
+      try {
+        e.preventDefault();
+        if (!(e.target instanceof HTMLFormElement)) {
+          return;
+        }
+        const formData = new FormData(e.target);
+        const attachment = await (includeScreenshotValue ? screenshotInput.value() : undefined);
+        const data: FeedbackFormData = {
+          name: retrieveStringValue(formData, 'name'),
+          email: retrieveStringValue(formData, 'email'),
+          message: retrieveStringValue(formData, 'message'),
+          attachments: attachment ? [attachment] : undefined,
+        };
+        if (!hasAllRequiredFields(data)) {
+          return;
+        }
+        try {
+          await onSubmit({ ...data, source: FEEDBACK_WIDGET_SOURCE });
+          onSubmitSuccess(data);
+        } catch (error) {
+          DEBUG_BUILD && logger.error(error);
+          setError('There was a problem submitting feedback, please wait and try again.');
+          onSubmitError(error as Error);
+        }
+      } catch {
+        // pass
+      }
+    },
+    [includeScreenshotValue, onSubmitSuccess, onSubmitError],
+  );
+
+  return (
+    <form class="form" onSubmit={handleSubmit}>
+      {includeScreenshotValue ? <ScreenshotInput onError={onScreenshotError} /> : null}
+
+      <div class="form__right">
+        <div class="form__top">
+          {error ? <div class="form__error-container">{error}</div> : null}
+
+          {showName ? (
+            <label for="name" class="form__label">
+              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultName}
+                id="name"
+                name="name"
+                placeholder={namePlaceholder}
+                required={isNameRequired}
+                type="text"
+              />
+            </label>
+          ) : (
+            <input aria-hidden value={defaultName} name="name" type="hidden" />
+          )}
+
+          {showEmail ? (
+            <label for="email" class="form__label">
+              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultEmail}
+                id="email"
+                name="email"
+                placeholder={emailPlaceholder}
+                required={isEmailRequired}
+                type="text"
+              ></input>
+            </label>
+          ) : (
+            <input aria-hidden value={defaultEmail} name="email" type="hidden" />
+          )}
+
+          <label for="message" class="form__label">
+            <LabelText label={messageLabel} isRequired />
+            <textarea
+              autoFocus
+              class="form__input form__input--textarea"
+              id="message"
+              name="message"
+              placeholder={messagePlaceholder}
+              required={true}
+              rows={5}
+            />
+          </label>
+
+          {ScreenshotInput ? (
+            <label for="screenshot" class="form__label">
+              <span class="form__label__text">Screenshot</span>
+
+              <button
+                class="btn btn--default"
+                type="button"
+                onClick={() => {
+                  setScreenshotError(null);
+                  setShowScreenshotInput(prev => !prev);
+                }}
+              >
+                {showScreenshotInput ? 'Remove' : 'Add'}
+              </button>
+              {screenshotError ? <div class="form__error-container">{screenshotError.message}</div> : null}
+            </label>
+          ) : null}
+        </div>
+        <div class="form__bottom">
+          <div class="btn-group">
+            <button class="btn btn--primary" type="submit">
+              {submitButtonLabel}
+            </button>
+            <button class="btn btn--default" type="button" onClick={onFormClose}>
+              {cancelButtonLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+  return (
+    <span class="form__label__text">
+      {label}
+      {isRequired && <span class="form__label__text--required">(required)</span>}
+    </span>
+  );
+}
diff --git a/packages/feedback/src/widget/Icon.ts b/packages/feedback/src/modal/components/Icon.ts
similarity index 91%
rename from packages/feedback/src/widget/Icon.ts
rename to packages/feedback/src/modal/components/Icon.ts
index 29b2d25bee8d..93c1d3884c52 100644
--- a/packages/feedback/src/widget/Icon.ts
+++ b/packages/feedback/src/modal/components/Icon.ts
@@ -1,19 +1,15 @@
-import { WINDOW } from '../constants';
-import { setAttributesNS } from '../util/setAttributesNS';
+import { DOCUMENT } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
 
 const SIZE = 20;
 const XMLNS = 'http://www.w3.org/2000/svg';
 
-interface IconReturn {
-  el: SVGElement;
-}
-
 /**
  * Feedback Icon
  */
-export function Icon(): IconReturn {
+export function Icon(): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    WINDOW.document.createElementNS(XMLNS, tagName);
+    DOCUMENT.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
     class: 'feedback-icon',
     width: `${SIZE}`,
@@ -49,9 +45,5 @@ export function Icon(): IconReturn {
 
   svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
 
-  return {
-    get el() {
-      return svg;
-    },
-  };
+  return svg;
 }
diff --git a/packages/feedback/src/widget/Logo.ts b/packages/feedback/src/modal/components/SentryLogo.ts
similarity index 76%
rename from packages/feedback/src/widget/Logo.ts
rename to packages/feedback/src/modal/components/SentryLogo.ts
index 9e286a970961..1e32ad8efdcd 100644
--- a/packages/feedback/src/widget/Logo.ts
+++ b/packages/feedback/src/modal/components/SentryLogo.ts
@@ -1,21 +1,19 @@
-import { WINDOW } from '../constants';
-import type { FeedbackInternalOptions } from '../types';
-import { setAttributesNS } from '../util/setAttributesNS';
+import { DOCUMENT } from '../../constants';
+import type { FeedbackInternalOptions } from '../../types';
+import { setAttributesNS } from '../../util/setAttributesNS';
 
 const XMLNS = 'http://www.w3.org/2000/svg';
 
-interface IconReturn {
-  el: SVGElement;
-}
-
-type Props = Pick<FeedbackInternalOptions, 'colorScheme'>;
+export type Props = {
+  colorScheme: FeedbackInternalOptions['colorScheme'];
+};
 
 /**
  * Sentry Logo
  */
-export function Logo({ colorScheme }: Props): IconReturn {
+export function SentryLogo({ colorScheme }: Props): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    WINDOW.document.createElementNS(XMLNS, tagName);
+    DOCUMENT.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
     class: 'sentry-logo',
     width: '32',
@@ -51,9 +49,5 @@ export function Logo({ colorScheme }: Props): IconReturn {
   defs.append(style);
   svg.append(defs);
 
-  return {
-    get el() {
-      return svg;
-    },
-  };
+  return svg;
 }
diff --git a/packages/feedback/src/widget/SuccessIcon.ts b/packages/feedback/src/modal/components/SuccessIcon.ts
similarity index 91%
rename from packages/feedback/src/widget/SuccessIcon.ts
rename to packages/feedback/src/modal/components/SuccessIcon.ts
index 6092481672b9..fddd8c6fb941 100644
--- a/packages/feedback/src/widget/SuccessIcon.ts
+++ b/packages/feedback/src/modal/components/SuccessIcon.ts
@@ -1,22 +1,17 @@
-import { WINDOW } from '../constants';
-import { setAttributesNS } from '../util/setAttributesNS';
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
 
 const WIDTH = 16;
 const HEIGHT = 17;
 const XMLNS = 'http://www.w3.org/2000/svg';
 
-interface IconReturn {
-  el: SVGElement;
-}
-
 /**
  * Success Icon (checkmark)
  */
-export function SuccessIcon(): IconReturn {
+export function SuccessIcon(): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
     WINDOW.document.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'success-icon',
     width: `${WIDTH}`,
     height: `${HEIGHT}`,
     viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
@@ -55,9 +50,5 @@ export function SuccessIcon(): IconReturn {
 
   svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
 
-  return {
-    get el() {
-      return svg;
-    },
-  };
+  return svg;
 }
diff --git a/packages/feedback/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx
new file mode 100644
index 000000000000..d0c65389e006
--- /dev/null
+++ b/packages/feedback/src/modal/createDialog.tsx
@@ -0,0 +1,94 @@
+import { getCurrentScope } from '@sentry/core';
+import { h, render } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback';
+import type { IFeedbackScreenshotIntegration } from '../screenshot/integration';
+import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '../types';
+import { createDialogStyles } from './components/Dialog.css';
+import { DialogComponent } from './components/DialogContainer';
+
+interface Props {
+  options: FeedbackInternalOptions;
+  screenshotIntegration: IFeedbackScreenshotIntegration | undefined;
+  sendFeedback: typeof sendFeedbackFn;
+  shadow: ShadowRoot;
+}
+
+export function createDialog({ options, screenshotIntegration, sendFeedback, shadow }: Props): Dialog {
+  const userKey = options.useSentryUser;
+  const scope = getCurrentScope();
+  const user = scope && scope.getUser();
+
+  const el = DOCUMENT.createElement('div');
+  const style = createDialogStyles();
+
+  const dialog = {
+    get el() {
+      return el;
+    },
+    appendToDom(): void {
+      if (!shadow.contains(style) && !shadow.contains(el)) {
+        shadow.appendChild(style);
+        shadow.appendChild(el);
+      }
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+    open() {
+      renderContent(true);
+      options.onFormOpen && options.onFormOpen();
+    },
+    close() {
+      renderContent(false);
+    },
+  };
+
+  const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog);
+
+  const renderContent = (open: boolean): void => {
+    render(
+      <DialogComponent
+        screenshotInput={screenshotInput}
+        colorScheme={options.colorScheme}
+        showBranding={options.showBranding}
+        showName={options.showName || options.isNameRequired}
+        showEmail={options.showEmail || options.isEmailRequired}
+        isNameRequired={options.isNameRequired}
+        isEmailRequired={options.isEmailRequired}
+        formTitle={options.formTitle}
+        cancelButtonLabel={options.cancelButtonLabel}
+        submitButtonLabel={options.submitButtonLabel}
+        emailLabel={options.emailLabel}
+        emailPlaceholder={options.emailPlaceholder}
+        messageLabel={options.messageLabel}
+        messagePlaceholder={options.messagePlaceholder}
+        nameLabel={options.nameLabel}
+        namePlaceholder={options.namePlaceholder}
+        defaultName={(userKey && user && user[userKey.name]) || ''}
+        defaultEmail={(userKey && user && user[userKey.email]) || ''}
+        successMessageText={options.successMessageText}
+        onFormClose={() => {
+          renderContent(false);
+          options.onFormClose && options.onFormClose();
+        }}
+        onSubmit={sendFeedback}
+        onSubmitSuccess={(data: FeedbackFormData) => {
+          renderContent(false);
+          options.onSubmitSuccess && options.onSubmitSuccess(data);
+        }}
+        onSubmitError={(error: Error) => {
+          options.onSubmitError && options.onSubmitError(error);
+        }}
+        onFormSubmitted={() => {
+          options.onFormSubmitted && options.onFormSubmitted();
+        }}
+        open={open}
+      />,
+      el,
+    );
+  };
+
+  return dialog;
+}
diff --git a/packages/feedback/src/modal/integration.ts b/packages/feedback/src/modal/integration.ts
new file mode 100644
index 000000000000..67f2c327db5b
--- /dev/null
+++ b/packages/feedback/src/modal/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createDialog } from './createDialog';
+
+interface PublicFeedbackModalIntegration {
+  createDialog: typeof createDialog;
+}
+
+const INTEGRATION_NAME = 'FeedbackModal';
+
+export type IFeedbackModalIntegration = IntegrationFnResult & PublicFeedbackModalIntegration;
+
+export const _feedbackModalIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createDialog,
+  };
+}) satisfies IntegrationFn;
+
+export const feedbackModalIntegration = defineIntegration(_feedbackModalIntegration);
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
new file mode 100644
index 000000000000..d3753631ec1c
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -0,0 +1,330 @@
+// eslint-disable max-lines
+import type { ComponentType, VNode, h as hType } from 'preact';
+// biome-ignore lint: needed for preact
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { DOCUMENT, WINDOW } from '../../constants';
+import type { Dialog } from '../../types';
+import { createScreenshotInputStyles } from './ScreenshotInput.css';
+import { useTakeScreenshot } from './useTakeScreenshot';
+
+interface FactoryParams {
+  h: typeof hType;
+  imageBuffer: HTMLCanvasElement;
+  dialog: Dialog;
+}
+
+interface Props {
+  onError: (error: Error) => void;
+}
+
+interface Box {
+  startx: number;
+  starty: number;
+  endx: number;
+  endy: number;
+}
+
+interface Rect {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+
+const constructRect = (box: Box): Rect => {
+  return {
+    x: Math.min(box.startx, box.endx),
+    y: Math.min(box.starty, box.endy),
+    width: Math.abs(box.startx - box.endx),
+    height: Math.abs(box.starty - box.endy),
+  };
+};
+
+const getContainedSize = (img: HTMLCanvasElement): Box => {
+  const ratio = img.width / img.height;
+  let width = img.clientHeight * ratio;
+  let height = img.clientHeight;
+  if (width > img.clientWidth) {
+    width = img.clientWidth;
+    height = img.clientWidth / ratio;
+  }
+  const x = (img.clientWidth - width) / 2;
+  const y = (img.clientHeight - height) / 2;
+  return { startx: x, starty: y, endx: width + x, endy: height + y };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: FactoryParams): ComponentType<Props> {
+  return function ScreenshotEditor({ onError }: Props): VNode {
+    const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+
+    const canvasContainerRef = useRef<HTMLDivElement>(null);
+    const cropContainerRef = useRef<HTMLDivElement>(null);
+    const croppingRef = useRef<HTMLCanvasElement>(null);
+    const [croppingRect, setCroppingRect] = useState<Box>({ startx: 0, starty: 0, endx: 0, endy: 0 });
+    const [confirmCrop, setConfirmCrop] = useState(false);
+
+    useEffect(() => {
+      WINDOW.addEventListener('resize', resizeCropper, false);
+    }, []);
+
+    function resizeCropper(): void {
+      const cropper = croppingRef.current;
+      const imageDimensions = constructRect(getContainedSize(imageBuffer));
+      if (cropper) {
+        cropper.width = imageDimensions.width;
+        cropper.height = imageDimensions.height;
+      }
+
+      const cropButton = cropContainerRef.current;
+      if (cropButton) {
+        cropButton.style.width = `${imageDimensions.width}px`;
+        cropButton.style.height = `${imageDimensions.height}px`;
+        cropButton.style.left = `${imageDimensions.x}px`;
+        cropButton.style.top = `${imageDimensions.y}px`;
+      }
+
+      setCroppingRect({ startx: 0, starty: 0, endx: imageDimensions.width, endy: imageDimensions.height });
+    }
+
+    useEffect(() => {
+      const cropper = croppingRef.current;
+      if (!cropper) {
+        return;
+      }
+
+      const ctx = cropper.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+      const imageDimensions = constructRect(getContainedSize(imageBuffer));
+      const croppingBox = constructRect(croppingRect);
+
+      ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);
+
+      // draw gray overlay around the selection
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
+      ctx.clearRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
+
+      // draw selection border
+      ctx.strokeStyle = 'purple';
+      ctx.lineWidth = 3;
+      ctx.strokeRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
+    }, [croppingRect]);
+
+    function onGrabButton(e: Event, corner: string): void {
+      setConfirmCrop(false);
+      const handleMouseMove = makeHandleMouseMove(corner);
+      const handleMouseUp = (): void => {
+        croppingRef.current && croppingRef.current.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+        setConfirmCrop(true);
+      };
+
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+      croppingRef.current && croppingRef.current.addEventListener('mousemove', handleMouseMove);
+    }
+
+    const makeHandleMouseMove = useCallback((corner: string) => {
+      return function (e: MouseEvent) {
+        switch (corner) {
+          case 'topleft':
+            setCroppingRect(prev => ({
+              ...prev,
+              startx: Math.min(e.offsetX, prev.endx - 30),
+              starty: Math.min(e.offsetY, prev.endy - 30),
+            }));
+            break;
+          case 'topright':
+            setCroppingRect(prev => ({
+              ...prev,
+              endx: Math.max(e.offsetX, prev.startx + 30),
+              starty: Math.min(e.offsetY, prev.endy - 30),
+            }));
+            break;
+          case 'bottomleft':
+            setCroppingRect(prev => ({
+              ...prev,
+              startx: Math.min(e.offsetX, prev.endx - 30),
+              endy: Math.max(e.offsetY, prev.starty + 30),
+            }));
+            break;
+          case 'bottomright':
+            setCroppingRect(prev => ({
+              ...prev,
+              endx: Math.max(e.offsetX, prev.startx + 30),
+              endy: Math.max(e.offsetY, prev.starty + 30),
+            }));
+            break;
+        }
+      };
+    }, []);
+
+    function submit(): void {
+      const cutoutCanvas = DOCUMENT.createElement('canvas');
+      const imageBox = constructRect(getContainedSize(imageBuffer));
+      const croppingBox = constructRect(croppingRect);
+      cutoutCanvas.width = croppingBox.width;
+      cutoutCanvas.height = croppingBox.height;
+
+      const cutoutCtx = cutoutCanvas.getContext('2d');
+      if (cutoutCtx && imageBuffer) {
+        cutoutCtx.drawImage(
+          imageBuffer,
+          (croppingBox.x / imageBox.width) * imageBuffer.width,
+          (croppingBox.y / imageBox.height) * imageBuffer.height,
+          (croppingBox.width / imageBox.width) * imageBuffer.width,
+          (croppingBox.height / imageBox.height) * imageBuffer.height,
+          0,
+          0,
+          croppingBox.width,
+          croppingBox.height,
+        );
+      }
+
+      const ctx = imageBuffer.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
+        imageBuffer.width = cutoutCanvas.width;
+        imageBuffer.height = cutoutCanvas.height;
+        ctx.drawImage(cutoutCanvas, 0, 0);
+        resizeCropper();
+      }
+    }
+
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          const context = imageBuffer.getContext('2d');
+          if (!context) {
+            throw new Error('Could not get canvas context');
+          }
+          imageBuffer.width = imageSource.videoWidth;
+          imageBuffer.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
+        },
+        [imageBuffer],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+        const container = canvasContainerRef.current;
+        container && container.appendChild(imageBuffer);
+        resizeCropper();
+      }, []),
+      onError: useCallback(error => {
+        dialog.el.style.display = 'block';
+        onError(error);
+      }, []),
+    });
+
+    return (
+      <div class="editor">
+        <style dangerouslySetInnerHTML={styles} />
+        <div class="canvasContainer" ref={canvasContainerRef}>
+          <div class="cropButtonContainer" style={{ position: 'absolute' }} ref={cropContainerRef}>
+            <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
+            <CropCorner
+              left={croppingRect.startx}
+              top={croppingRect.starty}
+              onGrabButton={onGrabButton}
+              corner="topleft"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.endx - 30}
+              top={croppingRect.starty}
+              onGrabButton={onGrabButton}
+              corner="topright"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.startx}
+              top={croppingRect.endy - 30}
+              onGrabButton={onGrabButton}
+              corner="bottomleft"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.endx - 30}
+              top={croppingRect.endy - 30}
+              onGrabButton={onGrabButton}
+              corner="bottomright"
+            ></CropCorner>
+            <div
+              style={{
+                left: Math.max(0, croppingRect.endx - 191),
+                top: Math.max(0, croppingRect.endy + 8),
+                display: confirmCrop ? 'flex' : 'none',
+              }}
+              class="crop-btn-group"
+            >
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  if (croppingRef.current) {
+                    setCroppingRect({
+                      startx: 0,
+                      starty: 0,
+                      endx: croppingRef.current.width,
+                      endy: croppingRef.current.height,
+                    });
+                  }
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--default"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  submit();
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--primary"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+}
+
+function CropCorner({
+  top,
+  left,
+  corner,
+  onGrabButton,
+}: {
+  top: number;
+  left: number;
+  corner: string;
+  onGrabButton: (e: Event, corner: string) => void;
+}): VNode {
+  return (
+    <button
+      class="crop-btn"
+      style={{
+        top: top,
+        left: left,
+        borderTop: corner === 'topleft' || corner === 'topright' ? 'solid purple' : 'none',
+        borderLeft: corner === 'topleft' || corner === 'bottomleft' ? 'solid purple' : 'none',
+        borderRight: corner === 'topright' || corner === 'bottomright' ? 'solid purple' : 'none',
+        borderBottom: corner === 'bottomleft' || corner === 'bottomright' ? 'solid purple' : 'none',
+        borderWidth: '3px',
+      }}
+      onMouseDown={e => {
+        e.preventDefault();
+        onGrabButton(e, corner);
+      }}
+      onClick={e => {
+        e.preventDefault();
+      }}
+    ></button>
+  );
+}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
new file mode 100644
index 000000000000..6ac3d6750010
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -0,0 +1,73 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createScreenshotInputStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  const surface200 = '#FAF9FB';
+  const gray100 = '#F0ECF3';
+
+  style.textContent = `
+.dialog__content:has(.editor) {
+  top: var(--bottom);
+  left: var(--right);
+}
+
+.editor {
+  flex-grow: 1;
+
+  background-color: ${surface200};
+  background-image: repeating-linear-gradient(
+      -145deg,
+      transparent,
+      transparent 8px,
+      ${surface200} 8px,
+      ${surface200} 11px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 15px,
+      ${gray100} 15px,
+      ${gray100} 16px
+    );
+}
+
+.canvasContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.canvasContainer canvas {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.cropper {
+  width: 100%;
+  height: 100%;
+}
+
+.crop-btn-group {
+  padding: 8px;
+  gap: 8px;
+  border-radius: var(--form-content-border-radius);
+  background-color: var(--background);
+  width: 175px;
+  position: absolute;
+}
+
+.crop-btn {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  background: none;
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
new file mode 100644
index 000000000000..af59edfc9d42
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
@@ -0,0 +1,45 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useEffect } from 'preact/hooks';
+import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants';
+
+interface Props {
+  onBeforeScreenshot: () => void;
+  onScreenshot: (imageSource: HTMLVideoElement) => void;
+  onAfterScreenshot: () => void;
+  onError: (error: Error) => void;
+}
+
+export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props): void => {
+  useEffect(() => {
+    const takeScreenshot = async (): Promise<void> => {
+      onBeforeScreenshot();
+      const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
+        video: {
+          width: WINDOW.innerWidth,
+          height: WINDOW.innerHeight,
+        },
+        audio: false,
+        // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+        monitorTypeSurfaces: 'exclude',
+        preferCurrentTab: true,
+        selfBrowserSurface: 'include',
+        surfaceSwitching: 'exclude',
+      });
+
+      const video = DOCUMENT.createElement('video');
+      await new Promise<void>((resolve, reject) => {
+        video.srcObject = stream;
+        video.onloadedmetadata = () => {
+          onScreenshot(video);
+          stream.getTracks().forEach(track => track.stop());
+          resolve();
+        };
+        video.play().catch(reject);
+      });
+      onAfterScreenshot();
+    };
+
+    takeScreenshot().catch(onError);
+  }, []);
+};
diff --git a/packages/feedback/src/screenshot/createInput.ts b/packages/feedback/src/screenshot/createInput.ts
new file mode 100644
index 000000000000..679a82f5dfba
--- /dev/null
+++ b/packages/feedback/src/screenshot/createInput.ts
@@ -0,0 +1,33 @@
+import type { Attachment } from '@sentry/types';
+import type { h as hType } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { Dialog, ScreenshotInput } from '../types';
+import { makeScreenshotEditorComponent } from './components/ScreenshotEditor';
+
+/**
+ *
+ */
+export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput {
+  const imageBuffer = DOCUMENT.createElement('canvas');
+
+  return {
+    input: makeScreenshotEditorComponent({ h, imageBuffer, dialog }),
+
+    value: async () => {
+      const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
+        imageBuffer.toBlob(resolve, 'image/png');
+      });
+      if (blob) {
+        const data = new Uint8Array(await blob.arrayBuffer());
+        const attachment: Attachment = {
+          data,
+          filename: 'screenshot.png',
+          contentType: 'application/png',
+          // attachmentType?: string;
+        };
+        return attachment;
+      }
+      return;
+    },
+  };
+}
diff --git a/packages/feedback/src/screenshot/integration.ts b/packages/feedback/src/screenshot/integration.ts
new file mode 100644
index 000000000000..93fb5b605e04
--- /dev/null
+++ b/packages/feedback/src/screenshot/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createInput } from './createInput';
+
+interface PublicFeedbackScreenshotIntegration {
+  createInput: typeof createInput;
+}
+
+const INTEGRATION_NAME = 'FeedbackScreenshot';
+
+export type IFeedbackScreenshotIntegration = IntegrationFnResult & PublicFeedbackScreenshotIntegration;
+
+export const _feedbackScreenshotIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createInput,
+  };
+}) satisfies IntegrationFn;
+
+export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts
deleted file mode 100644
index ac60415d0462..000000000000
--- a/packages/feedback/src/sendFeedback.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { getLocationHref } from '@sentry/utils';
-
-import { FEEDBACK_API_SOURCE } from './constants';
-import type { SendFeedbackOptions } from './types';
-import { sendFeedbackRequest } from './util/sendFeedbackRequest';
-
-interface SendFeedbackParams {
-  message: string;
-  name?: string;
-  email?: string;
-  url?: string;
-  source?: string;
-}
-
-/**
- * Public API to send a Feedback item to Sentry
- */
-export function sendFeedback(
-  { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
-  options: SendFeedbackOptions = {},
-): ReturnType<typeof sendFeedbackRequest> {
-  if (!message) {
-    throw new Error('Unable to submit feedback with empty message');
-  }
-
-  return sendFeedbackRequest(
-    {
-      feedback: {
-        name,
-        email,
-        message,
-        url,
-        source,
-      },
-    },
-    options,
-  );
-}
diff --git a/packages/feedback/src/types/config.ts b/packages/feedback/src/types/config.ts
new file mode 100644
index 000000000000..0bcdcb0443cf
--- /dev/null
+++ b/packages/feedback/src/types/config.ts
@@ -0,0 +1,170 @@
+import type { FeedbackFormData } from './form';
+import type { FeedbackTheme } from './theme';
+
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
+  /**
+   * id to use for the main widget container (this will host the shadow DOM)
+   */
+  id: string;
+
+  /**
+   * Show the Sentry branding
+   */
+  showBranding: boolean;
+
+  /**
+   * Auto-inject default Feedback actor button to the DOM when integration is
+   * added.
+   */
+  autoInject: boolean;
+
+  /**
+   * Should the email field be required?
+   */
+  isEmailRequired: boolean;
+
+  /**
+   * Should the name field be required?
+   */
+  isNameRequired: boolean;
+
+  /**
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
+   */
+  showEmail: boolean;
+
+  /**
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
+   */
+  showName: boolean;
+
+  /**
+   * Should the screen shots field be included?
+   * Screen shots cannot be marked as required
+   */
+  showScreenshot: boolean;
+
+  /**
+   * Fill in email/name input fields with Sentry user context if it exists.
+   * The value of the email/name keys represent the properties of your user context.
+   */
+  useSentryUser: {
+    email: string;
+    name: string;
+  };
+}
+
+/**
+ * Theme-related configuration
+ */
+export interface FeedbackThemeConfiguration {
+  /**
+   * The colorscheme to use. "system" will choose the scheme based on the user's system settings
+   */
+  colorScheme: 'system' | 'light' | 'dark';
+
+  /**
+   * Light theme customization, will be merged with default theme values.
+   */
+  themeLight: FeedbackTheme;
+
+  /**
+   * Dark theme customization, will be merged with default theme values.
+   */
+  themeDark: FeedbackTheme;
+}
+
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
+  /**
+   * The label for the Feedback widget button that opens the dialog
+   */
+  buttonLabel: string;
+
+  /**
+   * The label for the Feedback form cancel button that closes dialog
+   */
+  cancelButtonLabel: string;
+
+  /**
+   * The label for the Feedback form submit button that sends feedback
+   */
+  submitButtonLabel: string;
+
+  /**
+   * The title of the Feedback form
+   */
+  formTitle: string;
+
+  /**
+   * Label for the email input
+   */
+  emailLabel: string;
+
+  /**
+   * Placeholder text for Feedback email input
+   */
+  emailPlaceholder: string;
+
+  /**
+   * Label for the message input
+   */
+  messageLabel: string;
+
+  /**
+   * Placeholder text for Feedback message input
+   */
+  messagePlaceholder: string;
+
+  /**
+   * Label for the name input
+   */
+  nameLabel: string;
+
+  /**
+   * Placeholder text for Feedback name input
+   */
+  namePlaceholder: string;
+
+  /**
+   * Message after feedback was sent successfully
+   */
+  successMessageText: string;
+}
+
+/**
+ * The public callbacks available for the feedback integration
+ */
+export interface FeedbackCallbacks {
+  /**
+   * Callback when form is opened
+   */
+  onFormOpen?: () => void;
+
+  /**
+   * Callback when form is closed and not submitted
+   */
+  onFormClose?: () => void;
+
+  /**
+   * Callback when feedback is successfully submitted
+   *
+   * After this you'll see a SuccessMessage on the screen for a moment.
+   */
+  onSubmitSuccess?: (data: FeedbackFormData) => void;
+
+  /**
+   * Callback when feedback is unsuccessfully submitted
+   */
+  onSubmitError?: (error: Error) => void;
+
+  /**
+   * Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed
+   */
+  onFormSubmitted?: () => void;
+}
diff --git a/packages/feedback/src/types/form.ts b/packages/feedback/src/types/form.ts
new file mode 100644
index 000000000000..d669ad7ea22e
--- /dev/null
+++ b/packages/feedback/src/types/form.ts
@@ -0,0 +1,8 @@
+import type { Attachment } from '@sentry/types';
+
+export type FeedbackFormData = {
+  name: string;
+  email: string;
+  message: string;
+  attachments: Attachment[] | undefined;
+};
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index c2642b54d09c..cee1bae6ab87 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -1,179 +1,19 @@
-import type { Primitive } from '@sentry/types';
-
-import type { ActorComponent } from '../widget/Actor';
-import type { DialogComponent } from '../widget/Dialog';
-
-export type SentryTags = { [key: string]: Primitive } | undefined;
-
-export interface SendFeedbackData {
-  feedback: {
-    message: string;
-    url: string;
-    email?: string;
-    replay_id?: string;
-    name?: string;
-    source?: string;
-  };
-}
-
-export interface SendFeedbackOptions {
-  /**
-   * Should include replay with the feedback?
-   */
-  includeReplay?: boolean;
-}
-
-/**
- * Feedback data expected from UI/form
- */
-export interface FeedbackFormData {
-  message: string;
-  email?: string;
-  name?: string;
-}
-
-/**
- * General feedback configuration
- */
-export interface FeedbackGeneralConfiguration {
-  /**
-   * id to use for the main widget container (this will host the shadow DOM)
-   */
-  id: string;
-
-  /**
-   * Show the Sentry branding
-   */
-  showBranding: boolean;
-
-  /**
-   * Auto-inject default Feedback actor button to the DOM when integration is
-   * added.
-   */
-  autoInject: boolean;
-
-  /**
-   * Should the email field be required?
-   */
-  isEmailRequired: boolean;
-
-  /**
-   * Should the name field be required?
-   */
-  isNameRequired: boolean;
-
-  /**
-   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
-   */
-  showEmail: boolean;
-
-  /**
-   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
-   */
-  showName: boolean;
-
-  /**
-   * Fill in email/name input fields with Sentry user context if it exists.
-   * The value of the email/name keys represent the properties of your user context.
-   */
-  useSentryUser: {
-    email: string;
-    name: string;
-  };
-}
-
-/**
- * Theme-related configuration
- */
-export interface FeedbackThemeConfiguration {
-  /**
-   * The colorscheme to use. "system" will choose the scheme based on the user's system settings
-   */
-  colorScheme: 'system' | 'light' | 'dark';
-
-  /**
-   * Light theme customization, will be merged with default theme values.
-   */
-  themeLight: FeedbackTheme;
-  /**
-   * Dark theme customization, will be merged with default theme values.
-   */
+import type { Attachment } from '@sentry/types';
+import type { ComponentType } from 'preact';
+import type {
+  FeedbackCallbacks,
+  FeedbackGeneralConfiguration,
+  FeedbackTextConfiguration,
+  FeedbackThemeConfiguration,
+} from './config';
+import type { FeedbackTheme } from './theme';
+
+export type { FeedbackFormData } from './form';
+
+export { FeedbackTheme };
+export interface FeedbackThemes {
   themeDark: FeedbackTheme;
-}
-
-/**
- * All of the different text labels that can be customized
- */
-export interface FeedbackTextConfiguration {
-  /**
-   * The label for the Feedback widget button that opens the dialog
-   */
-  buttonLabel: string;
-  /**
-   * The label for the Feedback form cancel button that closes dialog
-   */
-  cancelButtonLabel: string;
-  /**
-   * The label for the Feedback form submit button that sends feedback
-   */
-  submitButtonLabel: string;
-  /**
-   * The title of the Feedback form
-   */
-  formTitle: string;
-  /**
-   * Label for the email input
-   */
-  emailLabel: string;
-  /**
-   * Placeholder text for Feedback email input
-   */
-  emailPlaceholder: string;
-  /**
-   * Label for the message input
-   */
-  messageLabel: string;
-  /**
-   * Placeholder text for Feedback message input
-   */
-  messagePlaceholder: string;
-  /**
-   * Label for the name input
-   */
-  nameLabel: string;
-  /**
-   * Placeholder text for Feedback name input
-   */
-  namePlaceholder: string;
-  /**
-   * Message after feedback was sent successfully
-   */
-  successMessageText: string;
-}
-
-/**
- * The public callbacks available for the feedback integration
- */
-export interface FeedbackCallbacks {
-  /**
-   * Callback when form is closed
-   */
-  onFormClose?: () => void;
-
-  /**
-   * Callback when form is opened
-   */
-  onFormOpen?: () => void;
-
-  /**
-   * Callback when feedback is successfully submitted
-   */
-  onSubmitSuccess?: () => void;
-
-  /**
-   * Callback when feedback is unsuccessfully submitted
-   */
-  onSubmitError?: () => void;
+  themeLight: FeedbackTheme;
 }
 
 /**
@@ -187,6 +27,8 @@ export interface FeedbackInternalOptions
 
 /**
  * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
  */
 export interface OptionalFeedbackConfiguration
   extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
@@ -194,149 +36,66 @@ export interface OptionalFeedbackConfiguration
   themeDark?: Partial<FeedbackTheme>;
 }
 
-export interface FeedbackTheme {
-  /**
-   * Font family for widget
-   */
-  fontFamily: string;
-  /**
-   * Font size for widget
-   */
-  fontSize: string;
-  /**
-   * Background color for actor and dialog
-   */
-  background: string;
-  /**
-   * Background color on hover
-   */
-  backgroundHover: string;
-  /**
-   * Border styling for actor and dialog
-   */
-  border: string;
-  /**
-   * Border radius styling for actor
-   */
-  borderRadius: string;
-  /**
-   * Box shadow for actor and dialog
-   */
-  boxShadow: string;
-  /**
-   * Foreground color (i.e. text color)
-   */
-  foreground: string;
-  /**
-   * Success color
-   */
-  success: string;
-  /**
-   * Error color
-   */
-  error: string;
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
 
-  /**
-   * Background color for the submit button
-   */
-  submitBackground: string;
-  /**
-   * Background color when hovering over the submit button
-   */
-  submitBackgroundHover: string;
-  /**
-   * Border style for the submit button
-   */
-  submitBorder: string;
-  /**
-   * Border style for the submit button, in the focued state
-   */
-  submitOutlineFocus: string;
-  /**
-   * Foreground color for the submit button
-   */
-  submitForeground: string;
+export interface SendFeedbackParams {
+  message: string;
+  name?: string;
+  email?: string;
+  attachments?: Attachment[];
+  url?: string;
+  source?: string;
+}
 
+export interface SendFeedbackOptions {
   /**
-   * Foreground color for the submit button, in the hover state
+   * Should include replay with the feedback?
    */
-  submitForegroundHover: string;
+  includeReplay?: boolean;
+}
 
+export interface Dialog {
   /**
-   * Background color for the cancel button
-   */
-  cancelBackground: string;
-  /**
-   * Background color when hovering over the cancel button
+   * The HTMLElement that is containing all the form content
    */
-  cancelBackgroundHover: string;
-  /**
-   * Border style for the cancel button
-   */
-  cancelBorder: string;
-  /**
-   * Border style for the cancel button, in the focued state
-   */
-  cancelOutlineFocus: string;
-  /**
-   * Foreground color for the cancel button
-   */
-  cancelForeground: string;
-  /**
-   * Foreground color for the cancel button, in the hover state
-   */
-  cancelForegroundHover: string;
+  el: HTMLElement;
 
   /**
-   * Background color for form inputs
+   * Insert the Dialog into the Shadow DOM.
+   *
+   * The Dialog starts in the `closed` state where no inner HTML is rendered.
    */
-  inputBackground: string;
+  appendToDom: () => void;
+
   /**
-   * Foreground color for form inputs
+   * Remove the dialog from the Shadow DOM
    */
-  inputForeground: string;
+  removeFromDom: () => void;
+
   /**
-   * Border styles for form inputs
+   * Open/Show the dialog & form inside it
    */
-  inputBorder: string;
+  open: () => void;
+
   /**
-   * Border styles for form inputs when focused
+   * Close/Hide the dialog & form inside it
    */
-  inputOutlineFocus: string;
+  close: () => void;
+}
+
+export interface ScreenshotInput {
   /**
-   * Border radius for dialog
+   * The preact component
    */
-  formBorderRadius: string;
+  input: ComponentType<{ onError: (error: Error) => void }>;
+
   /**
-   * Border radius for form inputs
+   * The image/screenshot bytes
    */
-  formContentBorderRadius: string;
-}
-
-export interface FeedbackThemes {
-  dark: FeedbackTheme;
-  light: FeedbackTheme;
-}
-
-export interface FeedbackComponent<T extends HTMLElement> {
-  el: T | null;
-}
-
-/**
- * A widget consists of:
- *   - actor button [that opens dialog]
- *   - dialog + feedback form
- *   - shadow root?
- */
-export interface FeedbackWidget {
-  actor: ActorComponent | undefined;
-  dialog: DialogComponent | undefined;
-
-  showActor: () => void;
-  hideActor: () => void;
-  removeActor: () => void;
-
-  openDialog: () => void;
-  closeDialog: () => void;
-  removeDialog: () => void;
+  value: () => Promise<Attachment | undefined>;
 }
diff --git a/packages/feedback/src/types/theme.ts b/packages/feedback/src/types/theme.ts
new file mode 100644
index 000000000000..1bfb2e580a99
--- /dev/null
+++ b/packages/feedback/src/types/theme.ts
@@ -0,0 +1,118 @@
+export interface FeedbackTheme {
+  /**
+   * Font family for widget
+   */
+  fontFamily: string;
+  /**
+   * Font size for widget
+   */
+  fontSize: string;
+  /**
+   * Background color for actor and dialog
+   */
+  background: string;
+  /**
+   * Background color on hover
+   */
+  backgroundHover: string;
+  /**
+   * Border styling for actor and dialog
+   */
+  border: string;
+  /**
+   * Border radius styling for actor
+   */
+  borderRadius: string;
+  /**
+   * Box shadow for actor and dialog
+   */
+  boxShadow: string;
+  /**
+   * Foreground color (i.e. text color)
+   */
+  foreground: string;
+  /**
+   * Success color
+   */
+  success: string;
+  /**
+   * Error color
+   */
+  error: string;
+
+  /**
+   * Background color for the submit button
+   */
+  submitBackground: string;
+  /**
+   * Background color when hovering over the submit button
+   */
+  submitBackgroundHover: string;
+  /**
+   * Border style for the submit button
+   */
+  submitBorder: string;
+  /**
+   * Border style for the submit button, in the focued state
+   */
+  submitOutlineFocus: string;
+  /**
+   * Foreground color for the submit button
+   */
+  submitForeground: string;
+
+  /**
+   * Foreground color for the submit button, in the hover state
+   */
+  submitForegroundHover: string;
+
+  /**
+   * Background color for the cancel button
+   */
+  cancelBackground: string;
+  /**
+   * Background color when hovering over the cancel button
+   */
+  cancelBackgroundHover: string;
+  /**
+   * Border style for the cancel button
+   */
+  cancelBorder: string;
+  /**
+   * Border style for the cancel button, in the focued state
+   */
+  cancelOutlineFocus: string;
+  /**
+   * Foreground color for the cancel button
+   */
+  cancelForeground: string;
+  /**
+   * Foreground color for the cancel button, in the hover state
+   */
+  cancelForegroundHover: string;
+
+  /**
+   * Background color for form inputs
+   */
+  inputBackground: string;
+  /**
+   * Foreground color for form inputs
+   */
+  inputForeground: string;
+  /**
+   * Border styles for form inputs
+   */
+  inputBorder: string;
+  /**
+   * Border styles for form inputs when focused
+   */
+  inputOutlineFocus: string;
+  /**
+   * Border radius for dialog
+   */
+  formBorderRadius: string;
+  /**
+   * Border radius for form inputs
+   */
+  formContentBorderRadius: string;
+}
diff --git a/packages/feedback/src/debug-build.ts b/packages/feedback/src/util/debug-build.ts
similarity index 100%
rename from packages/feedback/src/debug-build.ts
rename to packages/feedback/src/util/debug-build.ts
diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts
deleted file mode 100644
index a3bf57fcbfa0..000000000000
--- a/packages/feedback/src/util/handleFeedbackSubmit.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { TransportMakeRequestResponse } from '@sentry/types';
-import { logger, resolvedSyncPromise } from '@sentry/utils';
-
-import { FEEDBACK_WIDGET_SOURCE } from '../constants';
-import { DEBUG_BUILD } from '../debug-build';
-import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, SendFeedbackOptions } from '../types';
-import type { DialogComponent } from '../widget/Dialog';
-
-/**
- * Handles UI behavior of dialog when feedback is submitted, calls
- * `sendFeedback` to send feedback.
- */
-export async function handleFeedbackSubmit(
-  dialog: DialogComponent | null,
-  feedback: FeedbackFormData,
-  options?: SendFeedbackOptions,
-): Promise<TransportMakeRequestResponse> {
-  if (!dialog) {
-    // Not sure when this would happen
-    return resolvedSyncPromise({});
-  }
-
-  const showFetchError = (): void => {
-    if (!dialog) {
-      return;
-    }
-    dialog.showError('There was a problem submitting feedback, please wait and try again.');
-  };
-
-  dialog.hideError();
-
-  try {
-    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options);
-
-    // Success!
-    return resp;
-  } catch (err) {
-    DEBUG_BUILD && logger.error(err);
-    showFetchError();
-  }
-
-  return resolvedSyncPromise({});
-}
diff --git a/packages/feedback/src/util/isScreenshotSupported.ts b/packages/feedback/src/util/isScreenshotSupported.ts
new file mode 100644
index 000000000000..d4e27468fcb0
--- /dev/null
+++ b/packages/feedback/src/util/isScreenshotSupported.ts
@@ -0,0 +1,17 @@
+import { NAVIGATOR } from '../constants';
+
+/**
+ * Mobile browsers do not support `mediaDevices.getDisplayMedia` even though they have the api implemented
+ * Instead they return things like `NotAllowedError` when called.
+ *
+ * It's simpler for us to browser sniff first, and avoid loading the integration if we can.
+ *
+ * https://stackoverflow.com/a/58879212
+ * https://stackoverflow.com/a/3540295
+ */
+export function isScreenshotSupported(): boolean {
+  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent)) {
+    return false;
+  }
+  return true;
+}
diff --git a/packages/feedback/src/util/mergeOptions.ts b/packages/feedback/src/util/mergeOptions.ts
index bfaae524c7f6..da7f4c271f14 100644
--- a/packages/feedback/src/util/mergeOptions.ts
+++ b/packages/feedback/src/util/mergeOptions.ts
@@ -1,4 +1,4 @@
-import type { FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
+import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
 
 /**
  * Quick and dirty deep merge for the Feedback integration options
@@ -10,6 +10,26 @@ export function mergeOptions(
   return {
     ...defaultOptions,
     ...optionOverrides,
+    onFormOpen: () => {
+      optionOverrides.onFormOpen && optionOverrides.onFormOpen();
+      defaultOptions.onFormOpen && defaultOptions.onFormOpen();
+    },
+    onFormClose: () => {
+      optionOverrides.onFormClose && optionOverrides.onFormClose();
+      defaultOptions.onFormClose && defaultOptions.onFormClose();
+    },
+    onSubmitSuccess: (data: FeedbackFormData) => {
+      optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);
+      defaultOptions.onSubmitSuccess && defaultOptions.onSubmitSuccess(data);
+    },
+    onSubmitError: (error: Error) => {
+      optionOverrides.onSubmitError && optionOverrides.onSubmitError(error);
+      defaultOptions.onSubmitError && defaultOptions.onSubmitError(error);
+    },
+    onFormSubmitted: () => {
+      optionOverrides.onFormSubmitted && optionOverrides.onFormSubmitted();
+      defaultOptions.onFormSubmitted && defaultOptions.onFormSubmitted();
+    },
     themeDark: {
       ...defaultOptions.themeDark,
       ...optionOverrides.themeDark,
diff --git a/packages/feedback/src/util/prepareFeedbackEvent.ts b/packages/feedback/src/util/prepareFeedbackEvent.ts
index 65a61085bda3..0d66d251c6ff 100644
--- a/packages/feedback/src/util/prepareFeedbackEvent.ts
+++ b/packages/feedback/src/util/prepareFeedbackEvent.ts
@@ -1,5 +1,4 @@
-import { getIsolationScope } from '@sentry/core';
-import { prepareEvent } from '@sentry/core';
+import { getIsolationScope, prepareEvent } from '@sentry/core';
 import type { Client, FeedbackEvent, Scope } from '@sentry/types';
 
 interface PrepareFeedbackEventParams {
@@ -14,9 +13,11 @@ export async function prepareFeedbackEvent({
   client,
   scope,
   event,
-}: PrepareFeedbackEventParams): Promise<FeedbackEvent | null> {
+}: PrepareFeedbackEventParams): Promise<FeedbackEvent> {
   const eventHint = {};
-  client.emit('preprocessEvent', event, eventHint);
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
 
   const preparedEvent = (await prepareEvent(
     client.getOptions(),
@@ -30,7 +31,7 @@ export async function prepareFeedbackEvent({
   if (preparedEvent === null) {
     // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
     client.recordDroppedEvent('event_processor', 'feedback', event);
-    return null;
+    throw new Error('Unable to prepare event');
   }
 
   // This normally happens in browser client "_prepareEvent"
diff --git a/packages/feedback/src/util/validate.ts b/packages/feedback/src/util/validate.ts
new file mode 100644
index 000000000000..5ab14743bf03
--- /dev/null
+++ b/packages/feedback/src/util/validate.ts
@@ -0,0 +1,24 @@
+import type { FeedbackFormData, FeedbackInternalOptions } from '../types';
+
+export type Props = Pick<
+  FeedbackInternalOptions,
+  'emailLabel' | 'isEmailRequired' | 'isNameRequired' | 'messageLabel' | 'nameLabel'
+>;
+
+/**
+ * Validate that a given feedback submission has the required fields
+ */
+export function getMissingFields(feedback: FeedbackFormData, props: Props): string[] {
+  const emptyFields = [];
+  if (props.isNameRequired && !feedback.name) {
+    emptyFields.push(props.nameLabel);
+  }
+  if (props.isEmailRequired && !feedback.email) {
+    emptyFields.push(props.emailLabel);
+  }
+  if (!feedback.message) {
+    emptyFields.push(props.messageLabel);
+  }
+
+  return emptyFields;
+}
diff --git a/packages/feedback/src/widget/Actor.ts b/packages/feedback/src/widget/Actor.ts
deleted file mode 100644
index 2b3239006e0b..000000000000
--- a/packages/feedback/src/widget/Actor.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
-import { Icon } from './Icon';
-import { createElement } from './util/createElement';
-
-export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
-  onClick?: (e: MouseEvent) => void;
-}
-
-export interface ActorComponent extends FeedbackComponent<HTMLButtonElement> {
-  /**
-   * Shows the actor element
-   */
-  show: () => void;
-  /**
-   * Hides the actor element
-   */
-  hide: () => void;
-}
-
-/**
- *
- */
-export function Actor({ buttonLabel, onClick }: ActorProps): ActorComponent {
-  function _handleClick(e: MouseEvent): void {
-    onClick && onClick(e);
-  }
-
-  const el = createElement(
-    'button',
-    {
-      type: 'button',
-      className: 'widget__actor',
-      ['aria-label']: buttonLabel,
-      ['aria-hidden']: 'false',
-    },
-    Icon().el,
-    buttonLabel
-      ? createElement(
-          'span',
-          {
-            className: 'widget__actor__text',
-          },
-          buttonLabel,
-        )
-      : null,
-  );
-
-  el.addEventListener('click', _handleClick);
-
-  return {
-    get el() {
-      return el;
-    },
-    show: (): void => {
-      el.classList.remove('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'false');
-    },
-    hide: (): void => {
-      el.classList.add('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'true');
-    },
-  };
-}
diff --git a/packages/feedback/src/widget/Dialog.ts b/packages/feedback/src/widget/Dialog.ts
deleted file mode 100644
index 84b4318b34d1..000000000000
--- a/packages/feedback/src/widget/Dialog.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
-import type { FormComponentProps } from './Form';
-import { Form } from './Form';
-import { Logo } from './Logo';
-import { createElement } from './util/createElement';
-
-export interface DialogProps
-  extends FormComponentProps,
-    Pick<FeedbackInternalOptions, 'formTitle' | 'showBranding' | 'colorScheme'> {
-  onClosed?: () => void;
-}
-
-export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
-  /**
-   * Shows the error message
-   */
-  showError: (message: string) => void;
-
-  /**
-   * Hides the error message
-   */
-  hideError: () => void;
-
-  /**
-   * Opens and shows the dialog and form
-   */
-  open: () => void;
-
-  /**
-   * Closes the dialog and form
-   */
-  close: () => void;
-
-  /**
-   * Check if dialog is currently opened
-   */
-  checkIsOpen: () => boolean;
-}
-
-/**
- * Feedback dialog component that has the form
- */
-export function Dialog({
-  formTitle,
-  showBranding,
-  showName,
-  showEmail,
-  isNameRequired,
-  isEmailRequired,
-  colorScheme,
-  defaultName,
-  defaultEmail,
-  onClosed,
-  onCancel,
-  onSubmit,
-  ...textLabels
-}: DialogProps): DialogComponent {
-  let el: HTMLDialogElement | null = null;
-
-  /**
-   * Handles when the dialog is clicked. In our case, the dialog is the
-   * semi-transparent bg behind the form. We want clicks outside of the form to
-   * hide the form.
-   */
-  function handleDialogClick(): void {
-    close();
-
-    // Only this should trigger `onClose`, we don't want the `close()` method to
-    // trigger it, otherwise it can cause cycles.
-    onClosed && onClosed();
-  }
-
-  /**
-   * Close the dialog
-   */
-  function close(): void {
-    if (el) {
-      el.open = false;
-    }
-  }
-
-  /**
-   * Opens the dialog
-   */
-  function open(): void {
-    if (el) {
-      el.open = true;
-    }
-  }
-
-  /**
-   * Check if dialog is currently opened
-   */
-  function checkIsOpen(): boolean {
-    return (el && el.open === true) || false;
-  }
-
-  const {
-    el: formEl,
-    showError,
-    hideError,
-  } = Form({
-    showEmail,
-    showName,
-    isEmailRequired,
-    isNameRequired,
-
-    defaultName,
-    defaultEmail,
-    onSubmit,
-    onCancel,
-    ...textLabels,
-  });
-
-  el = createElement(
-    'dialog',
-    {
-      className: 'dialog',
-      open: true,
-      onClick: handleDialogClick,
-    },
-    createElement(
-      'div',
-      {
-        className: 'dialog__content',
-        onClick: e => {
-          // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
-          e.stopPropagation();
-        },
-      },
-      createElement(
-        'h2',
-        { className: 'dialog__header' },
-        formTitle,
-        showBranding &&
-          createElement(
-            'a',
-            {
-              className: 'brand-link',
-              target: '_blank',
-              href: 'https://sentry.io/welcome/',
-              title: 'Powered by Sentry',
-              rel: 'noopener noreferrer',
-            },
-            Logo({ colorScheme }).el,
-          ),
-      ),
-      formEl,
-    ),
-  );
-
-  return {
-    get el() {
-      return el;
-    },
-    showError,
-    hideError,
-    open,
-    close,
-    checkIsOpen,
-  };
-}
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
deleted file mode 100644
index 9b90cf547477..000000000000
--- a/packages/feedback/src/widget/Form.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
-import { SubmitButton } from './SubmitButton';
-import { createElement } from './util/createElement';
-
-export interface FormComponentProps
-  extends Pick<
-    FeedbackInternalOptions,
-    | 'showName'
-    | 'showEmail'
-    | 'isNameRequired'
-    | 'isEmailRequired'
-    | Exclude<keyof FeedbackTextConfiguration, 'buttonLabel' | 'formTitle' | 'successMessageText'>
-  > {
-  /**
-   * A default name value to render the input with. Empty strings are ok.
-   */
-  defaultName: string;
-  /**
-   * A default email value to render the input with. Empty strings are ok.
-   */
-  defaultEmail: string;
-  onCancel?: (e: Event) => void;
-  onSubmit?: (feedback: FeedbackFormData) => void;
-}
-
-interface FormComponent extends FeedbackComponent<HTMLFormElement> {
-  /**
-   * Shows the error message
-   */
-  showError: (message: string) => void;
-
-  /**
-   * Hides the error message
-   */
-  hideError: () => void;
-}
-
-function retrieveStringValue(formData: FormData, key: string): string {
-  const value = formData.get(key);
-  if (typeof value === 'string') {
-    return value.trim();
-  }
-  return '';
-}
-
-/**
- * Creates the form element
- */
-export function Form({
-  nameLabel,
-  namePlaceholder,
-  emailLabel,
-  emailPlaceholder,
-  messageLabel,
-  messagePlaceholder,
-  cancelButtonLabel,
-  submitButtonLabel,
-
-  showName,
-  showEmail,
-  isNameRequired,
-  isEmailRequired,
-
-  defaultName,
-  defaultEmail,
-  onCancel,
-  onSubmit,
-}: FormComponentProps): FormComponent {
-  const { el: submitEl } = SubmitButton({
-    label: submitButtonLabel,
-  });
-
-  function handleSubmit(e: Event): void {
-    e.preventDefault();
-
-    if (!(e.target instanceof HTMLFormElement)) {
-      return;
-    }
-
-    try {
-      if (onSubmit) {
-        const formData = new FormData(e.target as HTMLFormElement);
-        const feedback = {
-          name: retrieveStringValue(formData, 'name'),
-          email: retrieveStringValue(formData, 'email'),
-          message: retrieveStringValue(formData, 'message'),
-        };
-
-        onSubmit(feedback);
-      }
-    } catch {
-      // pass
-    }
-  }
-
-  const errorEl = createElement('div', {
-    className: 'form__error-container form__error-container--hidden',
-    ['aria-hidden']: 'true',
-  });
-
-  function showError(message: string): void {
-    errorEl.textContent = message;
-    errorEl.classList.remove('form__error-container--hidden');
-    errorEl.setAttribute('aria-hidden', 'false');
-  }
-
-  function hideError(): void {
-    errorEl.textContent = '';
-    errorEl.classList.add('form__error-container--hidden');
-    errorEl.setAttribute('aria-hidden', 'true');
-  }
-
-  const nameEl = createElement('input', {
-    id: 'name',
-    type: showName ? 'text' : 'hidden',
-    ['aria-hidden']: showName ? 'false' : 'true',
-    name: 'name',
-    required: isNameRequired,
-    className: 'form__input',
-    placeholder: namePlaceholder,
-    value: defaultName,
-  });
-
-  const emailEl = createElement('input', {
-    id: 'email',
-    type: showEmail ? 'text' : 'hidden',
-    ['aria-hidden']: showEmail ? 'false' : 'true',
-    name: 'email',
-    required: isEmailRequired,
-    className: 'form__input',
-    placeholder: emailPlaceholder,
-    value: defaultEmail,
-  });
-
-  const messageEl = createElement('textarea', {
-    id: 'message',
-    autoFocus: 'true',
-    rows: '5',
-    name: 'message',
-    required: true,
-    className: 'form__input form__input--textarea',
-    placeholder: messagePlaceholder,
-  });
-
-  const cancelEl = createElement(
-    'button',
-    {
-      type: 'button',
-      className: 'btn btn--default',
-      ['aria-label']: cancelButtonLabel,
-      onClick: (e: Event) => {
-        onCancel && onCancel(e);
-      },
-    },
-    cancelButtonLabel,
-  );
-
-  const formEl = createElement(
-    'form',
-    {
-      className: 'form',
-      onSubmit: handleSubmit,
-    },
-    [
-      errorEl,
-
-      showName &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'name',
-            className: 'form__label',
-          },
-          [
-            createElement(
-              'span',
-              { className: 'form__label__text' },
-              nameLabel,
-              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-            ),
-            nameEl,
-          ],
-        ),
-      !showName && nameEl,
-
-      showEmail &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'email',
-            className: 'form__label',
-          },
-          [
-            createElement(
-              'span',
-              { className: 'form__label__text' },
-              emailLabel,
-              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-            ),
-            emailEl,
-          ],
-        ),
-      !showEmail && emailEl,
-
-      createElement(
-        'label',
-        {
-          htmlFor: 'message',
-          className: 'form__label',
-        },
-        [
-          createElement(
-            'span',
-            { className: 'form__label__text' },
-            messageLabel,
-            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-          ),
-          messageEl,
-        ],
-      ),
-
-      createElement(
-        'div',
-        {
-          className: 'btn-group',
-        },
-        [submitEl, cancelEl],
-      ),
-    ],
-  );
-
-  return {
-    get el() {
-      return formEl;
-    },
-    showError,
-    hideError,
-  };
-}
diff --git a/packages/feedback/src/widget/SubmitButton.ts b/packages/feedback/src/widget/SubmitButton.ts
deleted file mode 100644
index aa654f61f903..000000000000
--- a/packages/feedback/src/widget/SubmitButton.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { FeedbackComponent } from '../types';
-import { createElement } from './util/createElement';
-
-export interface SubmitButtonProps {
-  label: string;
-}
-
-type SubmitButtonComponent = FeedbackComponent<HTMLButtonElement>;
-
-/**
- *
- */
-export function SubmitButton({ label }: SubmitButtonProps): SubmitButtonComponent {
-  const el = createElement(
-    'button',
-    {
-      type: 'submit',
-      className: 'btn btn--primary',
-      ['aria-label']: label,
-    },
-    label,
-  );
-
-  return {
-    el,
-  };
-}
diff --git a/packages/feedback/src/widget/SuccessMessage.ts b/packages/feedback/src/widget/SuccessMessage.ts
deleted file mode 100644
index fddf46bcce71..000000000000
--- a/packages/feedback/src/widget/SuccessMessage.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { FeedbackComponent } from '../types';
-import { SuccessIcon } from './SuccessIcon';
-import { createElement } from './util/createElement';
-
-export interface SuccessMessageProps {
-  message: string;
-  onRemove?: () => void;
-}
-
-interface SuccessMessageComponent extends FeedbackComponent<HTMLDivElement> {
-  /**
-   * Removes the component
-   */
-  remove: () => void;
-}
-
-/**
- * Feedback dialog component that has the form
- */
-export function SuccessMessage({ message, onRemove }: SuccessMessageProps): SuccessMessageComponent {
-  function remove(): void {
-    if (!el) {
-      return;
-    }
-
-    el.remove();
-    onRemove && onRemove();
-  }
-
-  const el = createElement(
-    'div',
-    {
-      className: 'success-message',
-      onClick: remove,
-    },
-    SuccessIcon().el,
-    message,
-  );
-
-  return {
-    el,
-    remove,
-  };
-}
diff --git a/packages/feedback/src/widget/createShadowHost.ts b/packages/feedback/src/widget/createShadowHost.ts
deleted file mode 100644
index a418906d4b5a..000000000000
--- a/packages/feedback/src/widget/createShadowHost.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { logger } from '@sentry/utils';
-
-import { WINDOW } from '../constants';
-import type { FeedbackInternalOptions } from '../types';
-import { createDialogStyles } from './Dialog.css';
-import { createMainStyles } from './Main.css';
-
-type CreateShadowHostParams = Pick<FeedbackInternalOptions, 'id' | 'colorScheme' | 'themeDark' | 'themeLight'>;
-
-/**
- * Creates shadow host
- */
-export function createShadowHost({ id, colorScheme, themeDark, themeLight }: CreateShadowHostParams): {
-  shadow: ShadowRoot;
-  host: HTMLDivElement;
-} {
-  try {
-    const doc = WINDOW.document;
-
-    // Create the host
-    const host = doc.createElement('div');
-    host.id = id;
-
-    // Create the shadow root
-    const shadow = host.attachShadow({ mode: 'open' });
-
-    shadow.appendChild(createMainStyles(doc, colorScheme, { dark: themeDark, light: themeLight }));
-    shadow.appendChild(createDialogStyles(doc));
-
-    return { shadow, host };
-  } catch {
-    // Shadow DOM probably not supported
-    logger.warn('[Feedback] Browser does not support shadow DOM API');
-    throw new Error('Browser does not support shadow DOM API.');
-  }
-}
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
deleted file mode 100644
index 1f6ed91bf04e..000000000000
--- a/packages/feedback/src/widget/createWidget.ts
+++ /dev/null
@@ -1,298 +0,0 @@
-import { getClient, getCurrentScope } from '@sentry/core';
-import { logger } from '@sentry/utils';
-
-import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
-import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
-import type { ActorComponent } from './Actor';
-import { Actor } from './Actor';
-import type { DialogComponent } from './Dialog';
-import { Dialog } from './Dialog';
-import { SuccessMessage } from './SuccessMessage';
-
-import { DEBUG_BUILD } from '../debug-build';
-
-interface CreateWidgetParams {
-  /**
-   * Shadow DOM to append to
-   */
-  shadow: ShadowRoot;
-
-  /**
-   * Feedback integration options
-   */
-  options: FeedbackInternalOptions & { shouldCreateActor?: boolean };
-
-  /**
-   * An element to attach to, that when clicked, will open a dialog
-   */
-  attachTo?: Element;
-
-  /**
-   * If false, will not create an actor
-   */
-  shouldCreateActor?: boolean;
-}
-
-/**
- * Creates a new widget. Returns public methods that control widget behavior.
- */
-export function createWidget({
-  shadow,
-  options: { shouldCreateActor = true, ...options },
-  attachTo,
-}: CreateWidgetParams): FeedbackWidget {
-  let actor: ActorComponent | undefined;
-  let dialog: DialogComponent | undefined;
-  let isDialogOpen: boolean = false;
-
-  /**
-   * Show the success message for 5 seconds
-   */
-  function showSuccessMessage(): void {
-    if (!shadow) {
-      return;
-    }
-
-    try {
-      const success = SuccessMessage({
-        message: options.successMessageText,
-        onRemove: () => {
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-          showActor();
-        },
-      });
-
-      if (!success.el) {
-        throw new Error('Unable to show success message');
-      }
-
-      shadow.appendChild(success.el);
-
-      const timeoutId = setTimeout(() => {
-        if (success) {
-          success.remove();
-        }
-      }, 5000);
-    } catch (err) {
-      // TODO: error handling
-      logger.error(err);
-    }
-  }
-
-  /**
-   * Handler for when the feedback form is completed by the user. This will
-   * create and send the feedback message as an event.
-   */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
-    if (!dialog) {
-      return;
-    }
-
-    // Simple validation for now, just check for non-empty required fields
-    const emptyField = [];
-    if (options.isNameRequired && !feedback.name) {
-      emptyField.push(options.nameLabel);
-    }
-    if (options.isEmailRequired && !feedback.email) {
-      emptyField.push(options.emailLabel);
-    }
-    if (!feedback.message) {
-      emptyField.push(options.messageLabel);
-    }
-    if (emptyField.length > 0) {
-      dialog.showError(`Please enter in the following required fields: ${emptyField.join(', ')}`);
-      return;
-    }
-
-    const result = await handleFeedbackSubmit(dialog, feedback);
-
-    // Error submitting feedback
-    if (!result || Object.keys(result).length === 0) {
-      if (options.onSubmitError) {
-        options.onSubmitError();
-      }
-
-      return;
-    }
-
-    // Success
-    removeDialog();
-    showSuccessMessage();
-
-    if (options.onSubmitSuccess) {
-      options.onSubmitSuccess();
-    }
-  }
-
-  /**
-   * Internal handler when dialog is opened
-   */
-  function handleOpenDialog(): void {
-    // Flush replay if integration exists
-    const client = getClient();
-    const replay = client && client.getIntegrationByName<{ name: string; flush: () => Promise<void> }>('Replay');
-    if (!replay) {
-      return;
-    }
-    replay.flush().catch(err => {
-      DEBUG_BUILD && logger.error(err);
-    });
-  }
-
-  /**
-   * Displays the default actor
-   */
-  function showActor(): void {
-    actor && actor.show();
-  }
-
-  /**
-   * Hides the default actor
-   */
-  function hideActor(): void {
-    actor && actor.hide();
-  }
-
-  /**
-   * Removes the default actor element
-   */
-  function removeActor(): void {
-    actor && actor.el && actor.el.remove();
-  }
-
-  /**
-   *
-   */
-  function openDialog(): void {
-    try {
-      if (dialog) {
-        dialog.open();
-        isDialogOpen = true;
-        if (options.onFormOpen) {
-          options.onFormOpen();
-        }
-        handleOpenDialog();
-        return;
-      }
-
-      const userKey = options.useSentryUser;
-      const scope = getCurrentScope();
-      const user = scope && scope.getUser();
-
-      dialog = Dialog({
-        colorScheme: options.colorScheme,
-        showBranding: options.showBranding,
-        showName: options.showName || options.isNameRequired,
-        showEmail: options.showEmail || options.isEmailRequired,
-        isNameRequired: options.isNameRequired,
-        isEmailRequired: options.isEmailRequired,
-        formTitle: options.formTitle,
-        cancelButtonLabel: options.cancelButtonLabel,
-        submitButtonLabel: options.submitButtonLabel,
-        emailLabel: options.emailLabel,
-        emailPlaceholder: options.emailPlaceholder,
-        messageLabel: options.messageLabel,
-        messagePlaceholder: options.messagePlaceholder,
-        nameLabel: options.nameLabel,
-        namePlaceholder: options.namePlaceholder,
-        defaultName: (userKey && user && user[userKey.name]) || '',
-        defaultEmail: (userKey && user && user[userKey.email]) || '',
-        onClosed: () => {
-          showActor();
-          isDialogOpen = false;
-
-          if (options.onFormClose) {
-            options.onFormClose();
-          }
-        },
-        onCancel: () => {
-          closeDialog();
-          showActor();
-        },
-        onSubmit: _handleFeedbackSubmit,
-      });
-
-      if (!dialog.el) {
-        throw new Error('Unable to open Feedback dialog');
-      }
-
-      shadow.appendChild(dialog.el);
-
-      // Hides the default actor whenever dialog is opened
-      hideActor();
-
-      if (options.onFormOpen) {
-        options.onFormOpen();
-      }
-      handleOpenDialog();
-    } catch (err) {
-      // TODO: Error handling?
-      logger.error(err);
-    }
-  }
-
-  /**
-   * Closes the dialog
-   */
-  function closeDialog(): void {
-    if (dialog) {
-      dialog.close();
-      isDialogOpen = false;
-
-      if (options.onFormClose) {
-        options.onFormClose();
-      }
-    }
-  }
-
-  /**
-   * Removes the dialog element from DOM
-   */
-  function removeDialog(): void {
-    if (dialog) {
-      closeDialog();
-      const dialogEl = dialog.el;
-      dialogEl && dialogEl.remove();
-      dialog = undefined;
-    }
-  }
-
-  /**
-   *
-   */
-  function handleActorClick(): void {
-    // Open dialog
-    if (!isDialogOpen) {
-      openDialog();
-    }
-
-    // Hide actor button
-    hideActor();
-  }
-
-  if (attachTo) {
-    attachTo.addEventListener('click', handleActorClick);
-  } else if (shouldCreateActor) {
-    actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
-    actor.el && shadow.appendChild(actor.el);
-  }
-
-  return {
-    get actor() {
-      return actor;
-    },
-    get dialog() {
-      return dialog;
-    },
-
-    showActor,
-    hideActor,
-    removeActor,
-
-    openDialog,
-    closeDialog,
-    removeDialog,
-  };
-}
diff --git a/packages/feedback/src/widget/util/createElement.ts b/packages/feedback/src/widget/util/createElement.ts
deleted file mode 100644
index e070e9a9553f..000000000000
--- a/packages/feedback/src/widget/util/createElement.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { WINDOW } from '../../constants';
-
-/**
- * Helper function to create an element. Could be used as a JSX factory
- * (i.e. React-like syntax).
- */
-export function createElement<K extends keyof HTMLElementTagNameMap>(
-  tagName: K,
-  attributes: { [key: string]: string | boolean | EventListenerOrEventListenerObject } | null,
-  ...children: any
-): HTMLElementTagNameMap[K] {
-  const doc = WINDOW.document;
-  const element = doc.createElement(tagName);
-
-  if (attributes) {
-    Object.entries(attributes).forEach(([attribute, attributeValue]) => {
-      if (attribute === 'className' && typeof attributeValue === 'string') {
-        // JSX does not allow class as a valid name
-        element.setAttribute('class', attributeValue);
-      } else if (typeof attributeValue === 'boolean' && attributeValue) {
-        element.setAttribute(attribute, '');
-      } else if (typeof attributeValue === 'string') {
-        element.setAttribute(attribute, attributeValue);
-      } else if (attribute.startsWith('on') && typeof attributeValue === 'function') {
-        element.addEventListener(attribute.substring(2).toLowerCase(), attributeValue);
-      }
-    });
-  }
-  for (const child of children) {
-    appendChild(element, child);
-  }
-
-  return element;
-}
-
-function appendChild(parent: Node, child: any): void {
-  const doc = WINDOW.document;
-  if (typeof child === 'undefined' || child === null) {
-    return;
-  }
-
-  if (Array.isArray(child)) {
-    for (const value of child) {
-      appendChild(parent, value);
-    }
-  } else if (child === false) {
-    // do nothing if child evaluated to false
-  } else if (typeof child === 'string') {
-    parent.appendChild(doc.createTextNode(child));
-  } else if (child instanceof Node) {
-    parent.appendChild(child);
-  } else {
-    parent.appendChild(doc.createTextNode(String(child)));
-  }
-}
diff --git a/packages/feedback/test/index.ts b/packages/feedback/test/index.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/feedback/test/integration.test.ts b/packages/feedback/test/integration.test.ts
deleted file mode 100644
index 4a651a8ef7be..000000000000
--- a/packages/feedback/test/integration.test.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as SentryUtils from '@sentry/utils';
-
-import { ACTOR_LABEL } from '../src/constants';
-import { feedbackIntegration } from '../src/integration';
-
-jest.spyOn(SentryUtils, 'isBrowser').mockImplementation(() => true);
-
-jest.mock('../src/util/sendFeedbackRequest', () => {
-  const original = jest.requireActual('../src/util/sendFeedbackRequest');
-  return {
-    ...original,
-    sendFeedbackRequest: jest.fn(),
-  };
-});
-
-describe('Feedback integration', () => {
-  let feedback: ReturnType<typeof feedbackIntegration>;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (feedback) {
-      feedback.remove();
-    }
-  });
-
-  it('autoinjects widget with actor', () => {
-    feedback = feedbackIntegration();
-    feedback.setupOnce();
-    const widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    const actorEl = widget?.actor?.el as HTMLButtonElement;
-    expect(actorEl.textContent).toBe(ACTOR_LABEL);
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(actorEl)).toBe(true);
-  });
-
-  it('does not create a widget with `autoInject: false`', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-    feedback.setupOnce();
-    const widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-  });
-
-  it('opens (and closes) dialog when calling `openDialog` without injecting an actor', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-    feedback.setupOnce();
-
-    let widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-
-    feedback.openDialog();
-    widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    expect(widget?.dialog).not.toBeUndefined();
-    expect(widget?.dialog?.checkIsOpen()).toBe(true);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widget.dialog.el)).toBe(true);
-
-    feedback.closeDialog();
-    expect(widget?.dialog?.checkIsOpen()).toBe(false);
-  });
-
-  it('attaches to a custom actor element', () => {
-    const onFormOpen = jest.fn();
-    // This element is in the normal DOM
-    const myActor = document.createElement('div');
-    myActor.textContent = 'my button';
-
-    feedback = feedbackIntegration({ autoInject: false });
-    let widget = feedback.getWidget();
-    expect(widget).toBe(null);
-
-    feedback.attachTo(myActor, { onFormOpen });
-
-    myActor.dispatchEvent(new Event('click'));
-
-    widget = feedback.getWidget();
-
-    expect(widget?.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget?.dialog?.el?.open).toBe(true);
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-    // This is all we do with `attachTo` (open dialog)
-  });
-
-  it('creates multiple widgets and removes them', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-
-    feedback.createWidget();
-    expect(feedback.getWidget()?.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(1);
-
-    feedback.createWidget();
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(2);
-
-    // @ts-expect-error  _widgets is private
-    const widgets = Array.from(feedback._widgets.values());
-    expect(widgets[0]).not.toEqual(widgets[1]);
-
-    // Both actors will be in the DOM
-
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[0].actor.el)).toBe(true);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[1].actor.el)).toBe(true);
-
-    feedback.removeWidget(widgets[0]);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[0].actor.el)).toBe(false);
-
-    feedback.removeWidget(widgets[1]);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[1].actor.el)).toBe(false);
-
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(0);
-  });
-});
diff --git a/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts b/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts
deleted file mode 100644
index 165e3af0588d..000000000000
--- a/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { setCurrentClient } from '@sentry/core';
-import { getCurrentScope } from '@sentry/core';
-import type { FeedbackEvent, Scope } from '@sentry/types';
-
-import { prepareFeedbackEvent } from '../../../src/util/prepareFeedbackEvent';
-import { TestClient, getDefaultClientOptions } from '../../utils/TestClient';
-
-describe('Unit | util | prepareFeedbackEvent', () => {
-  let client: TestClient;
-  let scope: Scope;
-
-  beforeEach(() => {
-    client = new TestClient(getDefaultClientOptions());
-    setCurrentClient(client);
-    client.init();
-    scope = getCurrentScope();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('works', async () => {
-    expect(client).toBeDefined();
-    expect(scope).toBeDefined();
-
-    const replayId = 'replay-ID';
-    const event: FeedbackEvent = {
-      timestamp: 1670837008.634,
-      event_id: 'feedback-ID',
-      type: 'feedback',
-      contexts: {
-        feedback: {
-          contact_email: 'test@test.com',
-          message: 'looks great!',
-          replay_id: replayId,
-          url: 'https://sentry.io/',
-        },
-        replay: {
-          error_sample_rate: 1.0,
-          session_sample_rate: 0.1,
-        },
-      },
-    };
-
-    const feedbackEvent = await prepareFeedbackEvent({ scope, client, event });
-
-    expect(feedbackEvent).toEqual({
-      timestamp: 1670837008.634,
-      event_id: 'feedback-ID',
-      platform: 'javascript',
-      environment: 'production',
-      contexts: {
-        feedback: {
-          contact_email: 'test@test.com',
-          message: 'looks great!',
-          replay_id: replayId,
-          url: 'https://sentry.io/',
-        },
-        replay: {
-          error_sample_rate: 1.0,
-          session_sample_rate: 0.1,
-        },
-      },
-      sdkProcessingMetadata: expect.any(Object),
-      breadcrumbs: undefined,
-      type: 'feedback',
-    });
-  });
-});
diff --git a/packages/feedback/test/widget/Actor.test.ts b/packages/feedback/test/widget/Actor.test.ts
deleted file mode 100644
index a1209a561654..000000000000
--- a/packages/feedback/test/widget/Actor.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ACTOR_LABEL } from '../../src/constants';
-import type { ActorProps } from '../../src/widget/Actor';
-import { Actor } from '../../src/widget/Actor';
-
-function renderActor(props?: Partial<ActorProps>) {
-  return Actor({
-    buttonLabel: ACTOR_LABEL,
-    ...props,
-  });
-}
-
-describe('Actor', () => {
-  it('renders the actor button', () => {
-    const actorComponent = renderActor();
-
-    expect(actorComponent.el).toBeInstanceOf(HTMLButtonElement);
-    expect(actorComponent.el?.textContent).toBe(ACTOR_LABEL);
-  });
-
-  it('calls `onClick` callback when clicked on', () => {
-    const onClick = jest.fn();
-    const actorComponent = renderActor({
-      onClick,
-    });
-
-    const event = new Event('click');
-    actorComponent.el?.dispatchEvent(event);
-    expect(onClick).toHaveBeenCalledWith(event);
-  });
-
-  it('can manually show and hide the actor', () => {
-    const actorComponent = renderActor();
-
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
-
-    actorComponent.hide();
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('true');
-
-    actorComponent.show();
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
-  });
-});
diff --git a/packages/feedback/test/widget/Dialog.test.ts b/packages/feedback/test/widget/Dialog.test.ts
deleted file mode 100644
index 69a333f69813..000000000000
--- a/packages/feedback/test/widget/Dialog.test.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { DialogProps } from '../../src/widget/Dialog';
-import { Dialog } from '../../src/widget/Dialog';
-
-type NonNullableFields<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
-};
-
-function renderDialog({
-  showName = true,
-  showEmail = true,
-  showBranding = false,
-  isNameRequired = false,
-  isEmailRequired = false,
-  formTitle = 'Feedback',
-  defaultName = 'Foo Bar',
-  defaultEmail = 'foo@example.com',
-  colorScheme = 'light',
-  nameLabel = 'Name',
-  namePlaceholder = 'Your full name',
-  emailLabel = 'Email',
-  emailPlaceholder = 'foo@example.org',
-  messageLabel = 'Description',
-  messagePlaceholder = 'What is the issue?',
-  cancelButtonLabel = 'Cancel!',
-  submitButtonLabel = 'Submit!',
-  ...rest
-}: Partial<DialogProps> = {}) {
-  return Dialog({
-    formTitle,
-
-    showName,
-    showEmail,
-    isNameRequired,
-    isEmailRequired,
-    showBranding,
-    defaultName,
-    defaultEmail,
-    colorScheme,
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    messageLabel,
-    messagePlaceholder,
-    cancelButtonLabel,
-    submitButtonLabel,
-    ...rest,
-  }) as NonNullableFields<ReturnType<typeof Dialog>>;
-}
-
-describe('Dialog', () => {
-  it('renders the dialog w/ form', () => {
-    const dialogComponent = renderDialog({
-      formTitle: 'Feedback!',
-    });
-
-    expect(dialogComponent.el).toBeInstanceOf(HTMLDialogElement);
-    expect(dialogComponent.el.querySelector('form')).toBeInstanceOf(HTMLFormElement);
-    expect(dialogComponent.el.querySelector('h2')?.textContent).toBe('Feedback!');
-  });
-
-  it('can open and close dialog', () => {
-    const dialogComponent = renderDialog();
-
-    expect(dialogComponent.checkIsOpen()).toBe(true);
-
-    dialogComponent.close();
-    expect(dialogComponent.checkIsOpen()).toBe(false);
-
-    dialogComponent.open();
-    expect(dialogComponent.checkIsOpen()).toBe(true);
-  });
-
-  it('calls `onClosed` callback when clicked', () => {
-    const onClosed = jest.fn();
-    const dialogComponent = renderDialog({
-      onClosed,
-    });
-
-    dialogComponent.el.dispatchEvent(new Event('click'));
-    expect(onClosed).toHaveBeenCalledWith();
-  });
-
-  it('stops event propagation when dialog contents is clicked', () => {
-    const onClosed = jest.fn();
-    const dialogComponent = renderDialog({
-      onClosed,
-    });
-
-    const event = new Event('click');
-    jest.spyOn(event, 'stopPropagation');
-    dialogComponent.el.querySelector('.dialog__content')?.dispatchEvent(event);
-
-    expect(event.stopPropagation).toHaveBeenCalled();
-    expect(onClosed).not.toHaveBeenCalled();
-  });
-});
diff --git a/packages/feedback/test/widget/Form.test.ts b/packages/feedback/test/widget/Form.test.ts
deleted file mode 100644
index 7b45cabd8503..000000000000
--- a/packages/feedback/test/widget/Form.test.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import type { FormComponentProps } from '../../src/widget/Form';
-import { Form } from '../../src/widget/Form';
-
-type NonNullableFields<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
-};
-
-function renderForm({
-  showName = true,
-  showEmail = true,
-  isNameRequired = false,
-  isEmailRequired = false,
-  defaultName = 'Foo Bar',
-  defaultEmail = 'foo@example.com',
-  nameLabel = 'Name',
-  namePlaceholder = 'Your full name',
-  emailLabel = 'Email',
-  emailPlaceholder = 'foo@example.org',
-  messageLabel = 'Description',
-  messagePlaceholder = 'What is the issue?',
-  cancelButtonLabel = 'Cancel!',
-  submitButtonLabel = 'Submit!',
-  ...rest
-}: Partial<FormComponentProps> = {}) {
-  return Form({
-    showName,
-    showEmail,
-    isNameRequired,
-    isEmailRequired,
-    defaultName,
-    defaultEmail,
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    messageLabel,
-    messagePlaceholder,
-    cancelButtonLabel,
-    submitButtonLabel,
-    ...rest,
-  }) as NonNullableFields<ReturnType<typeof Form>>;
-}
-
-describe('Form', () => {
-  it('renders a form', () => {
-    const formComponent = renderForm();
-
-    expect(formComponent.el).toBeInstanceOf(HTMLFormElement);
-    const nameInput = formComponent.el.querySelector('[name="name"][type="text"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"][type="text"]') as HTMLInputElement;
-    expect(nameInput).not.toBeNull();
-    expect(emailInput).not.toBeNull();
-    expect(nameInput.value).toBe('Foo Bar');
-    expect(emailInput.value).toBe('foo@example.com');
-    expect(formComponent.el.querySelector('[name="message"]')).not.toBeNull();
-
-    const button = formComponent.el.querySelector('button[type="submit"]') as HTMLButtonElement | null;
-    expect(button?.textContent).toBe('Submit!');
-    expect(formComponent.el.querySelector('button[type="button"]')?.textContent).toBe('Cancel!');
-  });
-
-  it('can hide name and email inputs', () => {
-    const formComponent = renderForm({
-      showName: false,
-      showEmail: false,
-    });
-
-    const nameInput = formComponent.el.querySelector('[name="name"][type="hidden"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"][type="hidden"]') as HTMLInputElement;
-    expect(nameInput).not.toBeNull();
-    expect(emailInput).not.toBeNull();
-    expect(nameInput.value).toBe('Foo Bar');
-    expect(emailInput.value).toBe('foo@example.com');
-    expect(formComponent.el.querySelector('[name="message"]')).not.toBeNull();
-  });
-
-  it('can change text labels', () => {
-    const formComponent = renderForm({
-      nameLabel: 'Name!',
-      namePlaceholder: 'Your full name!',
-      emailLabel: 'Email!',
-      emailPlaceholder: 'foo@example.org!',
-      messageLabel: 'Description!',
-      messagePlaceholder: 'What is the issue?!',
-      isNameRequired: true,
-      isEmailRequired: true,
-    });
-
-    const nameLabel = formComponent.el.querySelector('label[htmlFor="name"]') as HTMLLabelElement;
-    const emailLabel = formComponent.el.querySelector('label[htmlFor="email"]') as HTMLLabelElement;
-    const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
-    expect(nameLabel.textContent).toBe('Name! (required)');
-    expect(emailLabel.textContent).toBe('Email! (required)');
-    expect(messageLabel.textContent).toBe('Description! (required)');
-
-    const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement;
-    const messageInput = formComponent.el.querySelector('[name="message"]') as HTMLTextAreaElement;
-
-    expect(nameInput.placeholder).toBe('Your full name!');
-    expect(emailInput.placeholder).toBe('foo@example.org!');
-    expect(messageInput.placeholder).toBe('What is the issue?!');
-  });
-
-  it('can show error', () => {
-    const formComponent = renderForm();
-    const errorEl = formComponent.el.querySelector('.form__error-container') as HTMLDivElement;
-    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
-
-    formComponent.showError('My Error');
-    expect(errorEl.getAttribute('aria-hidden')).toBe('false');
-    expect(errorEl.textContent).toBe('My Error');
-
-    formComponent.hideError();
-    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
-    expect(errorEl.textContent).toBe('');
-  });
-
-  it('calls `onCancel` callback', () => {
-    const onCancel = jest.fn(() => {});
-    const formComponent = renderForm({ onCancel });
-    (formComponent.el.querySelector('button[type="button"]') as HTMLButtonElement)?.click();
-    expect(onCancel).toHaveBeenCalled();
-  });
-
-  it('calls `onSubmit` callback when submitting', () => {
-    const onSubmit = jest.fn();
-    const formComponent = renderForm({ onSubmit });
-    const submitEvent = new Event('submit');
-
-    formComponent.el.dispatchEvent(submitEvent);
-
-    expect(onSubmit).toHaveBeenCalledWith({
-      email: 'foo@example.com',
-      message: '',
-      name: 'Foo Bar',
-    });
-  });
-});
diff --git a/packages/feedback/test/widget/SubmitButton.test.ts b/packages/feedback/test/widget/SubmitButton.test.ts
deleted file mode 100644
index d01b6006ae4a..000000000000
--- a/packages/feedback/test/widget/SubmitButton.test.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SUBMIT_BUTTON_LABEL } from '../../src/constants';
-import type { SubmitButtonProps } from '../../src/widget/SubmitButton';
-import { SubmitButton } from '../../src/widget/SubmitButton';
-
-function renderSubmitButton(props?: Partial<SubmitButtonProps>) {
-  return SubmitButton({
-    label: SUBMIT_BUTTON_LABEL,
-    ...props,
-  });
-}
-
-describe('SubmitButton', () => {
-  it('renders the submit button, disabled by default', () => {
-    const submitButtonComponent = renderSubmitButton();
-
-    expect(submitButtonComponent.el).toBeInstanceOf(HTMLButtonElement);
-    if (!submitButtonComponent.el) {
-      throw new Error('Element does not exist');
-    }
-    expect(submitButtonComponent.el.textContent).toBe(SUBMIT_BUTTON_LABEL);
-  });
-});
diff --git a/packages/feedback/test/widget/SuccessMessage.test.ts b/packages/feedback/test/widget/SuccessMessage.test.ts
deleted file mode 100644
index 48c51dc992b9..000000000000
--- a/packages/feedback/test/widget/SuccessMessage.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SUCCESS_MESSAGE_TEXT } from '../../src/constants';
-import type { SuccessMessageProps } from '../../src/widget/SuccessMessage';
-import { SuccessMessage } from '../../src/widget/SuccessMessage';
-
-function renderSuccessMessage(props?: Partial<SuccessMessageProps>) {
-  return SuccessMessage({
-    message: SUCCESS_MESSAGE_TEXT,
-    ...props,
-  });
-}
-
-describe('SuccessMessage', () => {
-  it('renders the submit button, disabled by default', () => {
-    const successMessageComponent = renderSuccessMessage();
-
-    expect(successMessageComponent.el).toBeInstanceOf(HTMLDivElement);
-    expect(successMessageComponent.el?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-  });
-
-  it('removes element and calls `onRemove` callback when clicked', () => {
-    const onRemove = jest.fn();
-    const successMessageComponent = renderSuccessMessage({
-      onRemove,
-    });
-
-    successMessageComponent.el && document.body.appendChild(successMessageComponent.el);
-    expect(document.querySelector('.success-message')).not.toBeNull();
-    successMessageComponent.el?.dispatchEvent(new Event('click'));
-    expect(document.querySelector('.success-message')).toBeNull();
-    expect(onRemove).toHaveBeenCalledWith();
-  });
-});
diff --git a/packages/feedback/test/widget/createWidget.test.ts b/packages/feedback/test/widget/createWidget.test.ts
deleted file mode 100644
index 0fba6f452084..000000000000
--- a/packages/feedback/test/widget/createWidget.test.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import {
-  ACTOR_LABEL,
-  CANCEL_BUTTON_LABEL,
-  DEFAULT_THEME,
-  EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
-  FORM_TITLE,
-  MESSAGE_LABEL,
-  MESSAGE_PLACEHOLDER,
-  NAME_LABEL,
-  NAME_PLACEHOLDER,
-  SUBMIT_BUTTON_LABEL,
-  SUCCESS_MESSAGE_TEXT,
-} from '../../src/constants';
-import type { FeedbackInternalOptions } from '../../src/types';
-import { sendFeedbackRequest } from '../../src/util/sendFeedbackRequest';
-import { createShadowHost } from '../../src/widget/createShadowHost';
-import { createWidget } from '../../src/widget/createWidget';
-
-const flushPromises = () => new Promise(jest.requireActual('timers').setImmediate);
-jest.useFakeTimers();
-
-const DEFAULT_OPTIONS = {
-  id: 'sentry-feedback',
-  autoInject: true,
-  showEmail: true,
-  showName: true,
-  showBranding: false,
-  useSentryUser: {
-    email: 'email',
-    name: 'username',
-  },
-  isEmailRequired: false,
-  isNameRequired: false,
-
-  themeDark: DEFAULT_THEME.dark,
-  themeLight: DEFAULT_THEME.light,
-  colorScheme: 'system' as const,
-
-  buttonLabel: ACTOR_LABEL,
-  cancelButtonLabel: CANCEL_BUTTON_LABEL,
-  submitButtonLabel: SUBMIT_BUTTON_LABEL,
-  formTitle: FORM_TITLE,
-  emailPlaceholder: EMAIL_PLACEHOLDER,
-  emailLabel: EMAIL_LABEL,
-  messagePlaceholder: MESSAGE_PLACEHOLDER,
-  messageLabel: MESSAGE_LABEL,
-  namePlaceholder: NAME_PLACEHOLDER,
-  nameLabel: NAME_LABEL,
-  successMessageText: SUCCESS_MESSAGE_TEXT,
-
-  onFormClose: jest.fn(),
-  onFormOpen: jest.fn(),
-  onSubmitError: jest.fn(),
-  onSubmitSuccess: jest.fn(),
-};
-
-jest.mock('../../src/util/sendFeedbackRequest', () => {
-  const original = jest.requireActual('../../src/util/sendFeedbackRequest');
-  return {
-    ...original,
-    sendFeedbackRequest: jest.fn(),
-  };
-});
-
-function createShadowAndWidget(
-  feedbackOptions?: Partial<FeedbackInternalOptions> & { shouldCreateActor?: boolean },
-  createWidgetOptions?: Partial<Parameters<typeof createWidget>[0]>,
-) {
-  const { shadow } = createShadowHost({
-    id: 'feedback',
-    colorScheme: 'system',
-    themeLight: DEFAULT_THEME.light,
-    themeDark: DEFAULT_THEME.dark,
-  });
-  const widget = createWidget({
-    shadow,
-    options: {
-      ...DEFAULT_OPTIONS,
-      ...feedbackOptions,
-    },
-    ...createWidgetOptions,
-  });
-
-  return { shadow, widget };
-}
-
-describe('createWidget', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('creates widget with actor', () => {
-    const { shadow, widget } = createShadowAndWidget();
-    expect(widget.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    const actorEl = widget.actor?.el as HTMLButtonElement;
-    expect(actorEl.textContent).toBe(DEFAULT_OPTIONS.buttonLabel);
-    // No dialog until actor is clicked
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.contains(actorEl)).toBe(true);
-  });
-
-  it('creates widget without actor', () => {
-    const { widget } = createShadowAndWidget({
-      shouldCreateActor: false,
-    });
-    expect(widget.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget.dialog).toBeUndefined();
-  });
-
-  it('clicking on actor opens dialog and hides the actor', () => {
-    const onFormOpen = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormOpen });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    // Dialog is now visible
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-
-    // Actor should be hidden
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-  });
-
-  it('submits feedback successfully', async () => {
-    const onSubmitSuccess = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      onSubmitSuccess,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      return Promise.resolve({ statusCode: 200 });
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const nameEl = widget.dialog?.el?.querySelector('[name="name"]') as HTMLInputElement;
-    nameEl.value = 'Jane Doe';
-    const emailEl = widget.dialog?.el?.querySelector('[name="email"]') as HTMLInputElement;
-    emailEl.value = 'jane@example.com';
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-    messageEl.value = 'My feedback';
-
-    nameEl.dispatchEvent(new Event('change'));
-    emailEl.dispatchEvent(new Event('change'));
-    messageEl.dispatchEvent(new Event('change'));
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: 'Jane Doe',
-          email: 'jane@example.com',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.querySelector('.success-message')?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-
-    jest.runAllTimers();
-    expect(shadow.querySelector('.success-message')).toBeNull();
-  });
-
-  it('only submits feedback successfully when all required fields are filled', async () => {
-    const onSubmitSuccess = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      isNameRequired: true,
-      isEmailRequired: true,
-      onSubmitSuccess,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      return Promise.resolve({ statusCode: 200 });
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const nameEl = widget.dialog?.el?.querySelector('[name="name"]') as HTMLInputElement;
-    const emailEl = widget.dialog?.el?.querySelector('[name="email"]') as HTMLInputElement;
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-
-    nameEl.value = '';
-    emailEl.value = '';
-    messageEl.value = '';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledTimes(0);
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(0);
-
-    nameEl.value = '';
-    emailEl.value = '';
-    messageEl.value = 'My feedback';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledTimes(0);
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(0);
-
-    nameEl.value = 'Jane Doe';
-    emailEl.value = 'jane@example.com';
-    messageEl.value = 'My feedback';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: 'Jane Doe',
-          email: 'jane@example.com',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.querySelector('.success-message')?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-
-    jest.runAllTimers();
-    expect(shadow.querySelector('.success-message')).toBeNull();
-  });
-
-  it('submits feedback with error on request', async () => {
-    const onSubmitError = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      onSubmitError,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      throw new Error('Unable to send feedback');
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-    messageEl.value = 'My feedback';
-
-    messageEl.dispatchEvent(new Event('change'));
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: '',
-          email: '',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-
-    expect(onSubmitError).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).not.toBeUndefined();
-    expect(shadow.querySelector('.form__error-container')?.textContent).toBe(
-      'There was a problem submitting feedback, please wait and try again.',
-    );
-  });
-
-  it('closes when Cancel button is clicked', () => {
-    const onFormClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormClose });
-
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    // Click cancel button
-    widget.dialog?.el?.querySelector('[aria-label="Cancel"]')?.dispatchEvent(new Event('click'));
-
-    // Element/component should still exist, but it will be in a closed state
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(false);
-    expect(onFormClose).toHaveBeenCalledTimes(1);
-
-    // Actor should now be visible too
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
-
-    // Open it up again
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('closes when dialog (background)) is clicked', () => {
-    const onFormClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormClose });
-
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    // Click the actual dialog element (which serves as modal backdrop)
-    widget.dialog?.el?.dispatchEvent(new Event('click'));
-
-    // Element/component should still exist, but it will be in a closed state
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(false);
-    expect(onFormClose).toHaveBeenCalledTimes(1);
-
-    // Actor should now be visible too
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
-
-    // Open it up again
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('attaches to a custom actor element', () => {
-    const onFormOpen = jest.fn();
-    // This element is in the normal DOM
-    const myActor = document.createElement('div');
-    myActor.textContent = 'my button';
-
-    const { widget } = createShadowAndWidget(
-      {
-        autoInject: false,
-        onFormOpen,
-      },
-      {
-        attachTo: myActor,
-      },
-    );
-
-    myActor.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-    // This is all we do with `attachTo` (open dialog)
-  });
-});
diff --git a/packages/feedback/tsconfig.json b/packages/feedback/tsconfig.json
index f8f54556da93..c1fc08578508 100644
--- a/packages/feedback/tsconfig.json
+++ b/packages/feedback/tsconfig.json
@@ -1,7 +1,17 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "esnext"
+    "module": "esnext",
+
+    /* Preact Config */
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts","src/**/*.tsx"]
 }
diff --git a/packages/types/src/envelope.ts b/packages/types/src/envelope.ts
index ca4a59b18292..721c13323bdb 100644
--- a/packages/types/src/envelope.ts
+++ b/packages/types/src/envelope.ts
@@ -3,8 +3,7 @@ import type { SerializedCheckIn } from './checkin';
 import type { ClientReport } from './clientreport';
 import type { DsnComponents } from './dsn';
 import type { Event } from './event';
-import type { FeedbackEvent } from './feedback';
-import type { UserFeedback } from './feedback';
+import type { FeedbackEvent, UserFeedback } from './feedback';
 import type { Profile } from './profiling';
 import type { ReplayEvent, ReplayRecordingData } from './replay';
 import type { SdkInfo } from './sdkinfo';
diff --git a/yarn.lock b/yarn.lock
index a385e28b9309..e23dcd03aca4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26568,6 +26568,11 @@ postgres-range@^1.1.1:
   resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.3.tgz#9ccd7b01ca2789eb3c2e0888b3184225fa859f76"
   integrity sha512-VdlZoocy5lCP0c/t66xAfclglEapXPCIVhqqJRncYpvbCgImF0w67aPKfbqUMr72tO2k5q0TdTZwCLjPTI6C9g==
 
+preact@^10.19.4:
+  version "10.19.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
+  integrity sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"