Webchat widget v1 2 Angular8 project

wchavez · March 2, 2020, 10:29pm

Good afternoon forum:

I am developing a custom Angular8 App in order to migrate a webchat widget deployment I was developed in Vainilla.js.
But I have an issue, I am trying to load the ININ library that usually get loaded using a .

I tried to ddownload it into the assets folder and them I tried to made an import of ININ library but it did not work:
import {ININ} from '../../../assets/external-purecloud/jsapi-v1.js';
And also I tried to load in the app-component and in the chat-angular-component as a script tag but it can not be interpretated from any of those components or any service.

How can we use it in my Angular8 project in order to create the webchat using this sintaxis?: ININ.webchat.create(this.chatConfig).then((webchat) => { ... }.

I appreciate your help and suggestions.
Thank you.

wchavez · March 3, 2020, 2:20pm

Good morning:

I put the script tag in the index.html and then in the app service I made a function in order to the ININ library be returned to the chat component that use this service:

getININ(): any{

// tslint:disable-next-line:no-string-literal

const ininLibrary: any=window['ININ'];

return ininLibrary;

}

And then I can get this lib accessed via the chat component.
Thank you.

tim.smith · March 3, 2020, 4:29pm

Glad you got it working! The link below is how we did it in the dev tools (ember). The jsapi script is loaded dynamically and the chat is started in response to the load event. Note that there's both v1 and v2 chat stuff going on in that file.

github.com

MyPureCloud/developer-tools/blob/master/app/controllers/webchat.js#L535




			let storage = this.get('storageService');
			storage.localStorageSet('webChatParams', savedData);
		} catch (err) {
			this.setError('Error saving chat config data');
			console.log(err);
		}
	},
	actions: {
		startChat() {
			try {
				this.setError();


				// Validation
				let chatConfig = JSON.parse(this.get('chatConfig'));
				if (!chatConfig.queueName || chatConfig.queueName == '') throw new Error('You must select a queue before starting the chat');
				if (!this.deployment || this.deployment == '') throw new Error('You must select a deployment before starting the chat');


				const chatScript = document.getElementById('purecloud-webchat-js');


				// Skip injecting script tag if it's already been injected.

wchavez · March 3, 2020, 4:48pm

Thank you Tim for share this dynamic-loaded approach.

system · April 3, 2020, 4:48pm

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.