How to use and control IBM carbon components inside Watson Assistant web chat?

Question

Currently, I am working on a chatbot using Watson assistant, and I want to ask how I can use the IBM carbon components inside the chatbot interface by using it in the dialog responses and have control over them, and also how I can make a connection between a user iframe inside the chatbot so that I can get a specific action on the dialog flow when the user interacts with the embedded iframe.

Answer 1

You can use user_defined responses (https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-render#user_defined_responses) to display Carbon components. You don't need to include the carbon CSS (web chat already includes it) just the right class names on the HTML. There is an example of doing this using React at https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-react-portals.

For two way communication between an iframe and web chat you will also need to use a user_defined response and make use of https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage. This will only work with iFrame content you control. If the iFrame is controlled by a third party, you will have to make use of any APIs they provide.