Chat Widget

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:

1
yarn add @connectycube/chat-widget-medusa-plugin

1. Create ConnectyCube account https://connectycube.com/signup and application, obtain credentials:

Also, go to Chat -> Custom Fields and create a new custom field called Copy to clipboardexternalId:

1. Add the following variables to your Copy to clipboard.env file:

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

• Copy to clipboardVITE_BACKEND_URL - The URL of your Medusa backend, required for custom admin components.
• Copy to clipboardVITE_CHAT_APP_ID - This is essential for authenticating your application with the ConnectyCube platform and accessing its chat services.
• Copy to clipboardVITE_CHAT_AUTH_KEY - This key is used to authorize your application and ensure secure communication with the ConnectyCube SDK.

1. Add the following code to your Copy to clipboardmedusa-config.ts file: This code connect plugin and helps to resolve an issue similar to https://github.com/medusajs/medusa/issues/11248.

1234567891011121314151617181920
  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: {},
      },
    ],
  })

1. Start the project:

1
yarn dev

Storefront

1. Add chat widget to your Storefront app:

1
yarn add @connectycube/chat-widget

1. Add the following variables to your Copy to clipboard.env file:

1234
NEXT_PUBLIC_CHAT_APP_ID=<YOUR CONNECTYCUBE APP ID>
NEXT_PUBLIC_CHAT_AUTH_KEY=<YOUR CONNECTYCUBE AUTH KEY>
NEXT_PUBLIC_STORE_ID=<YOUR MEDUSA STORE ID>
NEXT_PUBLIC_STORE_NAME=<YOUR MEDUSA STORE NAME>

1. Create Copy to clipboardsrc/ChatWidget.tsx component with the following content:

1234567891011121314151617181920
"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",

1. update Copy to clipboardtsconfig.json:

1234567
{
  "compilerOptions": {
    "module": "nodenext",
    "moduleResolution": "nodenext",
    ...
  }
}

1. update Copy to clipboardstorefront/src/app/[countryCode]/(main)/products/[handle]/page.tsx to retrieve customer info and pass it to Copy to clipboardProductTemplate:

123456789
const customer = await retrieveCustomer()
return (
  <ProductTemplate
    product={pricedProduct}
    region={region}
    countryCode={params.countryCode}
    customer={customer}
  />
)

1. Finally, connect Copy to clipboardChatWidget component on product details page, e.g. Copy to clipboardsrc/modules/products/templates/index.tsx

12345
<ChatWidget
  customer={customer}
  product={product}
  chatPerProduct={true}
/>

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 for quick answers to your questions or file a GitHub issue

Community

• Blog
• X (twitter)@ConnectyCube
• Facebook

License

Apache 2.0