Zendesk Vue3 port

Main.js

import { createApp } from "vue"
import Zendesk from "./Zendesk.js";

const app = createApp(MyApp);

app.use(Zendesk, {
    key: "{key}",
    disabled: false,
    hideOnLoad: false,
    settings: {
        webWidget: {
            color: {
                theme: "#f0f",
                launcherText: '#fff'
            },
            position: {
                horizontal: 'left',
                vertical: 'bottom'
            }
        }
    }});

Zendesk.js

import emitter from 'tiny-emitter/instance'

export default {
    install: (app, options = {}) => {
        if (!options.disabled && (!options.key || options.key.length === 0)) {
            console.warn("Please enter a Zendesk Web Widget Key");
        }

        const disabledLogger = function(method, ...args) {
            console.log("Zendesk is disabled, you called:", { method, args });
        };

        if (options.disabled) {
            window.zE = disabledLogger;
        }

        window.zESettings = options.settings;

        const root = {};

        root.$on = (...args) => emitter.on(...args);
        root.$once = (...args) => emitter.once(...args);
        root.$off = (...args) => emitter.off(...args);
        root.$emit = (...args) => emitter.emit(...args);

        let isLoaded = false;

        root.isLoaded = () => isLoaded;
        root.load = zendeskKey => {
            if (isLoaded) {
                return;
            }

            const script = document.createElement("script");
            script.type = "text/javascript";
            script.async = true;
            script.id = "ze-snippet";
            const actualZendeskKey = zendeskKey || options.key;
            script.src =
                "https://static.zdassets.com/ekr/snippet.js?key=" + actualZendeskKey;

            if (options.nonce) {
                script.setAttribute('nonce', options.nonce)
            }

            delete window.zE;
            const first = document.getElementsByTagName("script")[0];
            first.parentNode.insertBefore(script, first);

            script.onload = event => {
                isLoaded = true;

                if (options.hideOnLoad) {
                    root.hide();
                }

                root.$emit("loaded", event);

                window.zE("webWidget:on", "open", () => {
                    root.$emit("open");
                });

                window.zE("webWidget:on", "close", () => {
                    root.$emit("close");
                });
            };
        };

        if (!options.disabled) {
            root.load(options.key);
        }

        root.hide = () => window.zE("webWidget", "hide");
        root.show = () => window.zE("webWidget", "show");
        root.logout = () => window.zE("webWidget", "logout");
        root.identify = user => window.zE("webWidget", "identify", user);
        root.prefill = user => window.zE("webWidget", "prefill", user);
        root.setLocale = locale => window.zE("webWidget", "setLocale", locale);
        root.updateSettings = settings => window.zE("webWidget", "updateSettings", settings);
        root.clear = () => window.zE("webWidget", "clear");
        root.updatePath = options => window.zE("updatePath", "clear", options);
        root.toggle = () => window.zE("webWidget", "toggle");
        root.reset = () => window.zE("webWidget", "reset");
        root.close = () => window.zE("webWidget", "close");
        root.open = () => window.zE("webWidget", "open");

        Object.defineProperty(root, "zE", {
            get: function get() {
                return window.zE;
            }
        });

        app.config.globalProperties.$zendesk = root;
    }
};

Wonderful, but if I use your code it gives me a 400 error when loading the script... can you think of why that could be?

error 400 GET https://ekr.zdassets.com/compose/2q4BRXdlGCRs7tYOhYJgkvovwYbiOMbF 400

If i change src by 'https://v2.zopim.com/?'+actualZendeskKey, the error changes:

Key is missing from snippet

If i change src by 'https://v2.zopim.com/?'+actualZendeskKey, the error changes:

Key is missing from snippet

Did you add your own key in Main.js? You should not change anything in Zendesk.js.

If i change src by 'https://v2.zopim.com/?'+actualZendeskKey, the error changes:
Key is missing from snippet

Did you add your own key in Main.js? You should not change anything in Zendesk.js.

I create it in a plugin

