Use jQuery variable in Typescript for Zopim

Question

I'm using Angular 4 and Zopim. In the index.html the Zopim is loaded - works great. If I load the page I can in the Chrome console write

$zopim.livechat.getName()

and then get the name of the current user. However, I would like to set the name in the Typescript file.

My problem here is that I don't understand how I can execute the jQuery in Typescript without installing any npm jQuery stuff. I've read other posts like: Can TypeScript interact with jQuery without a definition file? which suggests to use

declare var $;

I've tried this but get the error that $zopim is not defined.

Is it possible, and if yes - how can I set the name in Zopim from Typescript? Zopim API documentation:

$zopim(function() {
 $zopim.livechat.setName('Logged in name');
 $zopim.livechat.setEmail('[email protected]');
});

Thanks!

David · Accepted Answer · 2018-02-06 14:57:27Z

1

$ is an alias for jQuery, so by declaring $ you can use jquery functions $('test'), $.fn. ...

Here it looks like you need to define $zopim

declare var $zopim : any;


onInit()
{
$zopim(function() {
 $zopim.livechat.setName('Logged in name');
 $zopim.livechat.setEmail('[email protected]');
});
}

edited Feb 6, 2018 at 14:57

answered Feb 6, 2018 at 14:25

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mr3k Over a year ago

Thanks for the answer! When I do this and then add $zopim.livechat.getName(); in ngOnInit - I get this error: "ERROR TypeError: Cannot read property 'getName' of undefined"

mr3k Over a year ago

Hm, strange. If I do this: this.liveChat = $zopim.livechat; it works great. But I still can't call this.liveChat.getName() or this.liveChat.setName() - then I get this "undefined"

David Over a year ago

Maybe the chat is not initialised at this point. It's hard to tell as I don't know zopim. Did you make sure to use it in the $zopim function? See post edit

mr3k Over a year ago

This works great. I skipped the "$zopim(function()" .. Thanks! :)

santosh singh · Accepted Answer · 2018-02-06 14:25:45Z

0

Run npm install jquery --save Add js/css files in scripts or styles of angular-cli.json like

"scripts": ["../node_modules/path to file", "./assets/path to file"]

For library supported @types/, just run npm install @types/jquery --save-dev

To use the library, add declare var jQuery: any; declare var $zopim : any;before annotation @Directive or @Component want to use the lib

answered Feb 6, 2018 at 14:25

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

3 Comments

mr3k Over a year ago

I would like to achieve this without installing jquery

santosh singh Over a year ago

If you don't want to install then Add jquery in head section

mr3k Over a year ago

As described, I load it in the head section in index.html but having issues to access it in TypeScript.

Collectives™ on Stack Overflow

Use jQuery variable in Typescript for Zopim

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related