doc: Instagram inbox

config/sidebar/selfhosted.js

@@ -100,9 +100,11 @@ module.exports = [
     items: [
       "self-hosted/configuration/features/integrations/facebook-channel-setup",
       "self-hosted/configuration/features/integrations/instagram-channel-setup",
+      "self-hosted/configuration/features/integrations/instagram-via-instagram-business-login",
       "self-hosted/configuration/features/integrations/slack-integration-setup",
       "self-hosted/configuration/features/integrations/linear-integration-setup",
-      "self-hosted/configuration/features/integrations/shopify-integration-setup",
+      "self-hosted/configuration/features/integrations/shopify-integration-setup"
+
     ],
   },
   {

docs/self-hosted.md

@@ -71,6 +71,8 @@ This guide will help you to install and setup a production ready Chatwoot.
 - [Slack](/docs/self-hosted/configuration/features/integrations/slack-integration-setup)
 - [Linear](/docs/self-hosted/configuration/features/integrations/linear-integration-setup)
 - [Shopify](/docs/self-hosted/configuration/features/integrations/shopify-integration-setup)
+- [Instagram via Facebook Login](/docs/self-hosted/configuration/features/integrations/instagram-channel-setup)
+- [Instagram via Instagram Business Login](/docs/self-hosted/configuration/features/integrations/instagram-via-instagram-business-login)
 
 ## Maintenance
 

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

@@ -3,15 +3,14 @@ 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).
 
+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
 
 1. Go to [Facebook developer portal](https://developers.facebook.com/apps/) and click on the "Create App" button
@@ -20,7 +19,6 @@ To use Facebook Channel, you have to create a Facebook app in the developer port
 
 2. Select the option "Other".
 
-
 ![facebook_other_app](./images/facebook/facebook_other_app.png)
 
 3. For the app type, choose "Business".
@@ -33,10 +31,8 @@ To use Facebook Channel, you have to create a Facebook app in the developer port
 
 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 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.
@@ -51,12 +47,10 @@ FB_APP_ID=
 
 ### Configure Facebook Login
 
-
 1. Add the Facebook Login product via the Facebook app dashboard.
 
 ![facebook_app_login](./images/facebook/facebook_app_login.png)
 
-
 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)
@@ -77,12 +71,10 @@ FB_APP_ID=
 
 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](https://www.chatwoot.com/hc/user-guide/articles/1677778588-how-to-setup-a-facebook-channel) for more details on creating a Messenger inbox in Chatwoot.
 
-
 ### Testing the Facebook channel
 
 Until the application is approved for production, Facebook wouldn't send the new messages on your page to Chatwoot.
@@ -93,17 +85,16 @@ To test the changes until the app is approved for production. Follow the steps
 
 ![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
@@ -112,7 +103,6 @@ message_reads
 message_echoes
 ```
 
-
 ![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.
@@ -122,6 +112,7 @@ message_echoes
 Before you can start using your Facebook app in production, you will have to get it verified by Facebook. Refer to the [docs](https://developers.facebook.com/docs/apps/review/) on getting your app verified.
 
 Obtain advanced access to the required permissions mentioned below for your Facebook app
+
 ```
 pages_messaging
 pages_show_list

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

@@ -1,9 +1,15 @@
 ---
-sidebar_label: "Instagram"
-title: "Setting Up Instagram Account"
+sidebar_label: "Instagram via Facebook Login"
+title: "Instagram via Facebook Login"
 ---
 
 
+
+> **Note**: We recommend Instagram Business Login as the preferred authentication method, as it provides simpler configuration and a better developer experience. Please refer to this [guide](./instagram-via-instagram-business-login.md) for more details. We will be stopping the support for Instagram via Facebook Login in the future from v4.1 onwards.
+
+
+
+
 1. A valid facebook account.
 2. A valid facebook page.
 3. A valid instagram professional account.

docs/self-hosted/configuration/features/integrations/instagram-via-instagram-business-login.md

@@ -0,0 +1,123 @@
+---
+sidebar_label: "Instagram via Instagram Business Login"
+title: "Instagram via Instagram Business Login"
+---
+
+
+> **Note**: Please ensure you have installed version v4.1 or above. If not, please refer to this [guide](./instagram-channel-setup.md)
+
+
+1. A valid facebook account.
+2. 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 apps [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".
+
+
+![facebook_other_app](./images/facebook/facebook_other_app.png)
+
+3. For the app type, choose "Business"
+
+![facebook_business](./images/facebook/facebook_business.png)
+
+4. Add app name and connect business account
+
+![facebook_business_details](./images/facebook/facebook_business_details.png)
+
+
+5. Add Instagram product from the Home page.
+
+![instagram_product](./images/instagram/instagram_product.png)
+
+### Configure Instagram settings for Chatwoot
+
+1. Copy Instagram app ID and Instagram app secret
+
+![instagram_app_id](./images/instagram/instagram_app_id.png)
+
+2. Add the Instagram app ID and Instagram app secret to your app config via `{Chatwoot installation url}/super_admin/app_config?config=instagram`
+
+![instagram_app_config](./images/instagram/instagram_app_config.png)
+
+
+3. Configure Webhooks
+
+Set the callback URL to `{your_chatwoot_url}/webhooks/instagram`. The verify token should match your `INSTAGRAM_VERIFY_TOKEN`, which can be configured through `app_config`
+
+![instagram_webhooks](./images/instagram/instagram_webhook.png)
+
+
+Subscribe to `messages`, `messaging_seen`, and `message_reactions` events.
+
+![instagram_webhooks_subscribe](./images/instagram/instagram_webhooks_subscribe.png)
+
+
+> **Note**: To receive web hooks, app mode should be set to "Live".
+
+
+4. Set up Instagram business login
+
+Set Redirect URL as `{your_chatwoot_url}/instagram/callback`
+
+![instagram_business_login](./images/instagram/instagram_business_login.png)
+
+
+5. Create a new Instagram tester account
+
+
+### Create Instagram Inbox
+
+
+Head over to Chatwoot and create a Instagram inbox. Please refer to this [guide](https://chatwoot.help/hc/user-guide/articles/1744361165-how-to-setup-an-instagram-channel-via-instagram-login) for more details on creating a Instagram inbox in Chatwoot.
+
+
+
+### How to test the Instagram before going to live
+
+
+1. Add Instagram Testers by clicking "Add People" button.
+
+![facebook_instagram_test](./images/instagram/instagram-testers-list.png)
+
+2. Make sure that you have selected the role Instagram Tester while creating a new tester.
+
+![instagram_tester_list](./images/instagram/instagram-add-tester.png)
+
+### Going into production.
+
+Before you can start using your Facebook app in production, you will have to get it verified by Facebook. Refer to the [docs](https://developers.facebook.com/docs/messenger-platform/instagram/app-review) on getting your app verified.
+
+
+### Troubleshooting & Common Errors
+
+#### Insufficient Developer Role Error
+
+Ensure the Instagram user is added as a developer: `Meta Dashboard → App Roles → Roles → Add People → Enter Instagram ID`
+
+#### API Access Deactivated
+
+Ensure the **Privacy Policy URL** is valid and correctly set.
+
+#### Invalid request: Request parameters are invalid: Invalid redirect_uri
+
+Please configure the Frontend URL. The Frontend URL does not match the authorization URL.
+
+#### Instagram Channel creation Error: Failed to exchange token
+
+Please make sure that tester account has been added to the facebook app settings.
+
+#### 400: Session Invalid when connecting the instagram channel
+
+This might be issue from facebook side. Please try again after some time.
+
+
+