Configuration of User Feedback Popup

Germain UX’s User Feedback Popup’s look and feel or position are configurable.

By default User Feedback popup is disabled and must be enabled per Monitoring Profile.

Enable

Enable this feature in Init Script by setting settings.plugins.feedback.enabled to true. The following code sample shows how it can be enabled and use popup default settings.

CODE

const settings = germainApm.getDefaultSettings(loaderArgs, agentConfig);
...
settings.plugins.feedback.enabled = true;
...
germainApm.start(settings);

Disable

This configuration is not required as by default popup is disabled. The following code sample however shows how it can be explicitly disabled.

CODE

const settings = germainApm.getDefaultSettings();
...
settings.plugins.feedback.enabled = false;
...
germainApm.start(settings);

Custom Look and Feel

The following code sample shows how to enable this feature with custom look and feel (custom icon, label, background color for positive and negative inputs and custom comment field contnet) and position (bottom-right).

CODE

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

All the settings available on the settings.plugins.feedback object are listed below. Please contact us If you need any help with this advanced configuration.

CODE

/** Enable user feedback buttons if se to true. Default: false. */
enabled?: boolean;
/** Positive button settings. Default: icon: Default thumbs up icon, label: "Send positive feedback for this page", backgroundColor: '#22d249', parentSelector: document.body. */
positive?: FeedbackButton;
/** Negative button settings. Default: icon: Default thumbs up icon, label: "Send negative feedback for this page", backgroundColor: '#e10421', parentSelector: document.body. */
negative?: FeedbackButton;
/** Button absolute position. Default: 'bottom-left'. */
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/** Comment settings */
comment?: {
    /** Comment position relative to positive/negative button. Default: 'right'. */
    position?: 'left' | 'right';
    /** Hint displayed for comment. Default: 'Tell us more'. */
    commentHint?: string;
    /** Hint displayed for email. Default: 'Email'. */
    emailHint?: string;
    /** Hint displayed for send button. Default: 'Send'. */
    sendHint?: string;
    /** Additional styles attribute/value that will get applied to the comment elements. */
    styles?: Record<'container' | 'email' | 'comment' | 'send' | 'close', Record<string, string>>;
}
...
type FeedbackButton = {
    /** Image as data:image URI. */
    icon?: string;
    /** Button title that will show up on mouse over. */
    label?: string;
    /** Button background */
    backgroundColor?: string;
    /** Parent element to which this button will be appended. Default (if not provided): document.body */
    parentSelector?: string;
    /** Additional styles attribute/value that will get applied to this button. */
    styles?: Record<string, string>;
};