Essentials
API Usage
Control the widget programmatically using injected functions.
The module exposes the official Tawk.to JavaScript API methods to your Nuxt application using Vue's provide/inject mechanism.
You can access these methods in any component to control the widget or set visitor information.
Controlling the Widget
You can open, close, or toggle the widget window using the injected functions.
components/ChatControl.vue
<script setup lang="ts">
import { inject } from 'vue'
// Inject the functions provided by the module
const toggle = inject<() => void>('toggle')
const maximize = inject<() => void>('maximize')
const minimize = inject<() => void>('minimize')
const handleChat = () => {
if (toggle) {
toggle()
}
}
</script>
<template>
<UButton icon="i-lucide-message-circle" @click="handleChat">
Chat with us
</UButton>
</template>
Identifying Visitors
If your application has user authentication, you can identify the logged-in user to Tawk.to agents. This allows you to see the user's name and email in your dashboard.
app.vue
<script setup lang="ts">
import { inject, onMounted } from 'vue'
const setAttributes = inject<(attrs: object, cb?: () => void) => void>('setAttributes')
onMounted(() => {
// Example: Identify the user after login
if (setAttributes) {
setAttributes({
name: 'John Doe',
email: 'john@example.com',
hash: 'user-hash-for-secure-mode' // Optional
}, () => {
console.log('User identified successfully')
})
}
})
</script>
Available Methods
Here are some of the most commonly used methods available via inject:
| Injection Key | Description |
|---|---|
maximize | Opens the chat widget. |
minimize | Minimizes the chat widget. |
toggle | Toggles the widget open or closed. |
hideWidget | Completely hides the widget bubble. |
setAttributes | Sets the visitor's name, email, and attributes. |
addTags | Adds tags to the current visitor. |
endChat | Ends the current chat session. |
For the complete list of available methods and detailed documentation, please refer to the Official Tawk.to JavaScript API.