From ec52fdc0ade4fd3acb651e8eae754269ac8cb6f7 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Wed, 27 Sep 2023 08:32:18 +0200 Subject: [PATCH] :pencil: (whatsapp) Add a "Create WhatsApp app" guide --- .../WhatsAppCredentialsModal.tsx | 11 ++------ apps/docs/docs/embed/whatsapp/_category_.json | 3 +++ .../docs/embed/whatsapp/create-meta-app.md | 19 ++++++++++++++ .../{whatsapp.md => whatsapp/overview.md} | 6 +++++ apps/docs/docs/self-hosting/configuration.md | 25 ++++--------------- 5 files changed, 35 insertions(+), 29 deletions(-) create mode 100644 apps/docs/docs/embed/whatsapp/_category_.json create mode 100644 apps/docs/docs/embed/whatsapp/create-meta-app.md rename apps/docs/docs/embed/{whatsapp.md => whatsapp/overview.md} (94%) diff --git a/apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx b/apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx index 6c1596f17..5bd399250 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx @@ -300,10 +300,10 @@ const Requirements = () => ( Make sure you have{' '} - created a WhatsApp Business Account + created a WhatsApp Meta app . You should be able to get to this page: @@ -312,13 +312,6 @@ const Requirements = () => ( alt="WhatsApp quickstart page" rounded="md" /> - - You can find your Meta apps here:{' '} - - https://developers.facebook.com/apps - - . - ) diff --git a/apps/docs/docs/embed/whatsapp/_category_.json b/apps/docs/docs/embed/whatsapp/_category_.json new file mode 100644 index 000000000..f06074916 --- /dev/null +++ b/apps/docs/docs/embed/whatsapp/_category_.json @@ -0,0 +1,3 @@ +{ + "label": "WhatsApp" +} diff --git a/apps/docs/docs/embed/whatsapp/create-meta-app.md b/apps/docs/docs/embed/whatsapp/create-meta-app.md new file mode 100644 index 000000000..f7aa728c5 --- /dev/null +++ b/apps/docs/docs/embed/whatsapp/create-meta-app.md @@ -0,0 +1,19 @@ +# Create a WhatsApp Meta app + +## 1. Create a Facebook Business account + +1. Head over to https://business.facebook.com and log in +2. Create a new business account on the left side bar + +:::note +It is possible that Meta automatically restricts your newly created Business account. In that case, make sure to verify your identity to proceed. +::: + +## 2. Create a Meta app + +1. Head over to https://developers.facebook.com/apps +2. Click on Create App +3. "What do you want your app to do?", select `Other`. +4. Select `Business` type +5. Give it any name and select your newly created Business Account +6. On the app page, look for `WhatsApp` product and enable it diff --git a/apps/docs/docs/embed/whatsapp.md b/apps/docs/docs/embed/whatsapp/overview.md similarity index 94% rename from apps/docs/docs/embed/whatsapp.md rename to apps/docs/docs/embed/whatsapp/overview.md index 7fb5f3ad0..8942932e3 100644 --- a/apps/docs/docs/embed/whatsapp.md +++ b/apps/docs/docs/embed/whatsapp/overview.md @@ -1,3 +1,9 @@ +--- +sidebar_position: 1 +slug: /embed/whatsapp +title: Overview +--- + # WhatsApp WhatsApp is currently available as a private beta test. If you'd like to try it out, reach out to support@typebot.io. diff --git a/apps/docs/docs/self-hosting/configuration.md b/apps/docs/docs/self-hosting/configuration.md index 819b2fcb0..483582a44 100644 --- a/apps/docs/docs/self-hosting/configuration.md +++ b/apps/docs/docs/self-hosting/configuration.md @@ -201,24 +201,9 @@ In order to be able to test your bot on WhatsApp from the Preview drawer, you ne

Requirements

-### Create a Facebook Business account +## 1. [Create a WhatsApp Meta app](../embed/whatsapp/create-meta-app) -1. Head over to https://business.facebook.com and log in -2. Create a new business account on the left side bar - -:::note -It is possible that Meta directly restricts your newly created Business account. In that case, make sure to verify your identity to proceed. -::: - -### Create a Meta app - -1. Head over to https://developers.facebook.com/apps -2. Click on Create App -3. Give it any name and select `Business` type -4. Select your newly created Business Account -5. On the app page, set up the `WhatsApp` product - -### Get the System User token +## 2. Get the System User token 1. Go to your [System users page](https://business.facebook.com/settings/system-users) and create a new system user that has access to the related. @@ -228,7 +213,7 @@ It is possible that Meta directly restricts your newly created Business account. 2. The generated token will be used as `META_SYSTEM_USER_TOKEN` in your viewer configuration. 3. Click on `Add assets`. Under `Apps`, look for your app, select it and check `Manage app` -### Get the phone number ID +## 3. Get the phone number ID 1. Go to your WhatsApp Dev Console @@ -237,12 +222,12 @@ It is possible that Meta directly restricts your newly created Business account. 2. Add your phone number by clicking on the `Add phone number` button. 3. Select the newly created phone number in the `From` dropdown list and you will see right below the associated `Phone number ID` This will be used as `WHATSAPP_PREVIEW_FROM_PHONE_NUMBER_ID` in your viewer configuration. -### Set up the webhook +## 4. Set up the webhook 1. Head over to `Quickstart > Configuration`. Edit the webhook URL to `$NEXTAUTH_URL/api/v1/whatsapp/preview/webhook`. Set the Verify token to `$ENCRYPTION_SECRET` and click on `Verify and save`. 2. Add the `messages` webhook field. -### Set up the message template +## 5. Set up the message template 1. Head over to `Messaging > Message Templates` and click on `Create Template` 2. Select the `Utility` category