Vendure chat widget plugin

Vendure 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 Vendure app:

yarn add @connectycube/vendure-plugin-chat-widget

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

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

3. Add the following code to your vendure-config.ts file:

   1  import { ChatWidgetPlugin } from '@connectycube/vendure-plugin-chat-widget';
   2
   3  plugins: [
   4    ChatWidgetPlugin.init({
   5       appId: ..., // ConnectyCube App Id
   6       authKey: "", // ConnectyCube Auth Key
   7       storeName: "", // A name of your store (any string, will be visible by buyer)
   8       storeId: "" // Some uniq identifier of your store (any uniq string)
   9    }),
   10  ];

Storefront

1. Add chat widget to your Storefront app. For example, let's use Remix storefront starter as an example:

  yarn add @connectycube/chat-widget
  yarn connectycube patch-ssr     # Apply SSR patches for Remix to work well

2. Add the following variables to your .env file:

  CHAT_WIDGET_CONNECTYCUBE_APP_ID=<CONNECTYCUBE APP ID>
  CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY="<CONNECTYCUBE AUTH KEY>
  CHAT_WIDGET_STORE_ID=<YOUR STORE ID>
  CHAT_WIDGET_STORE_NAME=<YOUR STORE NAME>

3. Create app/components/ChatWidget.tsx component with the following content:

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

4. update remix.config.js:

1  const commonConfig = {
2    ...
3    browserNodeBuiltinsPolyfill: { modules: { events: true } },
4  };

5. Finally, connect ChatWidget component on product details page, e.g. app/routes/products.$slug.tsx

1  import ChatWidget, { ChatWidgetEnv } from '~/components/ChatWidget';
2
3  ...
4
5  export async function loader({ params, request }: DataFunctionArgs) {
6    ...
7
8    const { product } = await getProductBySlug(params.slug!, { request });
9
10    const activeCustomer = await getActiveCustomer({ request });
11
12    return json({ product: product!, activeCustomer, ENV: {
13      CHAT_WIDGET_STORE_ID: process.env.CHAT_WIDGET_STORE_ID,
14      CHAT_WIDGET_STORE_NAME: process.env.CHAT_WIDGET_STORE_NAME,
15      CHAT_WIDGET_CONNECTYCUBE_APP_ID:
16        process.env.CHAT_WIDGET_CONNECTYCUBE_APP_ID,
17      CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY:
18        process.env.CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY,
19    }})
20  }
21
22  export default function ProductSlug() {
23    ...
24
25    const { product, activeCustomer, ENV } = useLoaderData<typeof loader>();
26
27    return (
28      <div>
29        ...
30
31        <ChatWidget
32          customer={activeCustomer.activeCustomer!}
33          product={{ title: product.name, id: product.id }}
34          chatPerProduct={true}
35          env={ENV as ChatWidgetEnv}
36        />
37      </div>
38    )
39  }

How can I use it?

On storefront, once logged in and opened product page, there will be a Chat toggle button bottom right where customers can contact the merchant:

From Vendure 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