iachat/app/javascript/dashboard/components-next
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
..
avatar revert: Next bubble improvements (#10795) 2025-01-29 20:04:45 -08:00
banner chore: Update buttons in dashboard (#11145) 2025-03-31 17:21:32 -07:00
breadcrumb feat(v4): Add new contact details screen (#10504) 2024-12-03 21:29:47 -08:00
button chore: Update buttons in conversation screens - 2 (#11134) 2025-03-21 21:54:54 +05:30
Campaigns feat: Support bigger font size in dashboard (#10974) 2025-02-27 12:10:33 +05:30
captain feat: Add support for feature spotlight components (#11012) 2025-03-18 13:17:42 -07:00
checkbox feat: Add support for bulk action for Captain FAQs (#10905) 2025-02-27 17:05:33 -08:00
colorpicker feat: Update button component (#10362) 2024-10-29 14:00:24 +05:30
combobox chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
Contacts fix: Duplicate action being sent when we click on save contact (#11138) 2025-03-20 14:36:31 -07:00
Conversation/ConversationCard fix: sentry issues (#10695) 2025-01-16 15:49:48 +05:30
copilot feat: allow copilot use without connecting an inbox (#10992) 2025-02-28 15:20:39 -08:00
CustomAttributes feat(v4): Add new contact details screen (#10504) 2024-12-03 21:29:47 -08:00
dialog feat(apps): Shopify Integration (#11101) 2025-03-19 15:37:55 -07:00
dropdown-menu chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
Editor chore: Improve new conversation form (#10687) 2025-01-15 13:10:09 +05:30
feature-spotlight feat: Add support for feature spotlight components (#11012) 2025-03-18 13:17:42 -07:00
filter chore: Update buttons in dashboard (#11145) 2025-03-31 17:21:32 -07:00
flag feat: Flag icon component (#10564) 2024-12-10 11:53:24 +05:30
HelpCenter chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
icon feat: Instagram Inbox using Instagram Business Login (#11054) 2025-04-08 10:47:41 +05:30
Inbox fix: v4 ui issues (#10652) 2025-01-08 18:17:50 +05:30
inline-input chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
input chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
Label chore(v4): Update colors (#10700) 2025-01-16 15:27:23 +05:30
message feat: Instagram Inbox using Instagram Business Login (#11054) 2025-04-08 10:47:41 +05:30
NewConversation chore: Add cache to improve widget performance (#11163) 2025-03-24 16:04:49 -07:00
pagination feat: Support bigger font size in dashboard (#10974) 2025-02-27 12:10:33 +05:30
phonenumberinput chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
selectmenu feat: Add the new select menu component (#10445) 2024-11-19 14:25:45 -08:00
sidebar chore(i18n): Improvements in automation and macros (#11231) 2025-04-02 15:48:42 -07:00
spinner feat: Add Spinner to new components (#10303) 2024-10-16 17:53:46 -07:00
switch feat: Support bigger font size in dashboard (#10974) 2025-02-27 12:10:33 +05:30
tabbar feat: Update button component (#10362) 2024-10-29 14:00:24 +05:30
taginput feat(v4): Compose a new conversation from a phone number. (#10568) 2024-12-17 18:07:58 +05:30
textarea chore: Update styles in settings pages (#11070) 2025-03-18 14:40:02 -07:00
CardLayout.vue feat: Add support for bulk action for Captain FAQs (#10905) 2025-02-27 17:05:33 -08:00
EmptyStateLayout.vue feat: Support bigger font size in dashboard (#10974) 2025-02-27 12:10:33 +05:30