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

$3

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:

`typescript
import { ChatWidgetPlugin } from '@connectycube/vendure-plugin-chat-widget';

plugins: [
ChatWidgetPlugin.init({
appId: ..., // ConnectyCube App Id
authKey: "", // ConnectyCube Auth Key
}),
];
`

4. Set proper Seller name in Vendure Dashboard > Settings > Sellers. The plugin uses Seller entity to identify your store, mainly it's name field - this is how your store customers will see your name in chat widget when communicate. So set the proper name of Seller, e.g. My Awesome Store.

#### Multi-vendor Marketplaces

In a case you have Multi-vendor Marketplace, this plugin also can serve well. No extra configuration of plugin is needed. As stated above, the plugin uses Seller entity to identify your store, so each vendor will have its own chat space with customers.

$3

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=
CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY="
CHAT_WIDGET_STORE_ID=
CHAT_WIDGET_STORE_NAME=
`

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

`typescript
import { useEffect, useState } from 'react';
import ConnectyCubeChatWidget from '@connectycube/chat-widget';

type StoreCustomer = {
id: string;
firstName: string;
lastName: string;
};

type StoreProduct = {
id: string;
title: string;
};

export type ChatWidgetEnv = {
CHAT_WIDGET_STORE_ID: string;
CHAT_WIDGET_STORE_NAME: string;
CHAT_WIDGET_CONNECTYCUBE_APP_ID: string;
CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY: string;
};

export interface ChatWidgetProps {
customer: StoreCustomer | null;
product: StoreProduct;
chatPerProduct?: boolean;
env: ChatWidgetEnv;
}

export default function ChatWidget({
customer,
product,
chatPerProduct,
env
}: 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 = env.CHAT_WIDGET_STORE_ID;
const storeName = env.CHAT_WIDGET_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 remix.config.js:

`typescript
const commonConfig = {
...
browserNodeBuiltinsPolyfill: { modules: { events: true } },
};
`

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

`typescript
import ChatWidget, { ChatWidgetEnv } from '~/components/ChatWidget';

...

export async function loader({ params, request }: DataFunctionArgs) {
...

const { product } = await getProductBySlug(params.slug!, { request });

const activeCustomer = await getActiveCustomer({ request });

return json({ product: product!, activeCustomer, ENV: {
CHAT_WIDGET_STORE_ID: process.env.CHAT_WIDGET_STORE_ID,
CHAT_WIDGET_STORE_NAME: process.env.CHAT_WIDGET_STORE_NAME,
CHAT_WIDGET_CONNECTYCUBE_APP_ID:
process.env.CHAT_WIDGET_CONNECTYCUBE_APP_ID,
CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY:
process.env.CHAT_WIDGET_CONNECTYCUBE_AUTH_KEY,
}})
}

export default function ProductSlug() {
...

const { product, activeCustomer, ENV } = useLoaderData();

return (


In a case you have Multi-vendor Marketplace, you do not need to specify the CHAT_WIDGET_STORE_ID and CHAT_WIDGET_STORE_NAME env variables, as each vendor will have its own chat space with customers based on Seller entity.

Instead of that, you have to fetch Seller info from the product/variant data and pass it to the ChatWidget component, so storeId and storeName should look like this:

`typescript
// pseudo code
const storeId = product.seller.id;
const storeName = product.seller.name;
``

The way how to get the seller name for each variant/product depends on your Multi-vendor Marketplace implementation.
There is a Discord discussion about it which may help to figure it out what way works better for your use case.

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