iachat/app/javascript/dashboard/composables
Muhsin Keloth d827e66453
feat: Instagram Inbox using Instagram Business Login (#11054)
This PR introduces basic minimum version of **Instagram Business
Login**, making Instagram inbox setup more straightforward by removing
the Facebook Page dependency. This update enhances user experience and
aligns with Meta’s recommended best practices.

Fixes
https://linear.app/chatwoot/issue/CW-3728/instagram-login-how-to-implement-the-changes


## Why Introduce Instagram as a Separate Inbox?


Currently, our Instagram integration requires linking an Instagram
account to a Facebook Page, making setup complex. To simplify this
process, Instagram now offers **Instagram Business Login**, which allows
users to authenticate directly with their Instagram credentials.

The **Instagram API with Instagram Login** enables businesses and
creators to send and receive messages without needing a Facebook Page
connection. While an Instagram Business or Creator account is still
required, this approach provides a more straightforward integration
process.

| **Existing Approach (Facebook Login for Business)** | **New Approach
(Instagram Business Login)** |
| --- | --- |
| Requires linking Instagram to a Facebook Page | No Facebook Page
required |
| Users log in via Facebook credentials | Users log in via Instagram
credentials |
| Configuration is more complex | Simpler setup |

Meta recommends using **Instagram Business Login** as the preferred
authentication method due to its easier configuration and improved
developer experience.

---

## Implementation Plan

The core messaging functionality is already in place, but the transition
to **Instagram Business Login** requires adjustments.

### Changes & Considerations

- **API Adjustments**: The Instagram API uses `graph.instagram`, whereas
Koala (our existing library) interacts with `graph.facebook`. We may
need to modify API calls accordingly.
- **Three Main Modules**:
  1. **Instagram Business Login** – Handle authentication flow.
2. **Permissions & Features** – Ensure necessary API scopes are granted.
  3. **Webhooks** – Enable real-time message retrieval.

![CleanShot 2025-03-10 at 21 32
28@2x](https://github.com/user-attachments/assets/1b019001-8d16-4e59-aca2-ced81e98f538)


---

## Instagram Login Flow

1. User clicks **"Create Inbox"** for Instagram.
2. App redirects to the [Instagram Authorization
URL](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#embed-the-business-login-url).
3. After authentication, Instagram returns an authorization code.
5. The app exchanges the code for a **long-lived token** (valid for 60
days).
6. Tokens are refreshed periodically to maintain access.
7. Once completed, the app creates an inbox and redirects to the
Chatwoot dashboard.

---

## How to Test the Instagram Inbox

1. Create a new app on [Meta's Developer
Portal](https://developers.facebook.com/apps/).
2. Select **Business** as the app type and configure it.
3. Add the Instagram product and connect a business account.
4. Copy Instagram app ID and Instagram app secret
5. Add the Instagram app ID and Instagram app secret to your app config
via `{Chatwoot installation
url}/super_admin/app_config?config=instagram`
6. Configure Webhooks:
   - Callback URL: `{your_chatwoot_url}/webhooks/instagram`
   - Verify Token: `INSTAGRAM_VERIFY_TOKEN`
- Subscribe to `messages`, `messaging_seen`, and `message_reactions`
events.
7. Set up **Instagram Business Login**:
   - Redirect URL: `{your_chatwoot_url}/instagram/callback`
8. Test inbox creation via the Chatwoot dashboard.


## 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.
---


## To-Do List

- [x] Basic integration setup completed.  
- [x] Enable sending messages via [Messaging
API](https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/messaging-api).
- [x] Implement automatic webhook subscriptions on inbox creation.  
- [x] Handle **canceled authorization errors**.  
- [x] Handle all the errors
https://developers.facebook.com/docs/instagram-platform/instagram-graph-api/reference/error-codes
- [x] Dynamically fetch **account IDs** instead of hardcoding them.  
- [x] Prevent duplicate Instagram channel creation for the same account.
- [x] Use **Global Config** instead of environment variables.  
- [x] Explore **Human Agent feature** for message handling.  
- [x] Write and refine **test cases** for all scenarios.  
- [x] Implement **token refresh mechanism** (tokens expire after 60
days).
Fixes https://github.com/chatwoot/chatwoot/issues/10440

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2025-04-08 10:47:41 +05:30
..
chatlist fix: sentry issues (#10695) 2025-01-16 15:49:48 +05:30
commands feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
spec chore: Improvements in image attachment viewer (#11040) 2025-03-18 14:01:18 +05:30
utils feat: Add new sidebar for Chatwoot V4 (#10291) 2024-10-23 18:32:37 -07:00
emitter.js feat: Reconnect logic (#9453) 2024-06-03 15:54:19 +05:30
index.js chore: fix circleci on vite build (#10214) 2024-10-07 15:27:41 +05:30
store.js feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
useAccount.js feat: Add frontend changes for Captain limits (#10749) 2025-01-24 09:21:09 -08:00
useAdmin.js feat: Replace alertMixin usage with useAlert (#9793) 2024-07-23 16:41:11 +05:30
useAgentsList.js fix: Translate "None" option in agent assignment dropdown (#11060) 2025-03-11 14:49:27 -07:00
useAI.js feat: Vite + vue 3 💚 (#10047) 2024-10-02 00:36:30 -07:00
useAutomation.js fix: Update inconsistent behaviour of create and edit automation rules (#10197) 2024-10-04 08:06:36 -07:00
useAutomationValues.js fix: Translate "None" option in automation select (#11076) 2025-03-13 16:44:46 -07:00
useCaptain.js feat: Add frontend changes for Captain limits (#10749) 2025-01-24 09:21:09 -08:00
useConfig.js feat: Rewrite configMixin to a composable (#9921) 2024-08-14 12:56:30 +05:30
useConversationLabels.js feat: Rewrite conversation/labelMixin to a composable (#9936) 2024-08-12 17:41:12 +05:30
useDetectKeyboardLayout.js feat: Rewrite keyboardEventListener mixin to a composable (#9831) 2024-08-05 18:59:47 +05:30
useEditableAutomation.js fix: Update inconsistent behaviour of create and edit automation rules (#10197) 2024-10-04 08:06:36 -07:00
useFileUpload.js feat(v4): Compose new conversation without multiple clicks (#10545) 2024-12-05 20:16:29 -08:00
useFontSize.js feat: Support bigger font size in dashboard (#10974) 2025-02-27 12:10:33 +05:30
useImageZoom.js chore: Improvements in image attachment viewer (#11040) 2025-03-18 14:01:18 +05:30
useInbox.js feat: Instagram Inbox using Instagram Business Login (#11054) 2025-04-08 10:47:41 +05:30
useIntegrationHook.js chore: Repalce Hook Mixin with useHook composable [CW-3454] (#9994) 2024-08-22 16:48:02 +05:30
useKeyboardEvents.js refactor: useKeyboardEvents composable (#9959) 2024-08-22 16:40:55 +05:30
useKeyboardNavigableList.js refactor: useKeyboardEvents composable (#9959) 2024-08-22 16:40:55 +05:30
useLiveRefresh.js feat: Allow users to see heatmap for last 30 days (#10848) 2025-02-19 14:54:15 -08:00
useMacros.js feat: Rewrite automations/methodsMixin to a composable (#9956) 2024-08-27 12:30:08 +05:30
usePolicy.js feat: Add visibility checks for installation types (#10773) 2025-02-21 14:48:31 -08:00
useReportMetrics.js feat: Rewrite reportMixin to a composable (#10029) 2024-08-27 08:00:05 +05:30
useTransformKeys.js feat: integrate new bubbles (#10550) 2024-12-19 18:41:55 +05:30
useUISettings.js feat(apps): Shopify Integration (#11101) 2025-03-19 15:37:55 -07:00