PDS Feedback Widget Javascript-based overlay and modal window that provides a user with a form to provide comments or feedback on the web page they are currently accessing. When a comment is submitted, it will be sent to the PDS Help Desk and forwarded to the applicable node that has the application deployed.
Before being able to use this widget, you will need to register your hostname with the Engineering Node in order to enable the Google Re-captcha that is part of the application.
Submit a request to the PDS Help Desk <https://pds.nasa.gov/?feedback=true>_ with the following information:
- Hostname(s) for your website
- Point(s) of contact to receive the Feedback
- Apache Web Server
- PHP 5.2+
- The Feedback widget can be installed on other web servers which have PHP enabled, but the exact steps may differ depending upon the software and configuration.
- Web servers without PHP will not be able to use the Feedback widget.
- For PHP versions prior to 8.0.0, verify the JSON extension is enabled.
A few links that may be helpful for installing and configuring PHP on your Apache Web Server:
- https://www.php.net/manual/en/install.unix.apache2.php
- https://www.petefreitag.com/item/516.cfm
- https://www.tutorialspoint.com/php7/php7_apache_configuration.htm
Here are the steps for deploying the Feedback widget to your website on an Apache Web Server:
-
Register with Engineering Node if you have not already.
-
Add the following code snippet between the
<head>tag on each page of your website. If your website uses a header file, you can place it in there:
<!-- PDS Feedback Widget -->
<!-- Only add JQuery if you do not already include a library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
<link rel="stylesheet" href="/feedback/css/feedback.css" type="text/css" media="screen" />
<script src="/feedback/js/modernizr-custom.js"></script>
<script src="/feedback/js/config.js"></script>
<script src="/feedback/js/feedback.js"></script>
<!-- -->
-
Download the Feedback Widget tar or zip from Github to your local machine, then copy to your home directory on the machine hosting the website.
-
From your home directory on the machine hosting your website, unpack the widget:
tar -xvzf <.tar.gz>
#or
unzip <.zip>
-
If you did not receive it when you registered with the Engineering Node, email the PDS Help Desk for the Re-captcha secret key. From the root folder of the widget, open
feedback/recaptcha-v3-verify.phpand replace$SECRET_CODEwithin the single quotation marks with the provided secret key. -
Next, configure the Feedback Widget . From the root folder of the widget, open
feedback/js/config.jsin your text editor of choice.
A list and explanation of optional configurable variables can be found in the following section. Note: It is highly recommended that you update additionalLinks to provide help information unique to your website. -
Now we want to move the files needed for the widget to the home directory for your website, or WEB_HOME_PATH. This WEB_HOME_PATH is the path where your homepage resides. For example, if your homepage is
/my/website/index.html, then your WEB_HOME_PATH is/my/website/. To move the files, from the command-line:-
macOS / Linux
# Make sure you are in the the feedback widget $ pwd /path/to/feedback-widget # Run deploy.sh to push the files to WEB_HOME_PATH $ ./deploy.sh /my/website sending incremental file list feedback/ feedback/recaptcha-v3-verify.php feedback/css/ feedback/css/feedback.css feedback/image/ feedback/image/iconfinder_Help.svg feedback/image/msg_icon.png feedback/js/ feedback/js/config.js feedback/js/feedback.js feedback/js/modernizr-custom.js -
Windows TBD
-
| Variable | Description | Default Value | Accepted Values or Types0 |
|---|---|---|---|
| header | The header or title in the Feedback popup. | "Help Desk" | text |
| feedbackType | Type of feedback for the user to specify if he or she so desires. | "Comment,Question,Problem/Bug,Kudos,Other" | text1 |
| additionalLinks | Additional link(s) the user may find helpful. | --- | --- |
| - title | The text displayed for the link. | "Information for Data Users" "Information for Proposers" "Information for Providers" "OpenPlanetary Forum" "Site Map" |
text |
| - url | The URL of the link. | "https://pds.nasa.gov/home/users/" "https://pds.nasa.gov/home/proposers/" "https://pds.nasa.gov/home/providers/" "https://forum.openplanetary.org" "https://pds.nasa.gov/site-help.shtml" |
valid URLs |
| label | The text on the Feedback tab. | "Need Help?" | text |
| color | The color of the Feedback tab. | "#0b3d91" (NASA blue) | text2 |
| fontColor | The color of the text on the Feedback tab. | "#ffffff" (white) | text2 |
| fontSize | The size of the text on the Feedback tab. | "16" | integer3,5 |
| size | --- | --- | --- |
| - width | The width of the Feedback tab. | "150" | integer3,5 |
| - height | The height of the Feedback tab. | "60" | integer3,5 |
| placement | --- | --- | --- |
| - side | The side of screen to attach the Feedback tab. | "right" | "RIGHT" "LEFT" "TOP" "BOTTOM" |
| - offset | The offset from top or left side of the screen.7 | "50" | integer4,5 ∈ [0,100]6 |
0: All values must be enclosed within double quotation marks.
1: Separate multiple values with a comma.
2: Must be written as a hexadecimal, RGB, or HSL color, or be from this list of accepted color names. If you are unfamiliar with these formats, sites such as ColorHexa can help you find an exact color in the accepted formats. Be sure to include '#', 'rgb()', or 'hsl()' within the double quotations in config.js as needed.
3: Used with the unit 'px' at 1px = 1/96th of an inch. For a digital facsimile of how different px values render on your screen, there are resources such as this w3schools widget. (To use, adjust the integer value for any font-size in the left pane then click the green 'Run' button near the top to refresh the results in the right pane.)
4: Used with the unit 'vh' or 'vw' at 1vh or 1vw = 1/100th of the browser window's height or width.
5: Enter the integer value only. Do not include such characters as '%', 'vh', 'vw', 'px', 'pt', 'em', 'rem', etc.
6: If this value is not in the range of 0 to 100 (inclusive) or is such that a part of the tab would not be visible, the most extreme value allowed which keeps the entire tab visible will be applied.
7: Depending on the side of screen specified, this places the vertical center of the tab proportional to the height of the screen or the left corner of the tab proportional to the width of the screen. For instance, if you fill in config.js as follows:
placement: {
side: "bottom",
offset: "0"
}
the Feedback tab will be on the bottom of the screen squarely in the left corner.
placement: {
side: "left",
offset: "25"
}
places the Feedback tab on the left side of the screen a quarter of the way down from the top.
The following steps will help you uninstall the feedback widget:
- Remove the following code snippet from any web pages it was added to:
<!-- PDS Feedback Widget -->
<!-- Only add JQuery if you do not already include a librar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
<link rel="stylesheet" href="/feedback/css/feedback.css" type="text/css" media="screen" />
<script src="/feedback/js/modernizr-custom.js"><script>
<script src="/feedback/js/config.js"></script>
<script src="/feedback/js/feedback.js"></script>
<!-- -->
- Remove the files from WEB_HOME_PATH/feedback:
# Unix example
rm -fr /my/website/feedback
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent