feedbacktobigest v1.1.1

Feedbacktobigest

The feedbacktobigest is a lightweight React component designed to capture user feedback directly on your web application. It supports multiple integrations like Google Forms, Trello, Monday, and Notion.

Features

• Capture user feedback with a form and a screenshot of the page.
• Send feedback directly to Google Forms, Trello, Monday, or Notion.
• Easily integrate into any React or Next.js application.

Using npm

npm install feedbacktobigest

Using yarn

yarn add feedbacktobigest

Usage

To use the Feedbacktobigest component, import it into your React or Next.js component and configure it according to your chosen integration.

import React from 'react';
import FeedbackWidget from 'feedbacktobigest';

const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <FeedbackWidget
        integrationType='notion' // Change to 'googleForms', 'trello', or 'monday'
        endpointUrl='https://api.notion.com/v1'
        apiKey='YOUR_NOTION_API_KEY'
        formId='YOUR_NOTION_DATABASE_ID'
      />
    </div>
  );
};

export default App;

Available Props

Integration Setup

Each integration requires different parameters. Here’s a guide for each:

1. Google Forms
   • Set the integrationType to googleForms.
   • Provide the formId and entryIds mapping for your form fields. Make sure to use the entry.xxxx values provided by Google Forms.
2. Trello
   • Set the integrationType to trello.
   • Provide the apiKey, token, and listId to identify where to send the feedback.
3. Monday
   • Set the integrationType to monday.
   • Provide the apiKey and boardId to create items in your board.
4. Notion
   • Set the integrationType to notion.
   • Provide the apiKey, formId (Database ID), and endpointUrl (https://api.notion.com/v1).

Example Configurations for Integrations

1. Notion

<FeedbackWidget
  integrationType='notion'
  endpointUrl='https://api.notion.com/v1'
  apiKey='YOUR_NOTION_API_KEY'
  formId='YOUR_NOTION_DATABASE_ID'
/>

2. Trello

<FeedbackWidget
  integrationType='trello'
  endpointUrl='https://api.trello.com/1/cards'
  apiKey='YOUR_TRELLO_API_KEY'
  token='YOUR_TRELLO_TOKEN'
  listId='YOUR_TRELLO_LIST_ID'
/>

3. GoogleForms

<FeedbackWidget
  integrationType='googleForms'
  endpointUrl='https://docs.google.com/forms/d/e/YOUR_GOOGLE_FORM_ID/formResponse'
  formId='YOUR_GOOGLE_FORM_ID'
  entryIds={{
    name: 'entry.123456789',
    feedback: 'entry.987654321',
    screenshot: 'entry.192837465'
  }}
/>

License

This project is licensed under the MIT License