Customizing your portal and widget

Customization options are available for the portal and widget.

Options are divided into several tabs: Portal, Widget, and Messages.

Using the in-app editor

Portal

The portal editor is divided into four main sections:

Styling

  • Company Name - used if Logo not available
  • Logo - upload image
  • Buttons - will affect all buttons and link colors.
  • Powered by ProdPad - show/hide the powered by ProdPad badge. 

Main Content Page

  • Show feedback form - Decide whether you want to use the form available to gather feedback.
  • Show heading - decide whether you want to show the form's header title, description, or both.
  • Inputs - Edit all inputs.
  • Ideas - If you choose to display ideas, decide whether you're displaying headers and descriptions for the section.

Feedback Capture

This is the pop up modal once a user selects an idea.

  • Modal window title - pop up window display name.
  • View detail button - This will send the user to the idea details.
  • Submit button - Submit feedback.

Idea Details

This will display the idea details in a pop up modal (title and description only.)

  • Modal window title - pop up window display name.
  • Button text - Button submit text.

As you make changes, a preview window will be available for you to see how those changes affect your portal. To make text edits, simply click on the text field on the preview screen. 

 

Widget 

Styling

  • Colors - Define icon and text color.
  • Icon & text visibility - Show whether to display icon, text, or both on widget button.
  • Position - define position of widget on your website.
  • Shape - Choose between a round icon, rounded corners, or square corners.
  • Button text - Define text shown to users.
  • Powered by ProdPad - show/hide the powered by ProdPad badge. 

As you make changes, a preview window will be available for you to see how those changes affect your portal. To make text edits, simply click on the text field on the preview screen. 

If you'd like to preview the widget on your own site, enter the URL on the preview box.

Feedback Capture

  • Show header - Modal title.
  • Show description - Description text for modal.
  • Feedback details - Description for text field.
  • Button - Submit button.

Customer details

  • Show header - Display message title.
  • Show subheader - Subheader text.
  • Customer details - Customer name and email input.
  • Button - Submit button.

Messages

These are error and success messages that will show to the end user as they interact with the widgets. All messages can be edited and managed.

Using CSS

Customization is available on the widget only for all accounts Standard and below using CSS only.

These are the elements you can modify:

Widget - (The 'Got Feedback?' button)

#pp-cfp-root #pp-cfp-trigger 

Dialog Box

#pp-cfp-root #pp-cfp-dialog

Submit buttons inside the dialog box

#pp-cfp-root #pp-cfp-form button 

To optimize widget box on mobile

@media only screen and (max-width: 480px), only screen and 
(max-device-width: 480px) { 
#pp-cfp-root #pp-cfp-dialog { 
width:100%!important; 
} 
}

The full CSS file is hosted at https://beta.prodpad.com/static/css/prodpad-cfp.css
Have more questions? Submit a request

Comments