Chat Widget

1VITE_BACKEND_URL=http://localhost:9000
2VITE_CHAT_APP_ID=<YOUR CONNECTYCUBE APP ID>
3VITE_CHAT_AUTH_KEY=<YOUR CONNECTYCUBE AUTH KEY>

1module.exports = defineConfig({
2    admin: {
3      vite: (config) => {
4          config.define["__VITE_CHAT_APP_ID__"] = JSON.stringify(process.env.VITE_CHAT_APP_ID);
5          config.define["__VITE_CHAT_AUTH_KEY__"] = JSON.stringify(process.env.VITE_CHAT_AUTH_KEY);
6          return {
7              optimizeDeps: {
8                  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.
9              },
10          };
11      },
12    },
13    projectConfig: { ... },
14    plugins: [
15      {
16        resolve: "@connectycube/chat-widget-medusa-plugin",
17        options: {},
18      },
19    ],
20  })

1NEXT_PUBLIC_CHAT_APP_ID=<YOUR CONNECTYCUBE APP ID>
2NEXT_PUBLIC_CHAT_AUTH_KEY=<YOUR CONNECTYCUBE AUTH KEY>
3NEXT_PUBLIC_STORE_ID=<YOUR MEDUSA STORE ID>
4NEXT_PUBLIC_STORE_NAME=<YOUR MEDUSA STORE NAME>

1"use client"
2
3import React, { useEffect, useState } from "react"
4import ConnectyCubeChatWidget from "@connectycube/chat-widget/react19"
5import { StoreCustomer, StoreProduct } from "@medusajs/types"
6 
7export interface ChatWidgetProps {
8  customer: StoreCustomer | null
9  product: StoreProduct
10  chatPerProduct?: boolean
11}
12 
13export default function ChatWidget({
14   customer,
15   product,
16   chatPerProduct,
17}: ChatWidgetProps) {
18
19 const quickActions = {
20    title: "Quick Actions",
21    description:
22      "Select an action from the options below or type a first message to start a conversation.",
23    actions: [
24      "Hi, I'm interested in this product.",
25      "Can you tell me more about the price and payment options?",
26      "Is the product still available?",
27      "Can I schedule a viewing?",
28    ],
29  }
30
31 if (!customer) {
32    return null
33 }
34
35 const [defaultChat, setDefaultChat] = useState<any>(null)
36 const [isOpen, setIsOpen] = useState<boolean>(false)
37
38 const onOpenCloseWidget = (isOpen: boolean) => {
39   setIsOpen(isOpen)
40 }
41
42 const storeId = process.env.NEXT_PUBLIC_STORE_ID
43 const storeName = process.env.NEXT_PUBLIC_STORE_NAME
44
45 useEffect(() => {
46   if (isOpen) {
47     console.log("Widget is open:", isOpen)
48     const defaultChatKey = chatPerProduct ? product.id : storeId
49     const defaultChatName = chatPerProduct ? product.title : storeName
50
51     setDefaultChat({
52       id: defaultChatKey,
53       opponentUserId: storeId,
54       type: "group",
55       name: defaultChatName,
56     })
57   }
58 }, [isOpen])
59
60 return (
61   <div>
62     <ConnectyCubeChatWidget
63       // credentials
64       appId={process.env.NEXT_PUBLIC_CHAT_APP_ID}
65       authKey={process.env.NEXT_PUBLIC_CHAT_AUTH_KEY}
66       userId={customer.id}
67       userName={`${customer.first_name} ${customer.last_name}`}
68       // settings
69       showOnlineUsersTab={false}
70       splitView={true}
71       // quick actions
72       quickActions={quickActions}
73       // notifications
74       showNotifications={true}
75       playSound={true}
76       // moderation
77       enableContentReporting={true}
78       enableBlockList={true}
79       // last seen
80       enableLastSeen={true}
81       // url preview
82       enableUrlPreview={true}
83       limitUrlsPreviews={1}
84       // attachments settings
85       attachmentsAccept={"image/*,video/*,.pdf,audio/*"}
86       // default chat
87       defaultChat={defaultChat}
88       onOpenChange={onOpenCloseWidget}
89     />
90   </div>
91 )
92}

1{
2  "compilerOptions": {
3    "module": "nodenext",
4    "moduleResolution": "nodenext",
5    ...
6  }
7}

1const customer = await retrieveCustomer()
2return (
3  <ProductTemplate
4    product={pricedProduct}
5    region={region}
6    countryCode={params.countryCode}
7    customer={customer}
8  />
9)

1<ChatWidget
2  customer={customer}
3  product={product}
4  chatPerProduct={true}
5/>