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

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

* review suggestions

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.
 
@@ -257,7 +219,7 @@ You can use your own button instead of the default injected button to trigger th
 
 ```javascript
 const feedback = feedbackIntegration({
-  // Disable injecting the default widget
+  // Disable the injection of the default widget
   autoInject: false,
 });
 
@@ -268,7 +230,7 @@ feedback.attachTo(document.querySelector("#your-button"), {
 ```typescript {tabTitle: NextJs}
 function AttachToFeedbackButton() {
   const [feedback, setFeedback] = useState();
-  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  // Read `getFeedback` on the client only, to avoid hydration errors during server rendering
   useEffect(() => {
     setFeedback(Sentry.getFeedback());
   }, []);
@@ -294,7 +256,7 @@ Alternatively, you can call `feedback.createForm()` and have full control over w
 
 ```javascript
 const feedback = feedbackIntegration({
-  // Disable injecting the default widget
+  // Disable the injection of the default widget
   autoInject: false,
 });
 
@@ -305,7 +267,7 @@ form.open();
 ```typescript {tabTitle: NextJS}
 function CreateFeedbackFromButton() {
   const [feedback, setFeedback] = useState();
-  // Read `getFeedback` on the client only, to avoid hydration errors when server rendering
+  // Read `getFeedback` on the client only, to avoid hydration errors during server rendering
   useEffect(() => {
     setFeedback(Sentry.getFeedback());
   }, []);

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

@@ -169,7 +169,7 @@ You can use your own button instead of the default injected button to trigger th
 
 ```javascript
 const feedback = feedbackIntegration({
-  // Disable injecting the default widget
+  // Disable the injection of the default widget
   autoInject: false,
 });
 

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

@@ -0,0 +1,12 @@
+```javascript
+const feedback = feedbackIntegration({
+  // Disable the injection of 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 during 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 during 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.remix.mdx

@@ -0,0 +1,26 @@
+```jsx {tabTitle: Remix}
+function ToggleFeedbackButton() {
+  const [feedback, setFeedback] = useState();
+  // Read `getFeedback` on the client only, to avoid hydration errors during 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>
+  );
+}
+```