We have a requirement to load a JS widget from a UCaaS provider on our Angular website to provide chat features. The snippet the provided was
<script>
var webchat;
((window, document, node, props, configs) => {
if (window.ChatSDK) {
console.error("SDK already included");
return;
}
var divContainer = document.createElement("div");
divContainer.id = node;
document.body.appendChild(divContainer);
var src = <https://chatsdk.ucass.com/chatsdk.js;>
var script = document.createElement("script");
var firstScriptTag = document.getElementsByTagName("script")[0];
script.type = "text/javascript";
script.charset = "UTF-8";
script.id = "webchatscript";
script.src = src;
script.async = true;
firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
script.onload = () => {
webchat = ChatSDK(node, props);
webchat.init(configs);
};
})(
window,
document,
"Webchat",
{ flowId: "123", accountId: "", region: "td-us-1" },
{ enableEmoji: true, enableUserInput: true }
);
</script>
so putting this into the src of a script tag obviously doesn’t work because its a function so the was that whole block of code and that would not work so what I have now is trying to recreate it
let webchat;
let ChatSDK: any;
let script = this.render.createElement('script');
script.src = 'https://chatsdk.ucaas.com/chatsdk.js';
script.type = 'text/javascript';
script.charset = 'UTF-8';
script.id = 'webchatscript';
script.async = true;
script.onload = () => {
(function blah() {
webchat = ChatSDK('Webchat', {
flowId: '123',
accountId: '',
region: 'us-1',
});
webchat.init({ enableEmoji: true, enableUserInput: true });
})();
console.log(ChatSDK); //undefined
};
this.render.appendChild(this._document.body, script);
I am able to confirm the script tag is in the body, I am seeing the js bundles get downloaded from the providers CDN and everything looks fine just the SDK is not found and thus not initialized – could someone help me understand what I am doing wrong
