chore: Facebook/Instagram integration updates (#456)

* doc: update f.b

* fix instagram doc

* more cleanup

* more updates

docs/self-hosted/configuration/features/integrations/facebook-channel-setup.md

@@ -3,61 +3,120 @@ sidebar_label: "Facebook"
 title: "Setting Up Facebook"
 ---
 
+To use Facebook Channel, you have to create a Facebook app in the developer portal. You can find more details about creating Facebook apps [here](https://developers.facebook.com/docs/apps/#register).
+
+
+### Prerequisites
+
+1. A valid facebook account.
+2. A valid facebook page.
+
+
 ### Register A Facebook App
 
-To use Facebook Channel, you have to create a Facebook app in the developer portal. You can find more details about creating Facebook channels [here](https://developers.facebook.com/docs/apps/#register).
+1. Go to [Facebook developer portal](https://developers.facebook.com/apps/) and click on the "Create App" button
+
+![facebook_create_app](./images/facebook/facebook-create-app.png)
+
+2. Select the option "Other".
+
+
+![facebook_other_app](./images/facebook/facebook_other_app.png)
+
+3. For the app type, choose "Business".
+
+![facebook_business](./images/facebook/facebook_business.png)
+
+3. Enter basic details like the app name and email.
 
-1. In the select an app type, choose business.
+![facebook_business_details](./images/facebook/facebook_business_details.png)
 
 Once you register your Facebook App, you will have to obtain the `App Id` and `App Secret`. These values will be available in the app settings and will be required while setting up Chatwoot environment variables.
 
+
+![facebook_app_id](./images/facebook/facebook_app_id.png)
+
+
 ### Configuring the Environment Variables in Chatwoot
 
-Configure the following Chatwoot environment variables with the values you have obtained during the Facebook app setup.
-`FB_VERIFY_TOKEN` should be a unique secure string that should be provided when configuring the Facebook app. Generate a
-random string and set this as `FB_VERIFY_TOKEN` for now.
+Configure the following Chatwoot environment variables with the values you obtained during the Facebook app setup. The `FB_VERIFY_TOKEN` should be a unique and secure string that you provide when configuring the Facebook app. Generate a random string and set it as the `FB_VERIFY_TOKEN`. Facebook will include this string in all verification requests.
 
-Restart the chatwoot server after updating the environment variables
+Restart the Chatwoot server after updating the environment variables
 
 ```bash
 FB_VERIFY_TOKEN=
 FB_APP_SECRET=
 FB_APP_ID=
 ```
 
-### Add Facebook Login
+### Configure Facebook Login
+
+
+1. Add the Facebook Login product via the Facebook app dashboard.
+
+![facebook_app_login](./images/facebook/facebook_app_login.png)
 
-1. While configuring, make sure you add the Facebook Login product via the Facebook app dashboard.
-2. Enable "Web OAuth Login."
-3. Enable "Login with Javascript SDK."
-4. Add your self-hosted domain to the allowed domain input field.
+
+2. Enable `Web OAuth Login`, `Login with Javascript SDK` and add your self-hosted domain to the `Allowed Domains for the JavaScript SDK` input.
 
 ![facebook_sdk_login](./images/facebook/facebook_sdk_login.png)
 
 ### Configure the Facebook App
 
 1. In the app settings, add your `Chatwoot installation domain` as your app domain.
-2. In the products section in your app settings page, Add Messenger
-3. Go to the Messenger settings and configure the callBack URL with `{your_chatwoot_url}/bot`
-4. provide the `FB_VERIFY_TOKEN` value from your environment variables for `verify token`
-5. Head over to chatwoot and create a Facebook inbox. Choose a page for which your Facebook developer account has admin access to
 
+![facebook_app_domain](./images/facebook/facebook_app_domain.png)
+
+2. In the products section in your app settings page, Add "Messenger"
+
+![facebook_messenger_product](./images/facebook/facebook_messenger_product.png)
+
+3. Go to the Messenger settings and configure the call back URL 
+
+![Alt text](./images/facebook/facebook_messenger_section.png)
+
+4. Provide the Callback URL as `{your_chatwoot_installation_url}/bot` and the Verify token as `FB_VERIFY_TOKEN` from your environment variable.
+
+
+![facebook_callback_url](./images/facebook/facebook_callback_url.png)
+
+5. Head over to Chatwoot and create a Messenger inbox. Choose a page for which your Facebook developer account has admin access to. Please refer to this [guide](../../../../product/channels/facebook) for more details on creating a Messenger inbox in Chatwoot.
+
+
+<!-- [guide](user-guide/features/pre-chat-form.md). -->
 ### Testing the Facebook channel
 
-Until the application is approved for production, Facebook wouldn't send the new messages on your page to chatwoot.
+Until the application is approved for production, Facebook wouldn't send the new messages on your page to Chatwoot.
+
 To test the changes until the app is approved for production. Follow the steps
 
-1. Head over to the messenger section in your app settings page, in Facebook developers
-2. Under the pages table in the webhooks section, you will see the page you choose while creating the chatwoot Facebook inbox
-3. Click on add subscriptions and subscribe to the following
+1. Head over to the messenger section in your app settings page, in Facebook developers.
+
+![facebook_messenger_settings](./images/facebook/facebook_messenger_settings.png)
+
+
+2. Click `Add or remove pages` and connect the page which you choose while creating the Chatwoot Messenger inbox.
+
+![facebook_callback_pages](./images/facebook/facebook_callback_pages.png)
+
+
+3. After connecting the pages, Click on `Add subscriptions` from the connected page.
+
+![facebook_page_config](./images/facebook/facebook_page_config.png)
+
+4. Subscribe to the following fields and save the subscription.
 ```
 messages
 messaging_postbacks
 message_deliveries
 message_reads
 message_echoes
 ```
-4. Send a message to the connected page from your Facebook account and it should appear in chatwoot now
+
+
+![facebook_page_subscription](./images/facebook/facebook_page_subscription.png)
+
+4. Send a message to the connected page from your Facebook account and it should appear in Chatwoot now.
 
 ### Going into production.
 
@@ -70,12 +129,16 @@ Business Asset User Profile Access
 pages_show_list
 pages_manage_metadata
 ```
-### NOTE
-If your facebook app's version is more than 7.0 then you will need extra permission according to facebook's updated policy. Make sure you get permission for.
+
+
+> **Note**: If your facebook app's version is more than 7.0 then you will need extra permission according to facebook's updated policy. Make sure you get permission for.
 ```
 pages_read_engagement
 ```
-Make sure your facebook app subscription version is 12.0, we have updated the FB subscription with the latest version, so change the permission subscription version uder the facebook app webhooks option.
+Make sure your facebook app subscription version is 12.0, we have updated the FB subscription with the latest version, so change the permission subscription version under the facebook app webhooks option.
+
+
+
 
 ### Developing or Testing Facebook Integration in your machine
 

docs/self-hosted/configuration/features/integrations/instagram-channel-setup.md

@@ -3,20 +3,46 @@ sidebar_label: "Instagram"
 title: "Setting Up Instagram Account"
 ---
 
+
+1. A valid facebook account.
+2. A valid facebook page.
+3. A valid instagram professional account.
+
+
 ### Register A Facebook App
 
-To use Instagram Channel, you have to create a Facebook app in the developer portal. You can find more details about creating Facebook channels [here](https://developers.facebook.com/docs/apps/#register)
+To use Instagram Channel, you have to create a Facebook app in the developer portal. You can find more details about creating Facebook developer app [here](./facebook-channel-setup.md).
+
+
+1. Click on the "Create App" button
+
+![facebook_create_app](./images/facebook/facebook-create-app.png)
+
+2. Select the option "Other".
+
 
-1. In the select an app type, choose `business`
+![facebook_other_app](./images/facebook/facebook_other_app.png)
+
+3. For the app type, choose "Business"
+
+![facebook_business](./images/facebook/facebook_business.png)
+
+3. Enter basic details like the app name and email.
+
+![facebook_business_details](./images/facebook/facebook_business_details.png)
 
 Once you register your Facebook App, you will have to obtain the `App Id` and `App Secret`. These values will be available in the app settings and will be required while setting up Chatwoot environment variables.
 
+
+![facebook_app_id](./images/facebook/facebook_app_id.png)
+
+
+
 ### Configuring the Environment Variables in Chatwoot
 
-Configure the following Chatwoot environment variables with the values you have obtained during the Instagram app setup.
-`IG_VERIFY_TOKEN` should be a unique secure string that should be provided when configuring the Instagram app.
+Configure the following Chatwoot environment variables with the values you obtained during the Facebook app setup. The `IG_VERIFY_TOKEN` should be a unique and secure string that you provide when configuring the Instagram app.
 
-Restart the chatwoot server after updating the environment variables
+Restart the Chatwoot server after updating the environment variables
 
 ```bash
 IG_VERIFY_TOKEN=
@@ -26,42 +52,98 @@ FB_APP_ID=
 
 ### Configure the Facebook App
 
-1. In the app settings, add your `Chatwoot installation domain` as your app domain.
-![register_domain](./images/instagram/register_domain.png)
-2. In the products section in your app settings page, Add `Instagram Graph Api`
-![instagram_graph_api](./images/instagram/instagram_graph_api.png)
-3. Go to the Webhook settings and configure the callBack URL with `{your_chatwoot_url}/webhooks/instagram`
-![setup_callback](./images/instagram/setup_callback.png)
-4. provide the `IG_VERIFY_TOKEN` value from your environment variables for `verify token`
-5. Make sure your Facebook page is connected to the Instagram account, for which the Instagram account holder is admin.
-You can do that setting here:
-  > Go to https://www.facebook.com/pages/?category=your_pages
-  > Select Your Page
-  > Go to Settings
-  > Select Instagram: Make sure you have a business account https://developers.facebook.com/docs/messenger-platform/instagram/get-started
-  > Connect your Instagram account.
-  So whenever you receive any message on Instagram, it will redirect to your Facebook page.
-5. Head over to chatwoot and create a Messenger inbox. Choose a page for which your Facebook developer account and Instagram account have admin access.
-
-
-### Testing the Facebook channel
-
-Until the application is approved for production, Facebook wouldn't send the new messages on your page to chatwoot.
+1. In the app settings, add your "Chatwoot installation domain" as your app domain.
+![facebook_app_domain](./images/facebook/facebook_app_domain.png)
+2. Add the "Instagram Graph API" product via the Facebook app dashboard.
+![instagram_product](./images/instagram/instagram_product.png)
+3. Go to the app settings and select "Webhooks". From there, choose Instagram and click on the "Subscribe to this object" button.
+![instagram_webhooks](./images/instagram/instagram_webhooks.png)
+4. Provide the Callback URL as `{your_Chatwoot_installation_url}/webhooks/instagram` and the Verify token as `IG_VERIFY_TOKEN` from your environment variable.
+![instagram_webhook_url](./images/instagram/instagram_webhook_url.png)
+
+### Connect the facebook page with instagram account
+
+1. Go to [Facebook pages](https://www.facebook.com/pages/?category=your_pages) and select your page and open the settings
+
+![facebook_page_settings](./images/instagram/facebook_page_settings.png)
+
+2. Go to "Linked accounts" and connect your instagram professional account.
+
+![facebook_connect_instagram](./images/instagram/facebook_connect_instagram.png)
+
+3. Select the option "Business"
+![instagram_connect_facebook](./images/instagram/instagram_connect_facebook.png)
+
+4. Select the instgram account category
+
+![select_category_instagram](./images/instagram/select_category_instagram.png)
+
+5. If everything is okay, you will see the message "Instagram connected.”
+
+![instagram_connect_success](./images/instagram/instagram_connect_success.png)
+
+
+6. Head over to Chatwoot and create a Messenger inbox. Please refer to this [guide](../../../../product/channels/instagram)  for more details on creating a Messenger inbox in Chatwoot. 
+
+So whenever you receive any message on Instagram, it will redirect to your Facebook page.
+
+### Testing the Instagram channel
+
+Until the application is approved for production, Facebook wouldn't send the new messages on your instagram to Chatwoot.
 To test the changes until the app is approved for production. Follow the steps
 
-1. Create a Test app for your app. Follow all the above steps for the test app.
-2. Add extra product for the test app: Instagram Basic Display
-3. Head over to the Instagram Basic Display section on your test app settings page, in Facebook developers.
-4. Add Instagram Testers in the settings.
-5. Click on Edit subscriptions under Webhook > Instagram and subscribe to the following
+1. Create a Test app for your app.
+
+![facebook_instagram_test](./images/instagram/facebook_instagram_test.png)
+
+2. Add the `Instagram Graph API` product via the Facebook app dashboard.
+![instagram_product](./images/instagram/instagram_product.png)
+
+3. Go to the app settings and select "Webhooks". From there, choose Instagram and click on the "Subscribe to this object" button.
+![instagram_webhooks](./images/instagram/instagram_webhooks.png)
+
+4. Provide the Callback URL as `{your_chatwoot_installation_url}/webhooks/instagram` and the Verify token as `IG_VERIFY_TOKEN` from your environment variable.
+![instagram_webhook_url](./images/instagram/instagram_webhook_url.png)
+
+5. Open the test app and add extra product for the test app: Instagram Basic Display
+
+![instagram_basic_display](./images/instagram/instagram_basic_display.png)
+
+
+6. In the app settings, add the platform "Website" and give `Site URL` as your installation URL.
+
+![instagram_app_platform](./images/instagram/instagram_app_platform.png)
+
+
+7. Head over to the Instagram Basic Display section and create a new app.
+
+![instagram_basic_display_settings](./images/instagram/instagram_basic_display_settings.png)
+
+
+8. Add Instagram Testers by clicking "Add or Remove Instagram Testers" button.
+
+![instagram_testers](./images/instagram/instagram_testers.png)
+
+9. Make sure that you have selected the role `Instagram Tester` while creating a new tester.
+
+![instagram_tester_list](./images/instagram/instagram_tester_list.png)
+
+
+10. Click on Edit subscriptions under Webhook > Instagram and subscribe to the following,
+
+
 ```
 message_reactions
 messages
 messaging_seen
 ```
-![subscribe](./images/instagram/subscribe.png)
 
-4. Send a message to the connected Instagram account from Instagram Testers, and it should appear in chatwoot now
+![instagram_subscription](./images/instagram/instagram_subscription.png)
+
+Note: You should do this step for both normal and test apps.
+
+11. Head over to Chatwoot and create a Messenger inbox. Please refer to this [guide](../../../../product/channels/instagram)  for more details on creating a Messenger inbox in Chatwoot. 
+. Send a message to the connected Instagram account from Instagram Testers, and it should appear in Chatwoot now
 
 ### Going into production.
 
@@ -75,8 +157,8 @@ pages_show_list
 pages_manage_metadata
 pages_messaging
 ```
-### NOTE
-If your facebook app's version is more than 7.0 then you will need extra permission according to facebook's updated policy. Make sure you get permission for.
+
+> **Note**: If your facebook app's version is more than 7.0 then you will need extra permission according to facebook's updated policy. Make sure you get permission for.
 ```
 pages_read_engagement
 ```
@@ -116,8 +198,8 @@ Restart the Chatwoot local server. Then, your Chatwoot setup will be ready to re
 Go to webhook Instagram and click on Test with `v11.0`
 ![subscribe](./images/instagram/subscribe.png)
 
-### NOTE:
-You can have only one app connected to the chatwoot for Instagram and Facebook combined as the Messenger platform is common. But suppose you want to have separate channels for Instagram and Facebook. In that case, you can have multiple Facebook pages inside your app that would be connected to Facebook users and Instagram users separately and then connected to the different inbox in the chatwoot page.
+
+> **Note**: You can have only one app connected to the Chatwoot for Instagram and Facebook combined as the Messenger platform is common. But suppose you want to have separate channels for Instagram and Facebook. In that case, you can have multiple Facebook pages inside your app that would be connected to Facebook users and Instagram users separately and then connected to the different inbox in the Chatwoot page.
 
 ### Checklist