Setup Your Feedaura Project
Follow these simple steps to integrate Feedaura into your web application and start collecting valuable user feedback.
1. Create Your Account & Project
2. Install the Package
Install the Feedaura package using npm:
3. Set up Environment Variables
For better security, store your project secret in an environment variable:
# .env.local
NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET=your_project_secret_here
4. Integrate with Your Framework
Step 1: Create a FeedauraWrapper component
First, create a client component that wraps the Feedaura component:
// components/feedaura-wrapper.tsx
'use client'
import React from 'react'
import { Feedback } from 'feedaura'
export function FeedauraWrapper() {
return (
<Feedback
projectSecret={process.env.NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET!}
position="bottom-right"
primaryColor="#0F8CFF"
theme="light"
// Add any other configuration options here
/>
)
}
Step 2: Add the wrapper to your layout
Import and add the FeedauraWrapper component to your root layout:
// app/layout.tsx
import { FeedauraWrapper } from '@/components/feedaura-wrapper'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<FeedauraWrapper />
</body>
</html>
)
}
The Feedback component must be wrapped in a client component because it uses browser APIs. Make sure to add the use client directive at the top of your wrapper component.
Step 1: Create a FeedauraWrapper component
First, create a client component that wraps the Feedaura component:
// components/feedaura-wrapper.tsx
'use client'
import React from 'react'
import { Feedback } from 'feedaura'
export function FeedauraWrapper() {
return (
<Feedback
projectSecret={process.env.NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET!}
position="bottom-right"
primaryColor="#0F8CFF"
theme="light"
// Add any other configuration options here
/>
)
}
Step 2: Add the wrapper to your layout
Import and add the FeedauraWrapper component to your root layout:
// app/layout.tsx
import { FeedauraWrapper } from '@/components/feedaura-wrapper'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<FeedauraWrapper />
</body>
</html>
)
}
The Feedback component must be wrapped in a client component because it uses browser APIs. Make sure to add the use client directive at the top of your wrapper component.
Add Feedaura to your React application
Import and add the Feedback component to your main App component:
// App.jsx
import React from 'react';
import { Feedback } from 'feedaura';
function App() {
return (
<div className="App">
{/* Your app content */}
<Feedback
projectSecret={process.env.REACT_APP_FEEDAURA_PROJECT_SECRET}
position="bottom-right"
primaryColor="#0F8CFF"
theme="light"
/>
</div>
);
}
export default App;
Add Feedaura to your Vue application
Import and add the Feedback component to your App.vue file:
<!-- App.vue -->
<template>
<div id="app">
<!-- Your app content -->
<Feedback
:projectSecret="feedauraSecret"
position="bottom-right"
primaryColor="#0F8CFF"
theme="light"
/>
</div>
</template>
<script>
import { Feedback } from 'feedaura-vue';
export default {
name: 'App',
components: {
Feedback
},
data() {
return {
feedauraSecret: process.env.VUE_APP_FEEDAURA_PROJECT_SECRET
};
}
};
</script>
Verify Your Installation
After deploying your application with Feedaura integrated:
- Visit your deployed site
- Check that the feedback button appears in the specified position
- Click the button to open the feedback form
- Submit a test feedback message
- Log in to your Feedaura Dashboard to confirm your feedback was received
- Explore the AI analysis of your test feedback
Troubleshooting
Next Steps
