@rovahub/vue-zalo-chat-widget

This Vue2 plugin injects a Zalo OA chat widget chat instance into all of your vue instances

Install

1# Npm
2npm install @rovahub/vue-zalo-chat-widget --save
3
4# Yarn
5yarn add @rovahub/vue-zalo-chat-widget

Quickstart

Vue 2

Import the @rovahub/vue-zalo-chat-widget in your main JavaScript file in src/ folder. The Zalo OA ID will be found on your Zalo Dashboard.

1# src/main.js
2
3// main.js
4
5import Vue from "vue";
6import App from "./App.vue";
7import ZaloChatWidgetPlugin from "@rovahub/vue-zalo-chat-widget";
8
9Vue.config.productionTip = false;
10
11Vue.use(ZaloChatWidgetPlugin, {
12  oaid: "zalo_oa_id"
13});
14
15new Vue({
16  render: h => h(App)
17}).$mount("#app");
18

Nuxt JS

Create JS file in /plugins/ folder and add content to the plugin file.

1# plugins/zalo-widget.js
2
3import Vue from 'vue';
4import ZaloChatWidgetPlugin from "@rovahub/vue-zalo-chat-widget";
5
6Vue.use(ZaloChatWidgetPlugin, {
7  oaid: "zalo_oa_id"
8});

In your nuxt.config.js file, add the plugin to the plugins array:

1# nuxt.config.js
2
3module.exports = {
4  // ...
5  plugins: [
6    { src: "~/plugins/zalo-widget.js", mode: "client" }
7  ],
8  // ...
9}

Options

You can provide additional options to customize the Zalo Chat Widget:

1Vue.use(ZaloChatWidgetPlugin, {
2  oaid: "zalo_oa_id",
3  welcomeMessage: "Rất vui khi được hỗ trợ bạn!",
4  autopopup: "0",
5  width: "300",
6  height: "300"
7});