Essentials

Setters

Identify visitors, set custom attributes, track events, manage tags, and switch widgets using useTawk() setters.

Setters let you push data into Tawk.to: identify the logged-in user, attach custom metadata, track events, and more.

Identify a Visitor

Use visitor() to set the visitor's display name, email, and security hash for Tawk.to Secure Mode.

app.vue

<script setup lang="ts">
const { visitor } = useTawk()
const user = useUser() // your auth composable

// Runs whenever user changes (login/logout)
watchEffect(() => {
  if (user.value) {
    visitor({
      name: user.value.name,
      email: user.value.email,
      hash: user.value.tawkHash // HMAC-SHA256 from your backend
    })
  }
})
</script>

Field	Type	Description
`name`	`string`	Display name shown to agents.
`email`	`string`	Visitor's email address.
`hash`	`string`	HMAC-SHA256 hash for Secure Mode.

Set Custom Attributes

Pass arbitrary key-value pairs to associate with the visitor. These appear in the Tawk.to dashboard.

const { setAttributes } = useTawk()

setAttributes({
  plan: 'Pro',
  accountId: 'acc_123',
  company: 'Acme Corp'
}, (err) => {
  if (err) console.error('Error setting attributes:', err)
})

Track Custom Events

Log named events with optional metadata for analytics or support context.

const { addEvent } = useTawk()

addEvent('purchase', { plan: 'Pro Plan', value: 49 }, (err) => {
  if (err) console.error(err)
})

Manage Tags

Add or remove tags on the current conversation to help agents categorize chats.

const { addTags, removeTags } = useTawk()

// Add tags
addTags(['vip', 'trial'], (err) => {
  if (err) console.error(err)
})

// Remove tags
removeTags(['trial'], (err) => {
  if (err) console.error(err)
})

Switch Widget

Switch to a different Tawk.to property/widget at runtime — useful for multi-tenant or multi-brand apps.

const { switchWidget } = useTawk()

switchWidget(
  { propertyId: 'new-property-id', widgetId: 'new-widget-id' },
  () => console.log('Widget switched!')
)

Complete Setter Reference

Method	Signature	Description
`visitor`	`(data: TawkVisitor) => void`	Set visitor name, email, and hash.
`setAttributes`	`(attrs: Record<string, string>, cb?) => void`	Set custom visitor attributes.
`addEvent`	`(event: string, meta?, cb?) => void`	Track a custom event.
`addTags`	`(tags: string[], cb?) => void`	Add tags to the conversation.
`removeTags`	`(tags: string[], cb?) => void`	Remove tags from the conversation.
`switchWidget`	`(data: TawkSwitchWidgetData, cb?) => void`	Switch to a different widget.

Event Listeners

Subscribe to any Tawk.to event in Nuxt using useTawk(). Every listener returns a cleanup function to avoid memory leaks.

TypeScript

nuxt-tawk-to v2 ships with complete TypeScript definitions. Import all types from the nuxt-tawk-to/types subpath.