Skip to content

Commit fcc4f64

Browse files
dgarcia360dgarcia360
committed
docs: add more installation guides
1 parent b3ca5f3 commit fcc4f64

File tree

9 files changed

+710
-44
lines changed

9 files changed

+710
-44
lines changed

‎docs/installation/_draft/madcap_flare.md‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎docs/installation/fumadocs.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
sidebar_label: Fumadocs
3+
---
4+
5+
# Feedback widget for Fumadocs
6+
7+
Here's a step-by-step guide to help you install PushFeedback in your Fumadocs project.
8+
9+
![Feedback widget for docs screenshot](./images/feedback-widget-starlight.png)
10+
11+
## Prerequisites
12+
13+
Before you begin, you'll need to have the following:
14+
15+
- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
16+
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
17+
- A Fumadocs site and Node.js installed.
18+
19+
## Installation
20+
21+
To integrate the PushFeedback widget into your Fumadocs site:
22+
23+
1. Open your terminal or command prompt. Navigate to your project's root directory using the `cd` command:
24+
25+
```console
26+
cd path/to/your/project
27+
```
28+
29+
Replace `path/to/your/project` with your project's actual directory path.
30+
31+
1. With your terminal still open, run the following command to install PushFeedback:
32+
33+
```console
34+
npm install pushfeedback-react
35+
```
36+
37+
:::info
38+
If you're using pnpm as your package manager, run `pnpm add pushfeedback-react` instead of the npm command above.
39+
:::
40+
41+
1. Create a new component file `components/feedback-widget.tsx` with the following content:
42+
43+
```tsx
44+
'use client';
45+
46+
import React, { useEffect } from 'react';
47+
import { FeedbackButton } from 'pushfeedback-react';
48+
import { defineCustomElements } from 'pushfeedback/loader';
49+
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
50+
51+
export function FeedbackWidget() {
52+
useEffect(() => {
53+
if (typeof window !== 'undefined') {
54+
defineCustomElements(window);
55+
}
56+
}, []);
57+
58+
return (
59+
<FeedbackButton
60+
project="<YOUR_PROJECT_ID>"
61+
button-position="bottom-right"
62+
modal-position="bottom-right"
63+
button-style="dark"
64+
custom-font="true">
65+
Feedback
66+
</FeedbackButton>
67+
);
68+
}
69+
```
70+
71+
Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
72+
73+
1. Import and add the `FeedbackWidget` component to your root layout file (`app/layout.tsx`):
74+
75+
```tsx
76+
import { FeedbackWidget } from '@/components/feedback-widget';
77+
78+
export default function RootLayout({
79+
children,
80+
}: {
81+
children: React.ReactNode;
82+
}) {
83+
return (
84+
<html lang="en">
85+
<body>
86+
{children}
87+
<FeedbackWidget />
88+
</body>
89+
</html>
90+
);
91+
}
92+
```
93+
94+
1. Start your Fumadocs project by running `npm run dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site.
95+
96+
## Next steps
97+
98+
For more about customization and additional features exploration, check out the [Customization](/category/customization) section.
99+
100+
Need assistance? We're here to help! Reach out to us at [PushFeedback Support](https://pushfeedback.com/contact).
101+

‎docs/installation/madcap-flare.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
sidebar_label: MadCap Flare
3+
---
4+
5+
# Feedback widget for MadCap Flare
6+
7+
Here's a step-by-step guide to help you install PushFeedback in your MadCap Flare documentation.
8+
9+
![Feedback widget for docs screenshot](./images/feedback-widget-starlight.png)
10+
11+
## Prerequisites
12+
13+
Before you begin, you'll need to have the following:
14+
15+
- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
16+
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
17+
- MadCap Flare installed and a project opened.
18+
19+
## Installation
20+
21+
To integrate the PushFeedback widget into your MadCap Flare documentation:
22+
23+
1. Open your MadCap Flare project.
24+
25+
1. Navigate to **Resources > Stylesheets** in the Project Organizer.
26+
27+
1. Open your main stylesheet (or create a new one if needed).
28+
29+
1. Add the following CSS import at the top of your stylesheet:
30+
31+
```css
32+
@import url('https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css');
33+
```
34+
35+
1. Navigate to **Resources > Master Pages** in the Project Organizer.
36+
37+
1. Open your master page (e.g., `Default.htm` or the specific master page you're using for your documentation).
38+
39+
1. Before the closing `</head>` tag, insert the following script:
40+
41+
```html
42+
<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>
43+
```
44+
45+
1. Near the closing `</body>` tag, add the feedback button:
46+
47+
```html
48+
<feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>
49+
```
50+
51+
Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
52+
53+
1. Save all changes to your master page and stylesheet.
54+
55+
1. Build your MadCap Flare project by going to **Project > Build Primary** (or the specific target you're using).
56+
57+
1. Once the build is complete, open the generated HTML output in a web browser to verify that the feedback button appears and functions correctly on every topic.
58+
59+
## Tips
60+
61+
- If you have multiple master pages, you'll need to add the feedback button to each master page where you want it to appear.
62+
- You can customize the button's position and style by modifying the attributes in the `<feedback-button>` element.
63+
- The feedback button will automatically appear on all pages that use the modified master page.
64+
65+
## Next steps
66+
67+
For more about customization and additional features exploration, check out the [Customization](/category/customization) section.
68+
69+
Need assistance? We're here to help! Reach out to us at [PushFeedback Support](https://pushfeedback.com/contact).
70+

‎docs/installation/nextra.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
sidebar_label: Nextra
3+
---
4+
5+
# Feedback widget for Nextra
6+
7+
Here's a step-by-step guide to help you install PushFeedback in your Nextra project.
8+
9+
![Feedback widget for docs screenshot](./images/feedback-widget-starlight.png)
10+
11+
## Prerequisites
12+
13+
Before you begin, you'll need to have the following:
14+
15+
- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
16+
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
17+
- A Nextra site and Node.js installed.
18+
19+
## Installation
20+
21+
To integrate the PushFeedback widget into your Nextra site:
22+
23+
1. Open your terminal or command prompt. Navigate to your project's root directory using the `cd` command:
24+
25+
```console
26+
cd path/to/your/project
27+
```
28+
29+
Replace `path/to/your/project` with your project's actual directory path.
30+
31+
1. With your terminal still open, run the following command to install PushFeedback:
32+
33+
```console
34+
npm install pushfeedback-react
35+
```
36+
37+
:::info
38+
If you're using yarn as your package manager, run `yarn add pushfeedback-react` instead of the npm command above.
39+
:::
40+
41+
1. Create a new component file `components/FeedbackWidget.tsx` (or `components/FeedbackWidget.jsx` for JavaScript) with the following content:
42+
43+
```tsx
44+
import React, { useEffect } from 'react';
45+
import { FeedbackButton } from 'pushfeedback-react';
46+
import { defineCustomElements } from 'pushfeedback/loader';
47+
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
48+
49+
export default function FeedbackWidget() {
50+
useEffect(() => {
51+
if (typeof window !== 'undefined') {
52+
defineCustomElements(window);
53+
}
54+
}, []);
55+
56+
return (
57+
<FeedbackButton
58+
project="<YOUR_PROJECT_ID>"
59+
button-position="bottom-right"
60+
modal-position="bottom-right"
61+
button-style="dark">
62+
Feedback
63+
</FeedbackButton>
64+
);
65+
}
66+
```
67+
68+
Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
69+
70+
1. Update your Nextra theme configuration file (`theme.config.tsx` or `theme.config.jsx`) to include the feedback widget. If you're using the Nextra Docs theme, add it to the `main` function:
71+
72+
```tsx
73+
import FeedbackWidget from './components/FeedbackWidget'
74+
75+
export default {
76+
// ... other config options
77+
main: ({ children }) => {
78+
return (
79+
<>
80+
{children}
81+
<FeedbackWidget />
82+
</>
83+
)
84+
}
85+
}
86+
```
87+
88+
1. Start your Nextra project by running `npm run dev` or `yarn dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site.
89+
90+
## Next steps
91+
92+
For more about customization and additional features exploration, check out the [Customization](/category/customization) section.
93+
94+
Need assistance? We're here to help! Reach out to us at [PushFeedback Support](https://pushfeedback.com/contact).
95+

