Integrating WebChat into an Angular Web App

[afritzler]

Hi,

I am trying to integrate the WebChat interface into an existing Angular based web app.

What I did so far is, adding the script tag to the HTML body

<script
  src="YOUR_WEBCHAT_URL"
  ...
></script>

A div is being created at the end of the body

<div id="cai-webchat-div"></div>

However it is empty and hence no chat interface/button is showing up.

Any idea what I am missing here?

Regards, Andreas

[ya332]

Can you defer the loading of the webchat script and see if it helps? You can do so by adding defer keyword after the script. Also, please make sure that the script is actually in the DOM. You can do so by inspecting the dev console in Chrome for instance if you are using the chrome.

[afritzler]

Thanks @ya332 for your hint! I tried the defer attribute at the end of the script tag - didn't help though. The script tag is in the DOM. However it seems that the WebChat ist not being instantiated. Do you have an example how to create a webchat instance via Javascript directly?

[ya332]

I haven't worked with Angular apps. I used the script tag inside my UI5 app, and it is the same thing except I had to use defer because UI5 hijacks index.html and adds its views, so my webchat component was disappearing. Sorry, I haven't helped that much. Anyone knows this?

[afritzler]

Alright I figured out now how to do that. The main problem was that you can't load a <script> tag dynamically in HTML5. I would like to add to your docs in case somebody else runs into the same problem. What is the best place to put that?

[afritzler]

Here is the ref in the HTML5 spec[0] stating:

Note: script elements inserted using innerHTML do not execute when they are inserted.

[0 ]https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0