Skip to content

Commit 03f7034

Browse files
dgarcia360dgarcia360
committed
docs: align props
1 parent 9d30154 commit 03f7034

File tree

4 files changed

+60
-42
lines changed

4 files changed

+60
-42
lines changed

‎docs/customization/layout.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ The table below lists all the available properties you can set:
3737
| `modal-position` | **Type**: `string`<br />**Default value**: `center`<br />**Available values:** `center`, `sidebar-right`, `sidebar-left`, `top-right`, `top-left`, `bottom-right`, `bottom-left`, `center-right`, `center-left`<br /><br />Position of the feedback modal.|
3838
| `rating` | **Type**: `number`<br />**Default value**: -1 (neutral) <br /><br /> Rating selected by default. **Available values:** `stars` mode: 1...5. `thumbs` mode: `0` dislike and `1` like. `-1` means neutral in both modes. |
3939
| `rating-mode` | **Type**: `string`<br />**Default value**: `thumbs` <br /><br /> **Available values:** `thumbs`, `stars`<br /><br />Type of rating system.|
40+
| `recaptcha-text` | **Type**: `string`<br />**Default value**: `This form is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.`<br /><br />Text displayed in the footer when reCAPTCHA is enabled. Supports HTML. |
4041
| `sessionId` | **Type**: `string`<br />**Default value**: Autogenerated <br /><br /> Identifies the current user session. By default, this value is autogenerated if not provided. You can override it to specify a custom session ID, which can be useful for tracking or linking specific sessions across different analytics tools. |
4142
| `submit` | **Type**: `boolean`<br />**Default**: `false`<br /><br />If set to `true`, submits feedback automatically without opening the modal, using the provided `rating` value. If not set, the default rating of `0` (negative feedback) is sent. |
4243
| `privacy-policy-text` | **Type**: `string`<br />**Default value**: `I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.`<br /><br />Privacy policy text. |

‎docs/customization/styles.mdx‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,33 @@ The tables below lists all the available properties you can override:
2626

2727
```css
2828
:root {
29+
/* Base Colors */
30+
--feedback-color-white: #ffffff;
31+
--feedback-color-black: #191919;
32+
--feedback-color-gray-100: #f1f3f4;
33+
--feedback-color-gray-300: #d1d5db;
34+
--feedback-color-gray-400: #9ca3af;
35+
--feedback-color-gray-500: #999999;
36+
--feedback-color-gray-600: #5f6368;
37+
--feedback-color-gray-700: #363636;
38+
--feedback-color-gray-800: #2a2a2a;
39+
--feedback-color-blue-500: #3b82f6;
40+
--feedback-color-blue-600: #0070F4;
41+
--feedback-color-orange: #ffb422;
42+
--feedback-color-light: #ccc;
43+
2944
/* Colors */
30-
--feedback-primary-color: #0070F4;
31-
--feedback-secondary-color: #f1f3f4;
32-
--feedback-light-color: #ccc;
33-
--feedback-dark-color: #191919;
34-
--feedback-text-color: #5f6368;
35-
--feedback-white-color: #fff;
36-
--feedback-highlight-color: #ffb422;
37-
45+
--feedback-primary-color: var(--feedback-color-blue-600);
46+
--feedback-secondary-color: var(--feedback-color-gray-100);
47+
--feedback-light-color: var(--feedback-color-light);
48+
--feedback-dark-color: var(--feedback-color-black);
49+
--feedback-text-color: var(--feedback-color-gray-600);
50+
--feedback-white-color: var(--feedback-color-white);
51+
--feedback-highlight-color: var(--feedback-color-orange);
52+
3853
/* Fonts */
3954
--feedback-font-family: "Inter", "Tahoma", "sans-serif";
40-
--feedback-heading-font-size: 16px;
55+
--feedback-heading-font-size: 20px;
4156
--feedback-text-font-size: 14px;
4257
}
4358
```
@@ -64,7 +79,6 @@ The tables below lists all the available properties you can override:
6479

