search

aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
744 stars 471 forks source link

Unable to use the lex-web-ui as an Iframe #168

Closed abhilashdonepudi closed 8 months ago

abhilashdonepudi commented 5 years ago

We hosted lex-web.ui on a separate website. We are trying to access the same website as Embedded with the following URL, and we are getting an error.

lex-web-ui-deployedsite/index.html#/?lexWebUiEmbed=true

postMessage not sent over MessageChannel MessageEvent

Does anyone have a working example of IFrame? Do you know what the above error means?

bobpskier commented 5 years ago

Sorry for the delayed response. One item to verify is that CORS is properly configured for the additional website. The lex-web-ui CF template accepts a parameter titled WebAppParentOrigin. This origin is then configured on the S3 bucket that hosts the application as well as in the lex-web-ui-loader-config.json configuration file. The origin is then confirmed when the lex-web-ui is accessed at the S3 level and then again in javascript code when the iframe is loaded. Both checks have to pass in order for the lex-web-ui to be served up correctly. An example of the iframe based approach can be presently seen at:

https://qnabotworkshop-website-s3bucket-d4khfvto6j5j.s3.amazonaws.com/index.html

You can also look at the general steps used to deploy onto an existing website at step 3 from:

https://github.com/aws-samples/aws-ai-qna-bot/blob/develop/workshops/reinvent2018/readme.md

For your particular case, more than likely you need to set CORS to use a wildcard based parent origin so that multiple hosts in the same domain can use the same lex-web-ui. Something like https://*.yourdomainname.com.

abhilashdonepudi commented 5 years ago

Thanks for the reply. I will look into CORS.

Is there a way to suppress the response card click button value? We have guid's as values and we would like to not show guid to our users. Instead of changing the code, is there a property to suppress this? What is the best way to achieve this?

bobpskier commented 5 years ago

The only way to suppress the value of a response card button from being displayed when clicked is to update the onButtonClick(value) method in lex-web-ui/src/components/ResponseCard.vue. If the value passed matches a guid, the message created could specify a type of something other than 'human' or 'bot'. For instance specify a type of 'guid'. This would prevent a message bubble containing a guid from being displayed.