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

| name | type | default | describe | | ------------ | :-----: |:-----------------------------:|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | widgetId | String | '' | id of your widget, can be found in the link when connecting the script (</script src="//code.jivo.ru/widget/fbas23URmI" async></script/>, fbas23URmI - your id)
| scriptUrl | String | '' | full link in your script (Optional field if you specified widgetId, </script src="//code.jivo.ru/widget/fbas23URmI" async></script/>, "//code.jivo.ru/widget/fbas23URmI" - your link) | | onInit | Function | null | handler for success loading can be added | | onFail | Function | null | handler for failed loading can be added (if onFail handler is not provided, failed initialization throws exception, because of unhandled promise rejection) | | initialView | Boolean | true | a value indicating whether to show chat at all initially or not |

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>