Files
chatwoot/app/javascript/survey/components/Feedback.vue
Sivin Varghese d0611cb7f2 feat: Improve CSAT responses (#11485)
# Pull Request Template

## Description

This PR introduces basic customization options for the CSAT survey:

* **Display Type**: Option to use star ratings instead of emojis.
* **Message Text**: Customize the survey message (up to 200 characters).
* **Survey Rules**: Send surveys based on labels — trigger when a
conversation has or doesn't have a specific label.

Fixes
https://linear.app/chatwoot/document/improve-csat-responses-a61cf30e054e

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom videos

**Website Channel (Widget)**

https://www.loom.com/share/7f47836cde7940ae9d17b7997d060a18?sid=aad2ad0a-140a-4a09-8829-e01fa2e102c5

**Email Channel (Survey link)**

https://www.loom.com/share/e92f4c4c0f73417ba300a25885e093ce?sid=4bb006f0-1c2a-4352-a232-8bf684e3d757

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
2025-05-16 14:18:52 +05:30

51 lines
1.0 KiB
Vue

<script>
import CustomButton from 'shared/components/Button.vue';
import TextArea from 'shared/components/TextArea.vue';
import Spinner from 'shared/components/Spinner.vue';
export default {
name: 'Feedback',
components: {
CustomButton,
TextArea,
Spinner,
},
props: {
isUpdating: {
type: Boolean,
default: false,
},
},
emits: ['sendFeedback'],
data() {
return {
feedback: '',
};
},
methods: {
onClick() {
this.$emit('sendFeedback', this.feedback);
},
},
};
</script>
<template>
<div class="mt-6">
<label class="text-base font-medium text-n-slate-12">
{{ $t('SURVEY.FEEDBACK.LABEL') }}
</label>
<TextArea
v-model="feedback"
class="my-5"
:placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
/>
<div class="flex items-center float-right font-medium">
<CustomButton @click="onClick">
<Spinner v-if="isUpdating" class="p-0" />
{{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
</CustomButton>
</div>
</div>
</template>