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:

• Download the latest release

• 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