docs(user-feedback): Add snippet for manual injection

Author: s1gr1d

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

@@ -30,45 +30,7 @@ The following options can be configured for the integration in `feedbackIntegrat
 
 If you have `autoInject: true` a button will be inserted into the page that triggers the form to pop up so the user can enter their feedback. If instead you want to control when this injection happens, call the `feedback.createWidget()` method to get a reference to an `Actor` object, and then call `appendToDom()` to insert it into the page.
 
-```javascript
-const feedback = feedbackIntegration({
-  // Disable injecting the default widget
-  autoInject: false,
-});
-
-// Create and render the button
-const widget = feedback.createWidget();
-
-// Later, when it's time to clean up:
-widget.removeFromDom();
-```
-```typescript {tabTitle: NextJS}
-function ToggleFeedbackButton() {
-  const [feedback, setFeedback] = useState();
-  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
-  useEffect(() => {
-    setFeedback(Sentry.getFeedback());
-  }, []);
-
-  const [widget, setWidget] = useState();
-  return (
-    <button
-      type="button"
-      onClick={async () => {
-        if (widget) {
-          widget.removeFromDom();
-          setWidget(null);
-        } else {
-          setWidget(feedback.createWidget());
-        }
-      }}
-    >
-      {widget ? "Remove Widget" : "Create Widget"}
-    </button>
-  );
-}
-```
-
+<PlatformContent includePath="user-feedback/manual-injection" />
 
 Read more about how to [use your own UI](#bring-your-own-button) below.
 

platform-includes/user-feedback/manual-injection/javascript.mdx

@@ -0,0 +1,12 @@
+```javascript
+const feedback = feedbackIntegration({
+  // Disable injecting the default widget
+  autoInject: false,
+});
+
+// Create and render the button
+const widget = feedback.createWidget();
+
+// Later, when it's time to clean up:
+widget.removeFromDom();
+```

platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx

@@ -0,0 +1,26 @@
+```jsx {tabTitle: NextJS}
+function ToggleFeedbackButton() {
+  const [feedback, setFeedback] = useState();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  const [widget, setWidget] = useState();
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        if (widget) {
+          widget.removeFromDom();
+          setWidget(null);
+        } else {
+          setWidget(feedback.createWidget());
+        }
+      }}
+    >
+      {widget ? "Remove Widget" : "Create Widget"}
+    </button>
+  );
+}
+```

platform-includes/user-feedback/manual-injection/javascript.react.mdx

@@ -0,0 +1,26 @@
+```jsx {tabTitle: React}
+function ToggleFeedbackButton() {
+  const [feedback, setFeedback] = useState();
+  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  useEffect(() => {
+    setFeedback(Sentry.getFeedback());
+  }, []);
+
+  const [widget, setWidget] = useState();
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        if (widget) {
+          widget.removeFromDom();
+          setWidget(null);
+        } else {
+          setWidget(feedback.createWidget());
+        }
+      }}
+    >
+      {widget ? "Remove Widget" : "Create Widget"}
+    </button>
+  );
+}
+```