Send response card to chatbot UI with CustomEvent

[wcheek]

I have the chatbot running through an iframe that I've loaded from the CloudFormation deployment. I'm exploring ways to pass data between the chatbot and the parent page.

I want to ultimately send an image to the chatbot by triggering an event on the parent page.

I've found from this API documentation that I can send text to the chatbot using the following code snippet, using the postText API method:

 var event = new CustomEvent(
  "lexWebUiMessage",
  // chatbot ui has a handler for the toggleMinimizeUi event
  { detail: { message: { event: "postText", message: "test message" } } }
);
// this event is relayed to the iframe using postMessage
document.dispatchEvent(event);

You talk a bit about response cards being supported natively with the postText API method, but I'm confused about what you mean. Is there another parameter I can pass into the event?

Here, talking about the loader API, the loader.api.postText method has different parameters than the method I'm using above, but it looks like this one is capable of sending response cards. Are these different methods, or are they just documented differently?

Note that using the loader is not suitable for my use case, since after the ChatbotUI gets loaded, it's out of scope. If I can somehow access this object outside the initial loading script, then it may work for me.

[bobpskier]

@wcheek The best api to use is the one you refer to called the loader API. There are several methods you can call on this api. postText() is one of them. You can also toggle the minimized/maximized state using toggleMinimizeUi(). You can also set session attributes.

The main page should load the iframe via the loader using a Githubissues.

Githubissues is a development platform for aggregating issues.