README.md

@rovahub/vue-zalo-chat-widget

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

Install

# Npm
npm install @rovahub/vue-zalo-chat-widget --save

# Yarn
yarn 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.

# src/main.js

// main.js

import Vue from "vue";
import App from "./App.vue";
import ZaloChatWidgetPlugin from "@rovahub/vue-zalo-chat-widget";

Vue.config.productionTip = false;

Vue.use(ZaloChatWidgetPlugin, {
  oaid: "zalo_oa_id"
});

new Vue({
  render: h => h(App)
}).$mount("#app");

Nuxt JS

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

# plugins/zalo-widget.js

import Vue from 'vue';
import ZaloChatWidgetPlugin from "@rovahub/vue-zalo-chat-widget";

Vue.use(ZaloChatWidgetPlugin, {
  oaid: "zalo_oa_id"
});

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

# nuxt.config.js

module.exports = {
  // ...
  plugins: [
    { src: "~/plugins/zalo-widget.js", mode: "client" }
  ],
  // ...
}

Options

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

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