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.
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.
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).
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.
/** 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>;
};