simple-rating-dialogue
v1.0.7
Published
A simple rating dialogue based on HTML for collecting feedback for your websites.
Downloads
23
Maintainers
Readme
Simple Rating Dialogue
A simple rating dialogue based on HTML for collecting feedback for your websites.
Support me:
How to use it?
Step 1: Add the library:
Install with npm:
npm i simple-rating-dialogue
Step 2: Configure the library in the best way for you:
// Configured the settings
const settings = {
numberStars: 5,
minCharsAllowed: 35,
starSize: 48, //optional
fontFamily: 'Arial, Helvetica, sans-serif', //optional
showOnSamePage: true, //optional
autoSubmitMinStars: 4, //optional
darkMode: true, //optional
id: "myID" //optional
};
// Define the callback function
function handleSubmit(data) {
console.log('Submitting data:', data);
// Here you can perform your API request, e.g., using fetch or XMLHttpRequest
// Example:
// fetch('/submit-feedback', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify(data)
// }).then(response => response.json())
// .then(result => console.log('Feedback submitted:', result))
// .catch(error => console.error('Error submitting feedback:', error));
}
//Define the texts
const texts = {
"ratingTitle": "Please rate us:",
"feedbackTitle": "Please leave your feedback:",
"reasonTitle": "Why did you visit us today?",
"nextButtonText": "Next",
"submitButtonText": "Submit",
"closeButtonText": "Close",
"thankYouMessage": "Thank you for your feedback!",
//Optional sections
"reasons": {
"text": "Select a reason",
"options": [
{
"value": 0,
"text": "Customer Support",
},
{
"value": 1,
"text": "Product Inquiry",
},
{
"value": 2,
"text": "Technical Issue",
},
{
"value": 3,
"text": "General Question",
},
{
"value": 4,
"text": "Other",
}
]
},
"privacyOpts": {
"text": "<a href='#' target='_blank'>I agree to the terms and conditions</a>",
"checked": true
},
"optionalPage": {
"text": "<p>Thank you! Please <a href='#'>click here</a> to learn more.</p>",
"closeButtonText": "Close"
}
};
//Start the dialogue
new FeedbackDialog(texts, handleSubmit, settings);
Previews
Follow me on
| LinkedIn |YouTube|Amazon|Goodreads|Instagram|Cyber Prophets|Sharing Your Stories|TikTok| |:----------|:------------:|:------------:|:------------:|:------------:|:------------:|:------------:|:------------:| |||||||||