`import Zendesk from "@/lib/zendesk.js"

export default defineNuxtPlugin(async (nuxtApp) => {
nuxtApp.vueApp.use(Zendesk, {
key: useRuntimeConfig().public.zendeskKey,
disabled: false,
hideOnLoad: true,
settings: {
webWidget: {
color: {
theme: "#f0f",
launcherText: '#fff'
},
position: {
horizontal: 'left',
vertical: 'bottom'
}
}
}
});
})`

Here the key is right!

sorry, I haven't put you in context, I'm using it in nuxt 3

https://stackblitz.com/edit/nuxt-starter-t3wwc5 Here you are a reproduction. Its the same error that i have

https://stackblitz.com/edit/nuxt-starter-t3wwc5 Here you are a reproduction. Its the same error that i have

I did not test it in nuxt, but it should work anyway. I can see you are adding the component as < Zendesk >. You have to use it like this https://github.com/dansmaculotte/vue-zendesk like this.$zendesk.show()

But the error is not that the box is not displayed, but that there is a script that gives me a 400 error.

do you have any idea why?

Anyway I'm going to try to refactor the code to better adapt it to Nuxt 3

https://stackblitz.com/edit/nuxt-starter-t3wwc5?file=lib%2Fzendesk.js

with this code it no longer returns an error
I think now I can implement what you tell me about this.$zendesk.show()

Hi @agracia-foticos ,

I tried to implement your fixes : https://stackblitz.com/edit/nuxt-starter-t3wwc5?file=lib%2Fzendesk.js

noticed that I had the same issue

My script src is https://static.zdassets.com/ekr/snippet.js?key=xxxxx

Buttt when i see the result from network tab, the javascript is loaded actually

Yet no widget being shown too.

I have managed to get it working in nuxt 3, however I can't show and hide the plugin dynamically, it always appears and I can't hide it at will

https://stackblitz.com/edit/nuxt-starter-t3wwc5

@agracia-foticos , i managed to get it run ! it was i modified the code a little bit.

const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.id = 'ze-snippet';
script.src = options.src; --> from plugin (i am referring the snippet url -> static.zdaassets)

  if (options.nonce) {
    script.setAttribute('nonce', options.nonce);
  }

with this code it throws me an error

const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.id = 'ze-snippet' script.src = options.src const actualZendeskKey = zendeskKey || options.key; script.src = 'https://static.zdassets.com/ekr/snippet.js?key='+actualZendeskKey;

the only way that works for me is like this

` const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = options.src
const actualZendeskKey = zendeskKey || options.key;

  script.src = '//v2.zopim.com/?' + actualZendeskKey;

  if (options.nonce) {
    script.setAttribute('nonce', options.nonce);
  }`

Hi @agracia-foticos ,

I tried to implement your fixes : https://stackblitz.com/edit/nuxt-starter-t3wwc5?file=lib%2Fzendesk.js

noticed that I had the same issue

My script src is https://static.zdassets.com/ekr/snippet.js?key=xxxxx

Buttt when i see the result from network tab, the javascript is loaded actually

Yet no widget being shown too.

Did you change the config setting
hideOnLoad: true,

I will edit the original post to false instead.

Hi @agracia-foticos ,
I tried to implement your fixes : https://stackblitz.com/edit/nuxt-starter-t3wwc5?file=lib%2Fzendesk.js
noticed that I had the same issue

My script src is https://static.zdassets.com/ekr/snippet.js?key=xxxxx
Buttt when i see the result from network tab, the javascript is loaded actually

Yet no widget being shown too.

Did you change the config setting hideOnLoad: true,

I will edit the original post to false instead.

Hello,
Yes i set to hideonLoad = false
The problem was on the script.src and the script.id
I intend to use the https://static.zdassets.com/ekr/snippet.js
and this is the way i solved it :

script.id = 'ze-snippet'
script.src = https://static.zdassets.com/ekr/snippet.js?key='XXXXXXXXXXXXXX'