vue-jivosite

vue-jivosite

What is vue-jivosite

vue-jivosite is a Vue plugin for online chat JivoChat that will allow you to add several missing features, in my opinion, on the front end.

It supports both Vue 2 and Vue 3.

Usage

1. Install the package

$ npm i vue-jivosite

2. Use the plugin

import VueJivosite from 'vue-jivosite'

Vue.use(VueJivosite, { widgetId: 'fbas23URmI' })

//Instead of fbas23URmI, insert your Id

API

Example of using all values

import VueJivosite from 'vue-jivosite'

Vue.use(VueJivosite, {
	widgetId: 'fbas23URmI',
	scriptUrl: '//code.jivo.ru/widget/fbas23URmI',
	initialView: true,
	onInit()
	{
		console.log('Success!')
	},
	onFail(error)
	{
		console.log('Failed', error)
	}
})

And if we set initialView to false, then how can we show or hide JivoChat? Very simple, just use this.$hideJivo() function to hide the chat and this.$showJivo() to show it.

<template>
	Vue jivochat
	<button @click="$showJivo">Show jivochat</button>
	<button @click="$hideJivo">Hide jivochat</button>
<template>

They can also be used simply in js code:

<template>
	Vue jivochat
</template>
<script>
    export default {
        methods: {
            openJivoChat()
            {
                this.$showJivo();
            },
            hideJivoChat()
            {
                this.$hideJivo();
            }
        }
    }
</script>