ty-feedback-library

🧪 Live Demo Application

Easily integrate feedbaack modal for your websites.

Features

• Easy installation with package managers
• Simple integration
• Multi-language support
• Customization options
• Low bundle size

Get started

with CDN

Install ty-feedback-library using NPM or Yarn

with NPM

npm i ty-feedback-library

with Yarn

yarn add ty-feedback-library

That's enough for use! Then you can call it like this in your project.

import {FeedbackContainer} from 'ty-feedback-library'

...
<FeedbackContainer sheetId={"sheet"} token={"123"}/>

🚨 How do I get a Sheet ID?

• Open the Google Sheets you want to save.
• Select "Anyone with the link" via the "Share" button and update the authorization to "Editor".
• Save Sheet ID from URL.

Example URL: docs.google.com/spreadsheets/d/2rGDgYHzDnoDNnoJzyw4HyKXJSqIbhqDj2vRob8O9Q-U/edit#gid=0

According to this URL's Sheet ID: 2rGDgYHzDnoDNnoJzyw4HyKXJSqIbhqDj2vRob8O9Q-U

🚨 How do I get a Access Token?

• Go to this link: https://developers.google.com/oauthplayground/
• Find the "Google Sheets API v4" service
• Select the ".../auth/spreadsheets" service and click on the "Authorize APIs" button
• After selecting your user and continuing, under the heading "Step 2 Exchange authorization code for tokens" click on the "Exchange authorization code for tokens" button and you will be able to access the Access token.

Props for ty-feedback-library Component

| Property | Type | Is Required | Default Value | |--------------------------------|---------------------------|-------------|----------------------------------------------------------| | sheetId | string | required | - | | token | string | required | - | | language | string ('en', 'tr', 'de') | optional | detect browser's language
| modalTitleAlignment | 'left', 'center', 'right' | optional | 'center'
| modalTitleValue | string | optional | 'Send us your feedback!'
| modalTitleClassName | string | optional | -
| modalFeedbackPlaceholder | string | optional | 'Describe your experience here.'
| modalFeedbackZIndex | number | optional | 1
| modalFeedbackDefaultValue | string | optional | -
| modalFeedbackClassName | string | optional | -
| modalFeedbackSuccessMessage | string | optional | 'We have got your feedback!'
| modalFeedbackFailedMessage | string | optional | 'We encountered a problem while receiving your feedback' | modalFeedbackSubmitButtonValue | string | optional | 'Send'

The default value table is written according to the English language. In case of TR or DE, the translations of that language appear. If a language other than these is sent to the language parameter, it is written according to the EN language.