Customizing your portal and widget

Customization options are available for the portal and widget.

Using the in-app editor

Portal

You can customize your portal using the in-app editor. 

The following options are available:

  • Portal Name - used if Logo not available
  • Logo - upload image
  • Primary color - will affect all buttons and link colors
  • Button text color - will affect all button text
  • Feedback form & visible ideas - decide whether you want to show the form only, ideas only, or both.
  • Feedback form header & description - decide whether you want to show the form's header title, description, or both.
  • Ideas header & description - decide whether you want to show the idea tiles header title, description, or both.
  • Idea descriptions - decide whether to show idea titles or include their description as well. 
  • Powered by ProdPad - show/hide the powered by ProdPad badge. 
  • Text - You can change all text and error messages.

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

  • Primary color - Select primary color for widget.
  • Position - define position of widget on your website.
  • Icon & text visibility - Show whether to display icon, text, or both on widget button.
  • Icon & text color - define icon and text colors of widget button.
  • Shape - Choose between a round icon, rounded corners, or square corners.
  • 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.

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

Powered by Zendesk