feat(whatsapp): add quick setup access request (#15336)
Cloud accounts without access to WhatsApp Quick setup currently fall directly into manual configuration, with no explanation of how to request the easier Meta flow. This adds a compact access-request card above manual setup. It explains that Quick setup with Meta can connect either a new number or an eligible existing number from the WhatsApp Business app, then opens the existing support widget so the account can be reviewed. The enabled state now uses the same customer-facing language. Related: https://github.com/chatwoot/chatwoot/pull/15318 <img width="1428" height="1110" alt="CleanShot 2026-08-05 at 14 12 31@2x" src="https://github.com/user-attachments/assets/914e5fd7-eb5a-438c-9706-0ecd8e004fbf" /> ### Things to know - The access card is Cloud-only and appears when the account-level WhatsApp Quick setup feature is disabled. - The global Meta incident restriction still takes precedence and continues to show the existing incident warning. - Manual setup remains available, and self-hosted behavior is unchanged. - Requesting access opens Chatwoot support; it does not automatically enable the account feature. - Meta documents the existing WhatsApp Business app number path as coexistence onboarding: https://developers.facebook.com/documentation/business-messaging/whatsapp/embedded-signup/onboarding-business-app-users ### How to test 1. On Chatwoot Cloud, set `DISABLE_META_INBOX_CREATION` to `false`. 2. Open WhatsApp inbox creation for an account without `whatsapp_embedded_signup_inbox_creation`. 3. Confirm the Quick setup with Meta request card appears above the unchanged manual configuration form. 4. Select **Request access** and confirm the support widget opens. 5. Enable `whatsapp_embedded_signup_inbox_creation` for the account and reload. 6. Confirm the enabled Quick setup with Meta screen appears and describes both new numbers and eligible existing WhatsApp Business app numbers. 7. Set `DISABLE_META_INBOX_CREATION` to `true` and confirm the incident warning appears instead of the access-request card. Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
This commit is contained in:
Muhsin Keloth
@@ -301,7 +301,7 @@
|
||||
"SUBMIT_BUTTON": "Create WhatsApp Channel",
|
||||
"EMBEDDED_SIGNUP": {
|
||||
"TITLE": "Quick setup with Meta",
|
||||
"DESC": "Use the WhatsApp Embedded Signup flow to quickly connect new numbers. You will be redirected to Meta to log into your WhatsApp Business account. Having admin access will help make the setup smooth and easy.",
|
||||
"DESC": "Use Quick setup with Meta to connect a new number or an existing number from the WhatsApp Business app. You will be redirected to Meta to log into your WhatsApp Business account. Having admin access will help make the setup smooth and easy.",
|
||||
"BENEFITS": {
|
||||
"TITLE": "Benefits of Embedded Signup:",
|
||||
"EASY_SETUP": "No manual configuration required",
|
||||
@@ -309,7 +309,7 @@
|
||||
"AUTO_CONFIG": "Automatic webhook and phone number configuration"
|
||||
},
|
||||
"LEARN_MORE": {
|
||||
"TEXT": "To learn more about integrated signup, pricing, and limitations, visit {link}.",
|
||||
"TEXT": "To learn more about quick setup, pricing, and limitations, visit {link}.",
|
||||
"LINK_TEXT": "this link"
|
||||
},
|
||||
"SUBMIT_BUTTON": "Connect with WhatsApp Business",
|
||||
@@ -327,6 +327,12 @@
|
||||
"SUCCESS_FALLBACK": "WhatsApp Business Account has been successfully configured",
|
||||
"MANUAL_FALLBACK": "If your number is already connected to the WhatsApp Business Platform (API), or if you’re a tech provider onboarding your own number, please use the {link} flow",
|
||||
"MANUAL_LINK_TEXT": "manual setup flow",
|
||||
"ACCESS_REQUEST": {
|
||||
"TITLE": "Quick setup with Meta",
|
||||
"DESCRIPTION": "Connect a new number or an existing number from the WhatsApp Business app without manual configuration. To request this option, tell our team what your business does, how you’ll use WhatsApp, and which Chatwoot account needs access.",
|
||||
"FOOTNOTE": "We’ll review your request and let you know if this option can be enabled. You can also continue with manual setup below.",
|
||||
"BUTTON": "Request access"
|
||||
},
|
||||
"RESTRICTED_WARNING": "WhatsApp Embedded Signup is temporarily unavailable due to an API-level issue on Meta’s side, not a problem with Chatwoot. You can use manual setup for eligible Cloud API numbers. We’re working closely with Meta to resolve it as quickly as possible.",
|
||||
"STATUS_LINK": "View status updates",
|
||||
"CALLING_ENABLE_FAILED": "Your WhatsApp inbox is ready, but voice calling couldn't be turned on — this number isn't enrolled in the WhatsApp Business Calling API yet. Reach out to Meta or your WhatsApp Business Solution Provider to onboard it, then turn calling on from the inbox's Calls settings."
|
||||
|
||||
@@ -8,6 +8,7 @@ import CloudWhatsapp from './CloudWhatsapp.vue';
|
||||
import WhatsappEmbeddedSignup from './WhatsappEmbeddedSignup.vue';
|
||||
import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
|
||||
import Banner from 'dashboard/components-next/banner/Banner.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
@@ -47,12 +48,27 @@ const isWhatsappEmbeddedSignupDisabled = computed(
|
||||
() => isMetaInboxCreationDisabled.value
|
||||
);
|
||||
|
||||
const isWhatsappEmbeddedSignupFeatureEnabled = computed(
|
||||
() =>
|
||||
!isOnChatwootCloud.value ||
|
||||
isCloudFeatureEnabled(FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW)
|
||||
);
|
||||
|
||||
const shouldShowWhatsappEmbeddedSignup = computed(() => {
|
||||
return (
|
||||
selectedProvider.value === PROVIDER_TYPES.WHATSAPP &&
|
||||
hasWhatsappAppId.value &&
|
||||
(!isOnChatwootCloud.value ||
|
||||
isCloudFeatureEnabled(FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_FLOW))
|
||||
isWhatsappEmbeddedSignupFeatureEnabled.value
|
||||
);
|
||||
});
|
||||
|
||||
const shouldShowEmbeddedSignupAccessRequest = computed(() => {
|
||||
return (
|
||||
selectedProvider.value === PROVIDER_TYPES.WHATSAPP &&
|
||||
isOnChatwootCloud.value &&
|
||||
hasWhatsappAppId.value &&
|
||||
!isWhatsappEmbeddedSignupFeatureEnabled.value &&
|
||||
!isWhatsappEmbeddedSignupDisabled.value
|
||||
);
|
||||
});
|
||||
|
||||
@@ -104,6 +120,10 @@ const shouldShowCloudWhatsapp = provider => {
|
||||
const handleManualLinkClick = () => {
|
||||
selectProvider(PROVIDER_TYPES.WHATSAPP_MANUAL);
|
||||
};
|
||||
|
||||
const requestEmbeddedSignupAccess = () => {
|
||||
window.$chatwoot?.toggle();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -165,11 +185,56 @@ const handleManualLinkClick = () => {
|
||||
|
||||
<!-- Show manual setup -->
|
||||
<div v-else-if="shouldShowCloudWhatsapp(selectedProvider)">
|
||||
<div
|
||||
v-if="shouldShowEmbeddedSignupAccessRequest"
|
||||
class="w-full p-4 mb-6 border rounded-xl border-n-weak bg-n-solid-2"
|
||||
>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
|
||||
<div
|
||||
class="flex items-center justify-center flex-shrink-0 rounded-lg size-9 bg-n-blue-3"
|
||||
>
|
||||
<Icon icon="i-woot-whatsapp" class="size-5 text-n-slate-10" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 text-start">
|
||||
<div class="font-medium text-n-slate-12">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ACCESS_REQUEST.TITLE'
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<p class="mt-1 text-sm leading-5 text-n-slate-11">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ACCESS_REQUEST.DESCRIPTION'
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<p class="mt-2 text-xs leading-5 text-n-slate-10">
|
||||
{{
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ACCESS_REQUEST.FOOTNOTE'
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
solid
|
||||
blue
|
||||
sm
|
||||
class="self-start flex-shrink-0 sm:mt-0.5"
|
||||
icon="i-lucide-life-buoy"
|
||||
:label="
|
||||
$t(
|
||||
'INBOX_MGMT.ADD.WHATSAPP.EMBEDDED_SIGNUP.ACCESS_REQUEST.BUTTON'
|
||||
)
|
||||
"
|
||||
@click="requestEmbeddedSignupAccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Banner
|
||||
v-if="
|
||||
isWhatsappEmbeddedSignupDisabled &&
|
||||
selectedProvider === PROVIDER_TYPES.WHATSAPP_MANUAL
|
||||
"
|
||||
v-if="isWhatsappEmbeddedSignupDisabled"
|
||||
color="amber"
|
||||
class="w-full mb-6"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user