29

Integrations

Last Update منذ ٩ أيام

Vue 3 Ember.js Make: Add a row to a Google Sheet when a new ticket is created Zapier integration: Add a new row to a Google Sheet when a new ticket is created AI Assist: 24/7 sales and customer service made easy

Vue 3

The instructions below are for desktops and laptops only.

The tawk.to plugin for Vue 3 lets you easily integrate and customize the chat widget in your Vue application. It works with Nuxt.js, and all tawk.to API methods are fully supported. See our API documentation for a full list of methods.
Installing the Vue 3 Plugin
1. Download the plugin from npm.

2. Install the dependency using your preferred package manager:

3. Import the plugin in your main JavaScript file (in the src/ folder) and configure it with your widgetId and propertyId. You can find these IDs in your tawk.to dashboard: Go to Administration > Channels > Chat Widget. Learn more here: Where can I find the property and widget IDs?

Using the Plugin with Nuxt.js

1. Create a file named tawk-messenger.client.js in your plugins/ directory.

2. Add the plugin code.

3. Access API functions in your components via $tawkMessenger.

Instance property

The plugin exposes an instance property called $tawkMessenger. You can use it to access the full set of API functions in your Vue components.


Example:

Event handling

You can listen for events emitted by the widget using the plugin. The event names must match the widget's event names exactly. For a full list of events, see our API documentation.


Example:

Troubleshooting common issues

Error: PropertyId not specified

  • Ensure both propertyId and widgetId are set correctly.

  • IDs must match exactly.

  • Confirm the IDs are strings.

  • Check that the I in propertyId and widgetId is capitalized.

Error: TypeError: window.Tawk_API.[function] is not a function

  • This usually happens when an API function is called before the widget loads.

  • Wrap calls in this.$tawkMessenger.onLoaded() to ensure the widget is ready before the function is called.

Additional considerations

  • Always confirm the propertyId and widgetId are correct for your specific property and widget.

  • If using Nuxt.js, ensure the plugin file is suffixed with .client.js to avoid server-side rendering errors.

  • Check the plugin version on npm regularly for updates and bug fixes.

Related guides

Where can I find the property and widget IDs?

API documentation

Other supported frameworks

Vue 2.js

React.js

Angular.js

Ember.js

If you have feedback about this article, or if you need more help:

Was this article helpful?

55 out of 73 liked this article

Still need help? Message Us