1.0.1 • Published 1 year ago
vue-jivosite v1.0.1
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
- Install the package
$ npm i vue-jivosite- Use the plugin
import VueJivosite from 'vue-jivosite'
Vue.use(VueJivosite, { widgetId: 'fbas23URmI' })
//Instead of fbas23URmI, insert your IdAPI
| 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>