blsmedia/bot
2
0
Fork 0
Code Activity

📝 (whatsapp) Add a "Create WhatsApp app" guide

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-09-27 08:32:18 +02:00
parent 56e175bda6
commit ec52fdc0ad
5 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/builder/src/features/publish/components/embeds/modals/WhatsAppModal/WhatsAppCredentialsModal.tsx
View File

@ -300,10 +300,10 @@ const Requirements = () => (
<Text> <Text>
Make sure you have{' '} Make sure you have{' '}
<TextLink <TextLink
href="https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#set-up-developer-assets" href="https://docs.typebot.io/embed/whatsapp/create-meta-app"
isExternal isExternal
> >
created a WhatsApp Business Account created a WhatsApp Meta app
</TextLink> </TextLink>
. You should be able to get to this page: . You should be able to get to this page:
</Text> </Text>
@ -312,13 +312,6 @@ const Requirements = () => (
alt="WhatsApp quickstart page" alt="WhatsApp quickstart page"
rounded="md" rounded="md"
/> />
<Text>
You can find your Meta apps here:{' '}
<TextLink href="https://developers.facebook.com/apps" isExternal>
https://developers.facebook.com/apps
</TextLink>
.
</Text>
</Stack> </Stack>
) )

3
apps/docs/docs/embed/whatsapp/_category_.json Normal file
View File

@ -0,0 +1,3 @@
{
"label": "WhatsApp"
}

19
apps/docs/docs/embed/whatsapp/create-meta-app.md Normal file
View File

@ -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

6
apps/docs/docs/embed/whatsapp.md → apps/docs/docs/embed/whatsapp/overview.md
View File

@ -1,3 +1,9 @@
---
sidebar_position: 1
slug: /embed/whatsapp
title: Overview
---
# WhatsApp # WhatsApp
WhatsApp is currently available as a private beta test. If you'd like to try it out, reach out to support@typebot.io. WhatsApp is currently available as a private beta test. If you'd like to try it out, reach out to support@typebot.io.

25
apps/docs/docs/self-hosting/configuration.md
View File

@ -201,24 +201,9 @@ In order to be able to test your bot on WhatsApp from the Preview drawer, you ne
<details><summary><h4>Requirements</h4></summary> <details><summary><h4>Requirements</h4></summary>
<p> <p>
### 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. Get the System User token
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
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. 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. 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` 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 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. 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. 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`. 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. 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` 1. Head over to `Messaging > Message Templates` and click on `Create Template`
2. Select the `Utility` category 2. Select the `Utility` category