6580
```css
6681
:root {
67-
6882
--feedback-modal-button-bg-color: var(--feedback-white-color);
6983
--feedback-modal-button-bg-color-active: var(--feedback-white-color);
7084
--feedback-modal-button-border-color: var(--feedback-light-color);
@@ -99,9 +113,10 @@ The tables below lists all the available properties you can override:
99113
--feedback-modal-header-font-size: var(--feedback-heading-font-size);
100114
--feedback-modal-header-font-weight: 500;
101115
--feedback-modal-header-text-color: var(--feedback-dark-color);
102-
--feedback-modal-input-bg-color: var(--feedback-secondary-color);
103-
--feedback-modal-input-border-color: transparent;
104-
--feedback-modal-input-border-color-focused: transparent;
116+
--feedback-modal-input-bg-color: var(--feedback-color-white);
117+
--feedback-modal-input-border-color: rgba(0, 0, 0, 0.12);
118+
--feedback-modal-input-border-color-hover: rgba(0, 0, 0, 0.24);
119+
--feedback-modal-input-border-color-focused: var(--feedback-primary-color);
105120
--feedback-modal-input-border-radius: 4px;
106121
--feedback-modal-input-font-size: var(--feedback-text-font-size);
107122
--feedback-modal-input-text-color: var(--feedback-text-color);
@@ -141,20 +156,23 @@ The tables below lists all the available properties you can override:
141156

142157
```css
143158
[data-theme='dark'] {
144-
--feedback-text-color: #b0b8c4;
145-
--feedback-light-color: #363636;
159+
--feedback-text-color: var(--feedback-color-gray-400);
160+
--feedback-light-color: var(--feedback-color-gray-700);
146161
--feedback-modal-button-bg-color-active: transparent;
147-
--feedback-modal-button-icon-color: var(--feedback-white-color);
148-
--feedback-modal-button-text-color: var(--feedback-white-color);
162+
--feedback-modal-button-icon-color: var(--feedback-color-gray-300);
163+
--feedback-modal-button-text-color: var(--feedback-color-gray-300);
149164
--feedback-modal-close-bg-color: transparent;
150-
--feedback-modal-close-color: var(--feedback-white-color);
165+
--feedback-modal-close-color: var(--feedback-color-gray-300);
151166
--feedback-modal-content-bg-color: var(--feedback-dark-color);
152-
--feedback-modal-content-text-color: var(--feedback-text-color);
153-
--feedback-modal-footer-link: var(--feedback-white-color);
167+
--feedback-modal-content-text-color: var(--feedback-color-gray-400);
168+
--feedback-modal-footer-link: var(--feedback-color-gray-400);
154169
--feedback-modal-header-text-color: var(--feedback-white-color);
155-
--feedback-modal-input-bg-color: var(--feedback-light-color);
156-
--feedback-modal-input-text-color: var(--feedback-white-color);
157-
--feedback-modal-rating-button-color: var(--feedback-white-color);
170+
--feedback-modal-input-bg-color: var(--feedback-color-gray-800);
171+
--feedback-modal-input-border-color: rgba(255, 255, 255, 0.1);
172+
--feedback-modal-input-border-color-hover: rgba(255, 255, 255, 0.2);
173+
--feedback-modal-input-border-color-focused: var(--feedback-primary-color);
174+
--feedback-modal-input-text-color: var(--feedback-color-gray-300);
175+
--feedback-modal-rating-button-color: var(--feedback-color-gray-300);
158176
--feedback-modal-screenshot-close-color: var(--feedback-white-color);
159177
--feedback-modal-screenshot-header-bg-color: var(--feedback-dark-color);
160178
--feedback-modal-screenshot-header-text-color: var(--feedback-white-color);

‎docs/customization/text.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ The table below lists all the available properties you can override:
3131
| `modal-title-error-4-0-4` | **Type**: `string`<br />**Default value**: `We could not find the provided project id in PushFeedback.`<br />Message displayed when there's a 404 error submitting feedback.<br /><br />|
3232
| `email-placeholder` | **Type**: `string`<br />**Default value**: `Email address (optional)`<br />Placeholder text for the email input field.<br /><br /> |
3333
| `footer-text` | **Type**: `string`<br />**Default**: `""`<br /><br />Optional footer text displayed after "Powered by Pushfeedback.com". |
34-
| `message-placeholder` | **Type**: `string`<br />**Default value**: `Comments`<br />Placeholder for the feedback message input.<br /><br />|
34+
| `message-placeholder` | **Type**: `string`<br />**Default value**: `Share your thoughts...`<br />Placeholder for the feedback message input.<br /><br />|
3535
| `modal-title` | **Type**: `string`<br />**Default value**: `Share your feedback`<br />Title of the feedback modal.<br /><br /> |
3636
| `modal-title-error` | **Type**: `string`<br />**Default value**: `Oops!`<br />Title displayed when there's an error submitting feedback.<br /><br />|
3737
| `modal-title-success` | **Type**: `string`<br />**Default value**: `Thanks for your feedback!`<br />Title displayed upon successful feedback submission.<br /><br />|

‎docs/security/recaptcha.md‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@ Add invisible bot protection to your feedback widget with Google reCAPTCHA v3. I
99

1010
## Get your reCAPTCHA keys
1111

12-
1. Visit the [reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin) and sign in
13-
2. Click **+** to register a new site
14-
3. Select **reCAPTCHA v3** as the type
15-
4. Add your domain(s) without `https://` (e.g., `docs.example.com`)
16-
5. Submit and copy both the **Site Key** and **Secret Key**
12+
1. Visit the [reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin) and sign in.
13+
2. Click **+** to register a new site.
14+
3. Select **reCAPTCHA v3** as the type.
15+
4. Add your domain(s) without `https://` (e.g., `docs.example.com`).
16+
5. Submit and copy both the **Site Key** and **Secret Key**.
1717

1818
## Enable in your project
1919

20-
1. Go to your project in the [PushFeedback dashboard](https://app.pushfeedback.com)
21-
2. Click **Settings** and find the **Security** section
22-
3. Enable reCAPTCHA v3 and paste both keys
23-
4. Set the minimum score (default 0.5 works for most sites)
24-
5. Save
20+
1. Go to your project in the [PushFeedback dashboard](https://app.pushfeedback.com).
21+
2. Click **Settings** and find the **Security** section.
22+
3. Enable reCAPTCHA v3 and paste both keys.
23+
4. Set the minimum score (default 0.5 works for most sites).
24+
5. Save.
2525

2626
Your widget will now verify submissions automatically. No code changes needed.
2727

@@ -34,17 +34,16 @@ reCAPTCHA scores range from 0.0 (bot) to 1.0 (human). Start with 0.5 and adjust:
3434

3535
## Notes
3636

37-
- Your secret key is encrypted before storage
38-
- HTTPS is required (localhost works for testing)
39-
- Users won't see any difference (reCAPTCHA v3 is invisible)
37+
- Your secret key is encrypted before storage.
38+
- HTTPS is required (localhost works for testing).
39+
- The reCAPTCHA badge is hidden, and the required Google disclosure text is automatically displayed in the widget footer.
40+
- You can customize the disclosure text using the `recaptchaText` prop (see [Layout customization](../customization/layout)).
4041

4142
## Troubleshooting
4243

43-
**"reCAPTCHA verification required"** - Ad blockers or privacy extensions may be blocking the script. Ask users to disable them temporarily.
44+
- **"reCAPTCHA verification required"** - Ad blockers or privacy extensions may be blocking the script. Ask users to disable them temporarily.
4445

45-
**"reCAPTCHA verification failed"** - Check your keys are correct and your domain is registered in Google's console. If legitimate users are blocked, lower your score threshold.
46+
- **"reCAPTCHA verification failed"** - Check your keys are correct and your domain is registered in Google's console. If legitimate users are blocked, lower your score threshold.
4647

47-
**General issues** - Verify you selected reCAPTCHA v3 (not v2) and both keys are from the same site registration.
48-
49-
---
48+
- **General issues** - Verify you selected reCAPTCHA v3 (not v2) and both keys are from the same site registration.
5049

0 commit comments

Comments
 (0)