https://github.com/connectycube/chat-widget-medusa-plugin
Medusa Plugin to integrate Chat Widget for seller/buyer communication
https://github.com/connectycube/chat-widget-medusa-plugin
chat chat-widget medusa-plugin medusajs
Last synced: about 1 year ago
JSON representation
Medusa Plugin to integrate Chat Widget for seller/buyer communication
- Host: GitHub
- URL: https://github.com/connectycube/chat-widget-medusa-plugin
- Owner: ConnectyCube
- License: apache-2.0
- Created: 2025-03-21T07:44:00.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2025-05-16T10:05:02.000Z (about 1 year ago)
- Last Synced: 2025-05-16T10:39:10.480Z (about 1 year ago)
- Topics: chat, chat-widget, medusa-plugin, medusajs
- Language: TypeScript
- Homepage: https://connectycube.com/chat-widget
- Size: 1.18 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Medusa 2.0 chat widget plugin
Medusa 2.0 plugin to integrate Chat Widget for seller/buyer communication
## Features
- **Easy Integration**
- Simple script to copy-paste on your website, no coding required
- No need to handle backend infrastructure — ConnectyCube takes care of it
- **Superior feature set**
- Not just another basic chat widget - it's a complete chat system!
- **Customizable UI**
- Modify colors, themes, and layout to match your brand’s design
- **Real-time Messaging**
- Smooth, instant communication with no delays
- **Moderation tools**
- Keep chats safe with message filtering, user bans, and admin controls
- **Multimedia support**
- Send images, files, and emojis for richer conversations
## Installation
### Backend
1. Add plugin to your Medusa 2.0 core app:
```
yarn add @connectycube/chat-widget-medusa-plugin
```
2. Create ConnectyCube account [https://connectycube.com/signup](https://connectycube.com/signup/) and application, obtain credentials
3. Add the following variables to your `.env` file:
```
VITE_BACKEND_URL=http://localhost:9000
VITE_CHAT_APP_ID=
VITE_CHAT_AUTH_KEY=
```
- `VITE_BACKEND_URL` - The URL of your Medusa backend, required for custom admin components.
- `VITE_CHAT_APP_ID` - This is essential for authenticating your application with the ConnectyCube platform and accessing its chat services.
- `VITE_CHAT_AUTH_KEY` - This key is used to authorize your application and ensure secure communication with the ConnectyCube SDK.
3. Add the following code to your `medusa-config.ts` file:
```typescript
module.exports = defineConfig({
admin: {
vite: (config) => {
config.define["__VITE_CHAT_APP_ID__"] = JSON.stringify(process.env.VITE_CHAT_APP_ID);
config.define["__VITE_CHAT_AUTH_KEY__"] = JSON.stringify(process.env.VITE_CHAT_AUTH_KEY);
return {
optimizeDeps: {
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.
},
};
},
},
projectConfig: { ... },
plugins: [
{
resolve: "@connectycube/chat-widget-medusa-plugin",
options: {},
},
],
})
```
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).
4. Start the project:
```bash
yarn dev
```
### Storefront
1. Add chat widget to your Storefront app:
```
yarn add @connectycube/chat-widget
```
2. Add the following variables to your `.env` file:
```
NEXT_PUBLIC_CHAT_APP_ID=
NEXT_PUBLIC_CHAT_AUTH_KEY=
NEXT_PUBLIC_STORE_ID=
NEXT_PUBLIC_STORE_NAME=
```
3. Create `src/ChatWidget.tsx` component with the following content:
```typescript
"use client"
import React, { useEffect, useState } from "react"
import ConnectyCubeChatWidget from "@connectycube/chat-widget/react19"
import { StoreCustomer, StoreProduct } from "@medusajs/types"
export interface ChatWidgetProps {
customer: StoreCustomer | null
product: StoreProduct
chatPerProduct?: boolean
}
export default function ChatWidget({
customer,
product,
chatPerProduct,
}: ChatWidgetProps) {
const quickActions = {
title: "Quick Actions",
description:
"Select an action from the options below or type a first message to start a conversation.",
actions: [
"Hi, I'm interested in this product.",
"Can you tell me more about the price and payment options?",
"Is the product still available?",
"Can I schedule a viewing?",
],
}
if (!customer) {
return null
}
const [defaultChat, setDefaultChat] = useState(null)
const [isOpen, setIsOpen] = useState(false)
const onOpenCloseWidget = (isOpen: boolean) => {
setIsOpen(isOpen)
}
const storeId = process.env.NEXT_PUBLIC_STORE_ID
const storeName = process.env.NEXT_PUBLIC_STORE_NAME
useEffect(() => {
if (isOpen) {
console.log("Widget is open:", isOpen)
const defaultChatKey = chatPerProduct ? product.id : storeId
const defaultChatName = chatPerProduct ? product.title : storeName
setDefaultChat({
id: defaultChatKey,
opponentUserId: storeId,
type: "group",
name: defaultChatName,
})
}
}, [isOpen])
return (
)
}
```
4. update `tsconfig.json`:
```typescript
{
"compilerOptions": {
"module": "nodenext",
"moduleResolution": "nodenext",
...
}
}
```
6. update `storefront/src/app/[countryCode]/(main)/products/[handle]/page.tsx` to retrieve customer info and pass it to `ProductTemplate`:
```typescript
const customer = await retrieveCustomer()
return (
)
```
7. Finally, connect `ChatWidget` component on product details page, e.g. `src/modules/products/templates/index.tsx`
```typescript
```
## Demo app
The complete demo app (backend + storefront) available https://github.com/ConnectyCube/chat-widget-medusa-plugin-demo-app
## How can I use it?
On storefront, once logged in and opened product page, there will be a Chat toggle button bottom right:
Once clicked, a chat with seller will be opened where you can ask any product's related questions:
From 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:
## Have an issue?
Join 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)
## Community
- [Blog](https://connectycube.com/blog)
- X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
- [Facebook](https://www.facebook.com/ConnectyCube)
## License
Apache 2.0