Customizing the Feedback button and Confirmation dialog

We often get questions about UI customization of the RootCause popup dialogs. In this post we’ll show you just how easy it is to customize the colors and texts with a few parameters. Let’s get started!

Customizing the feedback button

To customize the feedback button, you put the config options in the showFeedbackButton object. Open its documentation to see all the configuration options:

If you want to localize the text for the Feedback button to Japanese, you can do so with the ‘text’ config:

var logger = new RC.Logger({
    showFeedbackButton      : {
        text : 'フィードバック'
    }
});

var logger = new RC.Logger({

showFeedbackButton : {

text : 'フィードバック'

}

});

Or maybe you just want colors to match your company profile, the simply change the colors with the following configs:

var logger = new RC.Logger({
    showFeedbackButton      : {
        // Text color used on the button and form
        textColor : '#fff',

        //Background color for the feedback button and form
        backgroundColor : '#0088d1',

        //The color used as background in text fields
        foregroundColor : '#fff',

        //The background color for buttons and highlight/hover color for the feedback button
        buttonColor : '#eee',

        //The background color when hovering form buttons
        buttonHoverColor : '#D7CCC8',

        //The color for text in buttons and header
        buttonTextColor : '#555',

        //The feedback button background color
        feedbackButtonColor : '#eee',

        //The feedback button text color
        feedbackButtonTextColor : '#555'
    }
});

var logger = new RC.Logger({

showFeedbackButton : {

// Text color used on the button and form

textColor : '#fff',

//Background color for the feedback button and form

backgroundColor : '#0088d1',

//The color used as background in text fields

foregroundColor : '#fff',

//The background color for buttons and highlight/hover color for the feedback button

buttonColor : '#eee',

//The background color when hovering form buttons

buttonHoverColor : '#D7CCC8',

//The color for text in buttons and header

buttonTextColor : '#555',

//The feedback button background color

feedbackButtonColor : '#eee',

//The feedback button text color

feedbackButtonTextColor : '#555'

}

});

Now the feedback button looks like this:

To see all available config options, please refer to the documentation.

Customizing the confirmation dialog

The confirmation dialog is shown (if enabled) when an error happens to allow a user to decide if the error data should be logged. The dialog styles can be modified according to your needs. If you open the documentation, you see the available configuration options. Let’s change a few properties, add a custom header/intro text and a gray header/button color:

window.logger = new RC.Logger({
    captureScreenshot : true,
    
    showErrorDialog   : {
        titleText : 'Oops... An error happened',
        introText : 'Please help us improve this application',
        buttonColor : 'gray'
    }
});

window.logger = new RC.Logger({

captureScreenshot : true,

showErrorDialog : {

titleText : 'Oops... An error happened',

introText : 'Please help us improve this application',

buttonColor : 'gray'

}

});

Results in the following:

Do you have any additional customization needs not met by our current API? Please let us know and we’ll do our best to support you. Happy customization!

Customizing the Feedback button and Confirmation dialog

Customizing the feedback button

Customizing the confirmation dialog

Leave a Reply Cancel Reply