‎docs/installation/paligo.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
sidebar_label: Paligo
3+
---
4+
5+
# Feedback widget for Paligo
6+
7+
Here's a step-by-step guide to help you install PushFeedback in your Paligo documentation.
8+
9+
![Feedback widget for docs screenshot](./images/feedback-widget-starlight.png)
10+
11+
## Prerequisites
12+
13+
Before you begin, you'll need to have the following:
14+
15+
- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
16+
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
17+
- A Paligo account with publishing permissions.
18+
19+
## Installation
20+
21+
To embed the PushFeedback widget into your Paligo documentation:
22+
23+
1. Log in to your Paligo account and open your publication.
24+
25+
1. Navigate to **Settings > Layout** and select the HTML5 layout you want to modify.
26+
27+
1. In the Layout Editor, go to the **Scripts** section.
28+
29+
1. In the **Head Section** field, add the following code to load the PushFeedback styles and scripts:
30+
31+
```html
32+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css"/>
33+
<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>
34+
```
35+
36+
1. In the **Body Section** field (or **Footer Section** if available), add the feedback button:
37+
38+
```html
39+
<feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>
40+
```
41+
42+
Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
43+
44+
1. Save your layout changes.
45+
46+
1. Publish your Paligo documentation using the modified layout.
47+
48+
1. Open your published documentation in a web browser to verify the feedback button appears and functions correctly.
49+
50+
## Alternative: Using Custom CSS/JS Files
51+
52+
If your Paligo layout supports custom CSS and JavaScript files:
53+
54+
1. Create a JavaScript file with the following content:
55+
56+
```js
57+
// Load PushFeedback
58+
(function() {
59+
var link = document.createElement('link');
60+
link.rel = 'stylesheet';
61+
link.href = 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css';
62+
document.head.appendChild(link);
63+
64+
var script = document.createElement('script');
65+
script.type = 'module';
66+
script.src = 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js';
67+
document.head.appendChild(script);
68+
69+
script.onload = function() {
70+
var feedbackButton = document.createElement('feedback-button');
71+
feedbackButton.setAttribute('project', '<YOUR_PROJECT_ID>');
72+
feedbackButton.setAttribute('button-position', 'bottom-right');
73+
feedbackButton.setAttribute('modal-position', 'bottom-right');
74+
feedbackButton.setAttribute('button-style', 'dark');
75+
feedbackButton.textContent = 'Feedback';
76+
document.body.appendChild(feedbackButton);
77+
};
78+
})();
79+
```
80+
81+
Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).
82+
83+
1. Upload this file to your Paligo resources and reference it in your layout's Scripts section.
84+
85+
## Next steps
86+
87+
For more about customization and additional features exploration, check out the [Customization](/category/customization) section.
88+
89+
Need assistance? We're here to help! Reach out to us at [PushFeedback Support](https://pushfeedback.com/contact).
90+

0 commit comments

Comments
 (0)