mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-30 18:47:51 +00:00
99997a701a
Implements comprehensive Twilio WhatsApp content template support (Phase
1) enabling text, media, and quick reply templates with proper parameter
conversion, sync capabilities, and feature flag protection.
### Features Implemented
**Template Types Supported**
- Basic Text Templates: Simple text with variables ({{1}}, {{2}})
- Media Templates: Image/Video/Document templates with text variables
- Quick Reply Templates: Interactive button templates
- Phase 2 (Future): List Picker, Call-to-Action, Catalog, Carousel,
Authentication templates
**Template Synchronization**
- API Endpoint: POST
/api/v1/accounts/{account_id}/inboxes/{inbox_id}/sync_templates
- Background Job: Channels::Twilio::TemplatesSyncJob
- Storage: JSONB format in channel_twilio_sms.content_templates
- Auto-categorization: UTILITY, MARKETING, AUTHENTICATION categories
### Template Examples Tested
#### Text template
```
{ "name": "greet", "language": "en" }
```
#### Template with variables
```
{ "name": "order_status", "parameters": [{"type": "body", "parameters": [{"text": "John"}]}] }
```
#### Media template with image
```
{ "name": "product_showcase", "parameters": [
{"type": "header", "parameters": [{"image": {"link": "image.jpg"}}]},
{"type": "body", "parameters": [{"text": "iPhone"}, {"text": "$999"}]}
]}
```
#### Preview
<img width="1362" height="1058" alt="CleanShot 2025-08-26 at 10 01
51@2x"
src="https://github.com/user-attachments/assets/cb280cea-08c3-44ca-8025-58a96cb3a451"
/>
<img width="1308" height="1246" alt="CleanShot 2025-08-26 at 10 02
02@2x"
src="https://github.com/user-attachments/assets/9ea8537a-61e9-40f5-844f-eaad337e1ddd"
/>
#### User guide
https://www.chatwoot.com/hc/user-guide/articles/1756195741-twilio-content-templates
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<script setup>
|
|
import ContentTemplateParser from 'dashboard/components-next/content-templates/ContentTemplateParser.vue';
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
defineProps({
|
|
template: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['sendMessage', 'back']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const handleSendMessage = payload => {
|
|
emit('sendMessage', payload);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
emit('back');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
|
|
>
|
|
<div class="w-full">
|
|
<ContentTemplateParser
|
|
:template="template"
|
|
@send-message="handleSendMessage"
|
|
@back="handleBack"
|
|
>
|
|
<template #actions="{ sendMessage, goBack, disabled }">
|
|
<div class="flex gap-3 justify-between items-end w-full h-14">
|
|
<Button
|
|
:label="t('CONTENT_TEMPLATES.FORM.BACK_BUTTON')"
|
|
color="slate"
|
|
variant="faded"
|
|
class="w-full font-medium"
|
|
@click="goBack"
|
|
/>
|
|
<Button
|
|
:label="t('CONTENT_TEMPLATES.FORM.SEND_MESSAGE_BUTTON')"
|
|
class="w-full font-medium"
|
|
:disabled="disabled"
|
|
@click="sendMessage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</ContentTemplateParser>
|
|
</div>
|
|
</div>
|
|
</template>
|