Using tawk.to with Nuxt/Vue Application

Question

Does anyone know how to use tawk.to in a Nuxt application?

I created a file "tawk.js" on my plugin folder with the following code:

var Tawk_API = Tawk_API || {},
  Tawk_LoadStart = new Date()
  (function () {
    var s1 = document.createElement('script')
    s0 = document.getElementsByTagName('script')[0]
    s1.async = true
    s1.src = 'https://embed.tawk.to/[my_ID_HERE]/default'
    s1.charset = 'UTF-8'
    s1.setAttribute('crossorigin', '*')
    s0.parentNode.insertBefore(s1, s0)
  })()

And I put it on nuxt.config.js as well:

  plugins: [
    { src: '~/plugins/tawk.js', ssr: false }
  ]

It didn't work. It does show some compiled errors:

1:1   error  Split initialized 'var' declarations into multiple statements
1:5   error  Identifier 'Tawk_API' is not in camel case
1:16  error  Identifier 'Tawk_API' is not in camel case
1:16  error  'Tawk_API' was used before it was defined
2:3   error  Identifier 'Tawk_LoadStart' is not in camel case
2:3   error  'Tawk_LoadStart' is assigned a value but never used
2:29  error  Unexpected space between function name and paren
3:3   error  Unexpected newline between function and ( of function call
5:5   error  's0' is not defined
10:5   error  's0' is not defined
10:36  error  's0' is not defined

All errors, except the last three, come from your linter settings (I guess eslint?). Read them carefully and you should be able to fix them. The `'s0' is not defined` error suggests, that `document.getElementsByTagName('script')[0]` didnt find the `script` tag it was looking for and you might want to use another element (which actually exists) as parent element. — r0skar, Aug 02 '18 at 08:36
Thanks Oskar. I could fix the eslint errors with `/* eslint-disable */` but I couldn't figure out how to deal with the 's0' error as the "script" ID might be on their chat widget. — Fabio Zanchi, Aug 03 '18 at 00:42
The `s0` error happens, because your code tries to find an existing `script` tag to use as insertion point for the Tawk script, but it doesnt find one. You can try to append the script to the document body directly like so: Remove `s0 = document.getElementsByTagName('script')[0]` and replace `s0.parentNode.insertBefore(s1, s0)` with `document.body.appendChild(s1);`. — r0skar, Aug 03 '18 at 08:40

score 8 · Answer 1 · edited Dec 23 '21 at 14:00

The best way to integrate tawk.to in nuxt project is to go to nuxt.config.js and add it as a script tag.

// nuxt.config.js
export default {
    // ...
    head: {
        // ...
        script: [
            // ...
            {
                hid: 'tawk.to',
                src:
                    'https://embed.tawk.to/5edf699a9e5f694422903412/default',
                defer: true
            }
        ]
    },
},

score 5 · Accepted Answer · edited May 29 '20 at 20:37

5

You could try to use a vue wrapper for tawk. vue-tawk

import Tawk from 'vue-tawk'

Vue.use(Tawk, {
    tawkSrc: 'https://embed.tawk.to/5d5528ee2xxxxxxxxxxxx/default'
})

edited May 29 '20 at 20:37

Adarsh Madrecha

6,364
11
69
117

answered Aug 02 '18 at 22:46

Aldarund

17,312
5
73
104

1

did this work for you ? I tried it in my nuxt website and chat widget is not loading. there is not error in console. – Annette Mar 02 '20 at 02:11
it worked for me, but is there any way to stop tawk from loading on some routes? – saibbyweb Sep 08 '20 at 18:12
3

created() { window.Tawk_API.onLoad = function () { window.Tawk_API.hideWidget(); }; }, Use this to stop tawk from loading on some components – Srijan Katuwal Jan 31 '21 at 08:53

score 1 · Answer 3 · edited Jun 23 '22 at 14:25

1

This may be late, but for future people who wanted to use tawk in Vue/Nuxt. You can use different version for Vue2/Nuxt2 and Vue3/Nuxt3

edited Jun 23 '22 at 14:25

Lee Taylor

7,761
16
33
49

answered Jun 23 '22 at 03:48

Jao

21
3

Using tawk.to with Nuxt/Vue Application

3 Answers3