fix(feedback): Clarify the difference between createWidget and create Form in the feedback public api (#11838)

Prior to this PR it was only possible to get the floating feedback
button if you configured `autoInject: true`.

In our uses on sentry.io we want to be able to show that button on some
pages, but not others. This make it possible, the (react hooks) code to
do that is:
```
useEffect(() => {
  const widget = feedback.createWidget(options);
  return async () => {
    widget.removeFromDom();
  };
}, []);
```

---------

Co-authored-by: Francesco Novy <[email protected]>

Author: ryan953

packages/feedback/src/core/integration.ts

@@ -27,6 +27,7 @@ import {
 import { DEBUG_BUILD } from '../util/debug-build';
 import { isScreenshotSupported } from '../util/isScreenshotSupported';
 import { mergeOptions } from '../util/mergeOptions';
+import type { ActorComponent } from './components/Actor';
 import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
 import { sendFeedback } from './sendFeedback';
@@ -53,7 +54,8 @@ export const buildFeedbackIntegration = ({
 }: BuilderOptions): IntegrationFn<
   Integration & {
     attachTo(el: Element | string, optionOverrides: OverrideFeedbackConfiguration): Unsubscribe;
-    createWidget(optionOverrides: OverrideFeedbackConfiguration): Promise<FeedbackDialog>;
+    createForm(optionOverrides: OverrideFeedbackConfiguration): Promise<FeedbackDialog>;
+    createWidget(optionOverrides: OverrideFeedbackConfiguration): ActorComponent;
     remove(): void;
   }
 > => {
@@ -198,7 +200,7 @@ export const buildFeedbackIntegration = ({
       });
     };
 
-    const attachTo = (el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): Unsubscribe => {
+    const _attachTo = (el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): Unsubscribe => {
       const mergedOptions = mergeOptions(_options, optionOverrides);
 
       const targetEl =
@@ -238,10 +240,11 @@ export const buildFeedbackIntegration = ({
       return unsubscribe;
     };
 
-    const autoInjectActor = (): void => {
+    const _createActor = (optionOverrides: OverrideFeedbackConfiguration = {}): ActorComponent => {
       const shadow = _createShadow(_options);
       const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
       const mergedOptions = mergeOptions(_options, {
+        ...optionOverrides,
         onFormOpen() {
           actor.removeFromDom();
         },
@@ -252,9 +255,8 @@ export const buildFeedbackIntegration = ({
           actor.appendToDom();
         },
       });
-      attachTo(actor.el, mergedOptions);
-
-      actor.appendToDom();
+      _attachTo(actor.el, mergedOptions);
+      return actor;
     };
 
     return {
@@ -264,20 +266,31 @@ export const buildFeedbackIntegration = ({
           return;
         }
 
-        autoInjectActor();
+        _createActor().appendToDom();
       },
 
       /**
        * Adds click listener to the element to open a feedback dialog
        *
        * The returned function can be used to remove the click listener
        */
-      attachTo,
+      attachTo: _attachTo,
+
+      /**
+       * Creates a new widget which is composed of a Button which triggers a Dialog.
+       * Accepts partial options to override any options passed to constructor.
+       */
+      createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): ActorComponent {
+        const actor = _createActor(mergeOptions(_options, optionOverrides));
+        actor.appendToDom();
+        return actor;
+      },
 
       /**
-       * Creates a new widget. Accepts partial options to override any options passed to constructor.
+       * Creates a new Form which you can
+       * Accepts partial options to override any options passed to constructor.
        */
-      async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<FeedbackDialog> {
+      async createForm(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<FeedbackDialog> {
         return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
       },