Deploy the User Feedback Popup

The GermainUX User Feedback Popup is part of Real User Monitoring and Session Replay. Before enabling the popup, deploy either GermainUX RUM JS or the GermainUX RUM Browser Extension in the monitored application.

Only one of these deployment methods is normally required. Choose the method appropriate for the application.

✅ Choose a Deployment Method

For example, applications such as Salesforce Lightning may require the browser extension for complete root-context monitoring.

See Deploy Real User Monitoring.

⚙️ Deployment Steps

🎨 Configure the User Feedback Popup

The popup's appearance, labels and position can be customized. It is disabled by default and must be enabled for each applicable Monitoring Profile.

💡 Enable the Popup

Set settings.plugins.feedback.enabled to true in the Monitoring Profile's Init Script. The following example enables the popup with its default settings:

const settings = germainApm.getDefaultSettings(loaderArgs, agentConfig);

settings.plugins.feedback.enabled = true;

germainApm.start(settings);

⛔ Disable the Popup

No configuration is required to keep the popup disabled because enabled defaults to false. To disable it explicitly:

const settings = germainApm.getDefaultSettings(loaderArgs, agentConfig);

settings.plugins.feedback.enabled = false;

germainApm.start(settings);

🎨 Customize the Appearance and Position

The following example enables the popup and customizes its positive and negative buttons, labels, colors, comment form and screen position:

const settings = germainApm.getDefaultSettings(loaderArgs, agentConfig);

settings.plugins.feedback = {
    enabled: true,
    positive: {
        icon: 'data:image/jpeg;base64,...',
        label: 'I like this page',
        backgroundColor: 'green'
    },
    negative: {
        icon: 'data:image/jpeg;base64,...',
        label: 'This page contains an error',
        backgroundColor: 'red'
    },
    position: 'bottom-right',
    comment: {
        position: 'right',
        commentHint: 'Tell us more',
        emailHint: 'Email',
        sendHint: 'Send'
    }
};

germainApm.start(settings);

📚 Advanced Configuration Reference

The settings.plugins.feedback object supports the following properties:

type FeedbackSettings = {
    /** Enable the feedback buttons. Default: false. */
    enabled?: boolean;

    /** Positive-feedback button settings. */
    positive?: FeedbackButton;

    /** Negative-feedback button settings. */
    negative?: FeedbackButton;

    /** Popup position. Default: 'bottom-left'. */
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

    /** Comment-form settings. */
    comment?: {
        /** Position relative to the feedback buttons. Default: 'right'. */
        position?: 'left' | 'right';
        /** Comment placeholder. Default: 'Tell us more'. */
        commentHint?: string;
        /** Email placeholder. Default: 'Email'. */
        emailHint?: string;
        /** Submit-button label. Default: 'Send'. */
        sendHint?: string;
        /** Additional styles applied to the comment-form elements. */
        styles?: Record<
            'container' | 'email' | 'comment' | 'send' | 'close',
            Record<string, string>
        >;
    };
};

type FeedbackButton = {
    /** Image supplied as a data URI. */
    icon?: string;
    /** Button title displayed on hover. */
    label?: string;
    /** Button background color. */
    backgroundColor?: string;
    /** Parent element receiving the button. Default: document.body. */
    parentSelector?: string;
    /** Additional styles applied to the button. */
    styles?: Record<string, string>;
};

Default button settings include the GermainUX thumbs-up and thumbs-down icons, their standard accessible labels and the default positive and negative colors. For assistance with advanced configuration, contact GermainUX.

✅ Validate the Deployment

Perform the following test before broad rollout:

1. Open the monitored application as a test user.

2. Confirm that Real User Monitoring is active.

3. Navigate to a page where the popup should be available.

4. Confirm that the feedback controls appear correctly.

5. Submit positive feedback with a test comment.

6. Submit negative feedback in a separate test session.

7. Confirm that both feedback events appear under the User Feedback KPI.

8. Verify that the application, page, user and session context are correct.

9. Open the associated Session Replay and confirm that the feedback event appears at the expected point in the session.

10. Verify that only authorized users can access comments and session data.

📊 Analyze Submitted Feedback

After deployment, feedback can be analyzed through several dashboards:

This allows teams to move from a comment or score to an evidence-based understanding of the user's experience.

🔒 Privacy and Access

Feedback comments and Session Replay may contain personal or sensitive information. Before rollout:

More details on Data Security & Privacy