akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(inboxes): improve channel finish setup guidance

Browse Source
This commit is contained in:
Sojan Jose
2026-02-13 16:43:13 -08:00
parent 6b7180d051
commit 1f66034750
5 changed files with 82 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+10 -13
View File
@@ -123,7 +123,7 @@
},
"TWILIO": {
"TITLE": "Twilio SMS/WhatsApp Channel",
"DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.",
"DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp. Chatwoot automatically configures the required callback URLs for you.",
"ACCOUNT_SID": {
"LABEL": "Account SID",
"PLACEHOLDER": "Please enter your Twilio Account SID",
@@ -165,10 +165,6 @@
"PLACEHOLDER": "Please enter the phone number from which message will be sent.",
"ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
},
"API_CALLBACK": {
"TITLE": "Callback URL",
"SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here."
},
"SUBMIT_BUTTON": "Create Twilio Channel",
"API": {
"ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
@@ -216,15 +212,15 @@
"PLACEHOLDER": "Please enter the phone number from which message will be sent.",
"ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
},
"SUBMIT_BUTTON": "Create Bandwidth Channel",
"API": {
"ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again"
},
"API_CALLBACK": {
"TITLE": "Callback URL",
"SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here."
}
"SUBMIT_BUTTON": "Create Bandwidth Channel",
"API": {
"ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again"
},
"API_CALLBACK": {
"TITLE": "Callback URL",
"SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here."
}
}
},
"WHATSAPP": {
"TITLE": "WhatsApp Channel",
@@ -542,6 +538,7 @@
"MORE_SETTINGS": "More settings",
"WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox.",
"WHATSAPP_QR_INSTRUCTION": "Scan the QR code above to quickly test your WhatsApp inbox",
"SMS_QR_INSTRUCTION": "Scan the QR code above to quickly test your SMS inbox",
"MESSENGER_QR_INSTRUCTION": "Scan the QR code above to quickly test your Facebook Messenger inbox",
"TELEGRAM_QR_INSTRUCTION": "Scan the QR code above to quickly test your Telegram inbox"
},
app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+66 -15
View File
@@ -16,6 +16,7 @@ const route = useRoute();
const store = useStore();
const qrCodes = reactive({
sms: '',
whatsapp: '',
messenger: '',
telegram: '',
@@ -36,6 +37,7 @@ const {
isAFacebookInbox,
isATelegramChannel,
isATwilioWhatsAppChannel,
isATwilioSMSChannel,
} = useInbox(route.params.inbox_id);
const hasDuplicateInstagramInbox = computed(() => {
@@ -62,17 +64,44 @@ const isWhatsAppEmbeddedSignup = computed(() => {
);
});
const isTwilioSmsInbox = computed(() => {
const phoneNumber = currentInbox.value?.phone_number;
const callbackUrl = currentInbox.value?.callback_webhook_url;
return (
(phoneNumber || '').startsWith('+') &&
Boolean(callbackUrl && callbackUrl.includes('/twilio/callback'))
);
});
const isTwilioWhatsAppChannel = computed(() => {
const phoneNumber = currentInbox.value?.phone_number;
return (
isATwilioWhatsAppChannel.value ||
(isATwilioChannel.value && (phoneNumber || '').startsWith('whatsapp:'))
);
});
const message = computed(() => {
if (isATwilioChannel.value) {
if (isTwilioWhatsAppChannel.value) {
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION'
)}`;
}
if (isTwilioSmsInbox.value) {
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
'INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION'
)}`;
}
if (isASmsInbox.value) {
return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
)}`;
return t('INBOX_MGMT.FINISH.MESSAGE');
}
if (isATwilioChannel.value) {
return t('INBOX_MGMT.FINISH.MESSAGE');
}
if (isALineChannel.value) {
@@ -109,6 +138,7 @@ async function generateQRCode(platform, identifier) {
try {
const platformUrls = {
sms: id => `sms:${id}`,
whatsapp: id => `https://wa.me/${id}`,
messenger: id => `https://m.me/${id}`,
telegram: id => `https://t.me/${id}`,
@@ -128,7 +158,7 @@ async function generateQRCodes() {
if (!currentInbox.value) return;
// WhatsApp (both Cloud and Twilio)
if (currentInbox.value.phone_number && isAWhatsAppChannel.value) {
if (currentInbox.value.phone_number && isTwilioWhatsAppChannel.value) {
// For Twilio WhatsApp, phone_number format is "whatsapp:+1234567890"
// Extract just the phone number part for QR code generation
const phoneNumber = currentInbox.value.phone_number.replace(
@@ -138,6 +168,10 @@ async function generateQRCodes() {
await generateQRCode('whatsapp', phoneNumber);
}
if (isTwilioSmsInbox.value && currentInbox.value.phone_number) {
await generateQRCode('sms', currentInbox.value.phone_number);
}
// Facebook Messenger
if (currentInbox.value.page_id && isAFacebookInbox.value) {
await generateQRCode('messenger', currentInbox.value.page_id);
@@ -183,13 +217,6 @@ onMounted(() => {
:script="currentInbox.web_widget_script"
/>
</div>
<div class="w-[50%] max-w-[50%] ml-[25%]">
<woot-code
v-if="isATwilioWhatsAppChannel"
lang="html"
:script="currentInbox.callback_webhook_url"
/>
</div>
<div
v-if="shouldShowWhatsAppWebhookDetails"
class="w-[50%] max-w-[50%] ml-[25%]"
@@ -217,13 +244,37 @@ onMounted(() => {
:script="currentInbox.callback_webhook_url"
/>
</div>
<div class="w-[50%] max-w-[50%] ml-[25%]">
<div
v-if="isASmsInbox && !isATwilioSMSChannel && !isTwilioSmsInbox"
class="w-[50%] max-w-[50%] ml-[25%]"
>
<p class="mt-8 font-medium text-n-slate-11">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.TITLE') }}
</p>
<p class="mt-2 text-sm text-n-slate-9">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE') }}
</p>
<woot-code
v-if="isASmsInbox"
v-if="isASmsInbox && !isATwilioSMSChannel && !isTwilioSmsInbox"
lang="html"
:script="currentInbox.callback_webhook_url"
/>
</div>
<div
v-if="isTwilioSmsInbox && qrCodes.sms"
class="flex flex-col gap-3 items-center mt-8"
>
<p class="mt-2 text-sm text-n-slate-9">
{{ $t('INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION') }}
</p>
<div class="rounded-lg shadow outline-1 outline-n-strong outline">
<img
:src="qrCodes.sms"
alt="SMS QR Code"
class="rounded-lg size-48 dark:invert"
/>
</div>
</div>
<EmailInboxFinish
v-if="isAnEmailChannel && !currentInbox.provider"
:inbox="currentInbox"
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
-6
View File
@@ -150,12 +150,6 @@ export default {
<template>
<div v-if="isATwilioChannel" class="mx-8">
<SettingsSection
:title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
:sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
>
<woot-code :script="inbox.callback_webhook_url" lang="html" />
</SettingsSection>
<SettingsSection
v-if="isATwilioWhatsAppChannel"
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"