Vue Adapter
This library lets you easily add chat widget functionality to your Vue application, whether you have an account on livechat.com or text.com. This package supports both LiveChat and Text widgets.
Installation
Using npm
VUE ADAPTER USING NPMnpm install @livechat/widget-vue
Using a script tag
VUE ADAPTER USING SCRIPT TAG<script src="http://unpkg.com/@livechat/widget-core@1.4.0"></script>
<script src="https://unpkg.com/@livechat/widget-vue@1.4.0"></script>
Usage
1. LiveChat Widget (for organizations using LiveChat)
If you have an account on livechat.com, use the LiveChatWidget component and provide your license number:
RENDER LIVECHAT WIDGET<script lang="ts" setup>
import { LiveChatWidget, EventHandlerPayload } from "@livechat/widget-vue"
function handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
console.log("LiveChatWidget.onNewEvent", event)
}
</script>
<template>
<LiveChatWidget
license="12345678"
visibility="maximized"
v-on:new-event="handleNewEvent"
/>
</template>
2. Text Widget (for organizations using Text)
If you have an account on text.com, use the TextWidget component and provide your organizationId:
RENDER TEXT WIDGET<script lang="ts" setup>
import { TextWidget, EventHandlerPayload } from "@livechat/widget-vue"
function handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
console.log("TextWidget.onNewEvent", event)
}
</script>
<template>
<TextWidget
organizationId="614fe72f-3319-43c6-9ae6-c410c65df230"
visibility="maximized"
v-on:new-event="handleNewEvent"
/>
</template>
Props
Config data
All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.
| Prop | Type |
|---|---|
| license | organizationId | string (required) |
| group | string |
| customerName | string |
| customerEmail | string |
| chatBetweenGroups | boolean |
| sessionVariables | Record<string, string> |
| visibility | 'maximized' | 'minimized' | 'hidden' |
Event handlers
All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.
- onReady
- onAvailabilityChanged
- onVisibilityChanged
- onCustomerStatusChanged
- onNewEvent
- onFormSubmitted
- onRatingSubmitted
- onGreetingDisplayed
- onGreetingHidden
- onRichMessageButtonClicked
Composition API
This package exports a set of Vue Composition API utilities that allow for consuming reactive data from the chat widget in any place of the application as long as the LiveChatWidget or TextWidget component is rendered in the tree.
useWidgetState
Access the current chat widget availability or visibility state if the chat widget is loaded.
USE WIDGET STATE<script setup>
import { useWidgetState } from "@livechat/widget-vue";
const widgetState = useWidgetState();
</script>
<template>
<div v-if="widgetState">
<span>{{widgetState.availability}}</span>
<span>{{widgetState.visibility}}</span>
</div>
</template>
useWidgetIsReady
Check if the chat widget is ready using the boolean flag isWidgetReady.
USE WIDGET IS READY<script setup>
import { useWidgetIsReady } from "@livechat/widget-vue";
const isWidgetReady = useWidgetIsReady();
</script>
<template>
<div>
<span>Chat Widget is</span>
<span v-if="isWidgetReady">loaded</span>
<span v-else>loading...</span>
</div>
</template>
useWidgetChatData
Access the chatId and threadId of the chat if there's one currently available.
USE WIDGET CHAT DATA<script setup>
import { useWidgetChatData } from "@livechat/widget-vue";
const chatData = useWidgetChatData();
</script>
<template>
<div v-if="chatData">
<span>{{chatData.chatId}}</span>
<span>{{chatData.threadId}}</span>
</div>
</template>
useWidgetGreeting
Access the current greeting id and uniqueId if one is currently displayed (received and not hidden).
USE WIDGET GREETING<script setup>
import { useWidgetGreeting } from "@livechat/widget-vue";
const greeting = useWidgetGreeting();
</script>
<template>
<div v-if="greeting">
<span>{{greeting.id}}</span>
<span>{{greeting.uniqueId}}</span>
</div>
</template>
useWidgetCustomerData
Access the id, isReturning, status, and sessionVariables of the current customer if the chat widget is loaded.
USE WIDGET CUSTOMER DATA<script setup>
import { useWidgetCustomerData } from "@livechat/widget-vue";
const customerData = useWidgetCustomerData();
</script>
<template>
<div v-if="customerData">
<span>{{customerData.id}}</span>
<span>{{customerData.isReturning}}</span>
<span>{{customerData.status}}</span>
<ul>
<li v-for="variable in customerData.sessionVariables">{{variable}}</li>
</ul>
</div>
</template>