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:
A few links that may be helpful for installing and configuring PHP on your Apache Web Server:
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="https://github.com/NASA-PDS/feedback-widget/blob/main/feedback/css/feedback.css" type="text/css" media="screen" />
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/feedback/js/modernizr-custom.js"></script>
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/feedback/js/config.js"></script>
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/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>
unzip <.zip>
5. If you did not receive it when you registered with the Engineering Node, email the [PDS Help Desk](mailto:pds_operator@jpl.nasa.gov?subject=Feedback%20reCAPTCHA%20secret%20key) for the Re-captcha secret key. From the root folder of the widget, open `feedback/recaptcha-v3-verify.php` and replace `$SECRET_CODE` within the single quotation marks with the provided secret key.
6. Next, configure the Feedback Widget . From the root folder of the widget, open `feedback/js/config.js` in your text editor of choice.<br><br>
A list and explanation of optional configurable variables can be found in the [following section](#configurable-variables). *Note: It is highly recommended that you update **additionalLinks** to provide help information unique to your website.*
7. 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
```
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:
<!-- 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="https://github.com/NASA-PDS/feedback-widget/blob/main/feedback/css/feedback.css" type="text/css" media="screen" />
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/feedback/js/modernizr-custom.js"><script>
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/feedback/js/config.js"></script>
<script src="https://github.com/NASA-PDS/feedback-widget/raw/main/feedback/js/feedback.js"></script>
<!-- -->
# Unix example
rm -fr /my/website/feedback