This is an example project that demonstrates how to integrate ChatKitty's Chat UI with a Vue 2 application. ChatKitty provides a fully-featured chat interface out-of-the-box and this project aims to make the integration with Vue 2 as seamless as possible.
- Fully functional chat interface
- Easy to customize
- Real-time updates
- Node.js (>= 12.x)
- npm (>= 6.x)
-
Clone this repository
git clone https://github.com/ChatKitty/chatkitty-chat-ui-vue-2-example.git
-
Navigate to the project directory
cd chatkitty-chat-ui-vue-2-example
-
Install the dependencies
npm install
- Start the development server
npm run serve
This will start the development server, and you can navigate to http://localhost:8081
to see the chat interface in action.
In the App.vue
file, a div container with the ID chat-ui
is specified as the location where the ChatKitty UI will be rendered.
<div id="chat-ui"></div>
This div container acts as a placeholder where the ChatKitty chat interface will be dynamically loaded and displayed. When calling the loadChatUi
function during the Vue component's mounted
lifecycle hook, the chat interface will be rendered within this div container.
It's essential to ensure this container is present in your Vue template and properly styled, so the chat interface displays correctly within your application layout.
The following properties are passed to loadChatUi
:
widgetId
: Your ChatKitty widget UI identifierusername
: The unique username for the chat sessioncontainer
: Object specifying the container properties, e.g.,id
(of the placeholder div),height
,width
Furthermore, you can customize the chat components and handle different actions, such as mounting the chat UI, handling channel details, and handling menu actions.
For example,
loadChatUi({
widgetId: 'UWiEkKvdAaUJ1xut',
username: '2989c53a-d0c5-4222-af8d-fbf7b0c74ec6',
container: {
height: '100%'
},
...
});
The container styles can be customized. Here's an example:
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
display: flex;
justify-content: center;
height: 200px;
}
.chat-ui-wrapper {
flex: 1;
min-height: 0;
}
To customize the chat widget, use the ChatKitty Platform API.
PATCH
https://api.chatkitty.com/widgets/{id}
Content-Type: application/json+merge-patch
{
"styles": {
"$version": "0.0.1",
"base-theme": "light",
"overrides": {
...
}
}
}
The complete list of styles that can be customized can be found here.
vue: ^2.6.14
chatkitty: ^2.0.2
This project is licensed under the MIT License.
For any issues, please create an issue on GitHub.