{"id":28197891,"url":"https://github.com/connectycube/chat-widget-medusa-plugin","last_synced_at":"2025-05-16T17:17:11.143Z","repository":{"id":292113456,"uuid":"952387798","full_name":"ConnectyCube/chat-widget-medusa-plugin","owner":"ConnectyCube","description":"Medusa Plugin to integrate Chat Widget for seller/buyer communication","archived":false,"fork":false,"pushed_at":"2025-05-16T10:05:02.000Z","size":1233,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-05-16T10:39:10.480Z","etag":null,"topics":["chat","chat-widget","medusa-plugin","medusajs"],"latest_commit_sha":null,"homepage":"https://connectycube.com/chat-widget","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConnectyCube.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-21T07:44:00.000Z","updated_at":"2025-05-16T10:03:06.000Z","dependencies_parsed_at":"2025-05-08T08:32:16.707Z","dependency_job_id":"e1f3bc0b-5a68-4d04-8e1c-8779111d6577","html_url":"https://github.com/ConnectyCube/chat-widget-medusa-plugin","commit_stats":null,"previous_names":["connectycube/chat-widget-medusa-plugin"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnectyCube%2Fchat-widget-medusa-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnectyCube%2Fchat-widget-medusa-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnectyCube%2Fchat-widget-medusa-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConnectyCube%2Fchat-widget-medusa-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConnectyCube","download_url":"https://codeload.github.com/ConnectyCube/chat-widget-medusa-plugin/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573559,"owners_count":22093732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chat-widget","medusa-plugin","medusajs"],"created_at":"2025-05-16T17:16:09.859Z","updated_at":"2025-05-16T17:17:11.120Z","avatar_url":"https://github.com/ConnectyCube.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Medusa 2.0 chat widget plugin \n\nMedusa 2.0 plugin to integrate Chat Widget for seller/buyer communication\n\n## Features\n\n- **Easy Integration**\n  - Simple script to copy-paste on your website, no coding required\n  - No need to handle backend infrastructure — ConnectyCube takes care of it\n- **Superior feature set**\n  - Not just another basic chat widget - it's a complete chat system!\n- **Customizable UI**\n  - Modify colors, themes, and layout to match your brand’s design\n- **Real-time Messaging**\n  - Smooth, instant communication with no delays\n- **Moderation tools**\n  - Keep chats safe with message filtering, user bans, and admin controls\n- **Multimedia support**\n  - Send images, files, and emojis for richer conversations\n\n## Installation\n\n### Backend\n\n1. Add plugin to your Medusa 2.0 core app:\n\n    ```\n    yarn add @connectycube/chat-widget-medusa-plugin\n    ```\n\n2.  Create ConnectyCube account [https://connectycube.com/signup](https://connectycube.com/signup/) and application, obtain credentials\n\n\u003cimg width=\"800\" alt=\"Screenshot 2025-05-07 at 15 19 59\" src=\"https://github.com/user-attachments/assets/77995af3-eb65-4559-8939-e3cc36104862\" /\u003e\n\n\n3. Add the following variables to your `.env` file:\n\n    ```\n    VITE_BACKEND_URL=http://localhost:9000\n    VITE_CHAT_APP_ID=\u003cYOUR CONNECTYCUBE APP ID\u003e\n    VITE_CHAT_AUTH_KEY=\u003cYOUR CONNECTYCUBE AUTH KEY\u003e\n    ```\n\n    - `VITE_BACKEND_URL` - The URL of your Medusa backend, required for custom admin components.\n    - `VITE_CHAT_APP_ID` - This is essential for authenticating your application with the ConnectyCube platform and accessing its chat services.\n    - `VITE_CHAT_AUTH_KEY` - This key is used to authorize your application and ensure secure communication with the ConnectyCube SDK.\n\n3.  Add the following code to your `medusa-config.ts` file:\n\n    ```typescript\n      module.exports = defineConfig({\n      admin: {\n        vite: (config) =\u003e {\n            config.define[\"__VITE_CHAT_APP_ID__\"] = JSON.stringify(process.env.VITE_CHAT_APP_ID);\n            config.define[\"__VITE_CHAT_AUTH_KEY__\"] = JSON.stringify(process.env.VITE_CHAT_AUTH_KEY);\n            return {\n                optimizeDeps: {\n                    include: [\"qs\", \"eventemitter3\", \"@xmpp/iq/callee\", \"@xmpp/resolve\", \"@xmpp/session-establishment\", \"@xmpp/client-core\", \"@xmpp/sasl-plain\", \"@xmpp/stream-features\", \"@xmpp/resource-binding\", \"@xmpp/reconnect\", \"@xmpp/middleware\", \"@xmpp/sasl-anonymous\", \"@xmpp/websocket\", \"@xmpp/iq/caller\", \"@xmpp/sasl\"], // Will be merged with config that we use to run and build the dashboard.\n                },\n            };\n        },\n      },\n      projectConfig: { ... },\n      plugins: [\n        {\n          resolve: \"@connectycube/chat-widget-medusa-plugin\",\n          options: {},\n        },\n      ],\n    })\n    ```\n\n    This code connect plugin and helps to resolve an issue similar to [https://github.com/medusajs/medusa/issues/11248](https://github.com/medusajs/medusa/issues/11248).\n\n4.  Start the project:\n\n    ```bash\n    yarn dev\n    ```\n\n### Storefront\n\n1. Add chat widget to your Storefront app:\n\n    ```\n    yarn add @connectycube/chat-widget\n    ```\n\n2. Add the following variables to your `.env` file:\n\n    ```\n    NEXT_PUBLIC_CHAT_APP_ID=\u003cYOUR CONNECTYCUBE APP ID\u003e\n    NEXT_PUBLIC_CHAT_AUTH_KEY=\u003cYOUR CONNECTYCUBE AUTH KEY\u003e\n    NEXT_PUBLIC_STORE_ID=\u003cYOUR MEDUSA STORE ID\u003e\n    NEXT_PUBLIC_STORE_NAME=\u003cYOUR MEDUSA STORE NAME\u003e\n    ```\n    \n3. Create `src/ChatWidget.tsx` component with the following content:\n\n   ```typescript\n   \"use client\"\n\n   import React, { useEffect, useState } from \"react\"\n   import ConnectyCubeChatWidget from \"@connectycube/chat-widget/react19\"\n   import { StoreCustomer, StoreProduct } from \"@medusajs/types\"\n    \n   export interface ChatWidgetProps {\n     customer: StoreCustomer | null\n     product: StoreProduct\n     chatPerProduct?: boolean\n   }\n    \n   export default function ChatWidget({\n      customer,\n      product,\n      chatPerProduct,\n   }: ChatWidgetProps) {\n  \n    const quickActions = {\n       title: \"Quick Actions\",\n       description:\n         \"Select an action from the options below or type a first message to start a conversation.\",\n       actions: [\n         \"Hi, I'm interested in this product.\",\n         \"Can you tell me more about the price and payment options?\",\n         \"Is the product still available?\",\n         \"Can I schedule a viewing?\",\n       ],\n     }\n\n    if (!customer) {\n       return null\n    }\n\n    const [defaultChat, setDefaultChat] = useState\u003cany\u003e(null)\n    const [isOpen, setIsOpen] = useState\u003cboolean\u003e(false)\n\n    const onOpenCloseWidget = (isOpen: boolean) =\u003e {\n      setIsOpen(isOpen)\n    }\n\n    const storeId = process.env.NEXT_PUBLIC_STORE_ID\n    const storeName = process.env.NEXT_PUBLIC_STORE_NAME\n\n    useEffect(() =\u003e {\n      if (isOpen) {\n        console.log(\"Widget is open:\", isOpen)\n        const defaultChatKey = chatPerProduct ? product.id : storeId\n        const defaultChatName = chatPerProduct ? product.title : storeName\n  \n        setDefaultChat({\n          id: defaultChatKey,\n          opponentUserId: storeId,\n          type: \"group\",\n          name: defaultChatName,\n        })\n      }\n    }, [isOpen])\n\n    return (\n      \u003cdiv\u003e\n        \u003cConnectyCubeChatWidget\n          // credentials\n          appId={process.env.NEXT_PUBLIC_CHAT_APP_ID}\n          authKey={process.env.NEXT_PUBLIC_CHAT_AUTH_KEY}\n          userId={customer.id}\n          userName={`${customer.first_name} ${customer.last_name}`}\n          // settings\n          showOnlineUsersTab={false}\n          splitView={true}\n          // quick actions\n          quickActions={quickActions}\n          // notifications\n          showNotifications={true}\n          playSound={true}\n          // moderation\n          enableContentReporting={true}\n          enableBlockList={true}\n          // last seen\n          enableLastSeen={true}\n          // url preview\n          enableUrlPreview={true}\n          limitUrlsPreviews={1}\n          // attachments settings\n          attachmentsAccept={\"image/*,video/*,.pdf,audio/*\"}\n          // default chat\n          defaultChat={defaultChat}\n          onOpenChange={onOpenCloseWidget}\n        /\u003e\n      \u003c/div\u003e\n    )\n   }\n   ```\n\n\n4. update `tsconfig.json`:\n\n   ```typescript\n   {\n     \"compilerOptions\": {\n       \"module\": \"nodenext\",\n       \"moduleResolution\": \"nodenext\",\n       ...\n     }\n   }\n   ```\n\n6. update `storefront/src/app/[countryCode]/(main)/products/[handle]/page.tsx` to retrieve customer info and pass it to `ProductTemplate`:\n\n   ```typescript\n   const customer = await retrieveCustomer()\n   return (\n     \u003cProductTemplate\n       product={pricedProduct}\n       region={region}\n       countryCode={params.countryCode}\n       customer={customer}\n     /\u003e\n   )\n   ```\n\n7. Finally, connect `ChatWidget` component on product details page, e.g. `src/modules/products/templates/index.tsx`\n   \n   ```typescript\n   \u003cChatWidget\n     customer={customer}\n     product={product}\n     chatPerProduct={true}\n   /\u003e\n   ```\n\n## Demo app\n\nThe complete demo app (backend + storefront) available https://github.com/ConnectyCube/chat-widget-medusa-plugin-demo-app\n\n## How can I use it?\n\nOn storefront, once logged in and opened product page, there will be a Chat toggle button bottom right:\n\n\u003cimg width=\"1094\" alt=\"Screenshot 2025-05-07 at 16 35 22\" src=\"https://github.com/user-attachments/assets/af6acca9-6619-4d9f-b33a-ba9ccafcc03c\" /\u003e\n\nOnce clicked, a chat with seller will be opened where you can ask any product's related questions:\n\n\u003cimg width=\"1511\" alt=\"Screenshot 2025-05-07 at 16 39 20\" src=\"https://github.com/user-attachments/assets/17f613fc-0467-41f6-a333-c14d08d54f40\" /\u003e\n\nFrom Medusa dashboard there will be a new page called Chat, with the widget embedded, where all customers' chats are displayed, so you as a merchant can reply:\n\n\u003cimg width=\"1509\" alt=\"Screenshot 2025-05-07 at 16 38 13\" src=\"https://github.com/user-attachments/assets/13cefe90-216b-46bb-94b3-ac754df4de74\" /\u003e\n\n## Have an issue?\n\nJoin our [Discord](https://discord.com/invite/zqbBWNCCFJ) for quick answers to your questions or [file a GitHub issue](https://github.com/ConnectyCube/chat-widget-medusa-plugin/issues) \n\n## Community\n\n- [Blog](https://connectycube.com/blog)\n- X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)\n- [Facebook](https://www.facebook.com/ConnectyCube)\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnectycube%2Fchat-widget-medusa-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconnectycube%2Fchat-widget-medusa-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconnectycube%2Fchat-widget-medusa-plugin/lists"}