Next Js: How to set up in 3 steps

Only works for Next.js 14+ projects

Step 1: Install the Official Rasp Npm Package

1npm install rasp-feedback

Step 2: Set your companyId as NEXT_PUBLIC_RASP_COMPANY_ID in your environment variables. You can find you companyId in your dashboard settings:

1NEXT_PUBLIC_RASP_COMPANY_ID=your_companyId

Step 3: Wrap your website with our RaspProvider component in the root layout to fully display the feature board or feedback forms using their target url only. Set up code once and manage remotely.

1import { RaspProvider } from "rasp-feedback/nextjs";
2      
3      export default function HomePage() {
4        return (
5          <main>
6            
7            <RaspProvider>
8      
9            <OtherComponents />
10      
11            </RaspProvider>
12            
13          </main>
14        );
15      }

This will provide a launcher for user to click to complete your form. It will automatically show the form that you have set for this url in your website

How to use form as a Component

Import RaspForm and place it where you want to appear and Rasp will automatically check which form must be shown on this url

1import { RaspForm } from "rasp-feedback/nextjs";
2      
3      export default function HomePage() {
4        return (
5          <main>
6            <RaspForm />
7            
8          </main>
9        );
10      }

How to set launcher position

Enter launcherPosition in the RaspProvider component as a percentage value for the top and left properties

1import { RaspProvider } from "rasp-feedback/nextjs";
2      
3      export default function HomePage() {
4        return (
5          <main>
6            
7            <RaspProvider launcherPosition={{ top: '90%', left: '95%' }}>
8      
9            <OtherComponents />
10      
11            </RaspProvider>
12            
13          </main>
14        );
15      }