Change the CSS of Chatbot embedded as IFRAME - botframework

ISSUE:
Today my chat bot stopped working and started giving the following error. No changes were made on my end when this started happening.
I could not find any error in console log. Then I tested the bot with Emulator and in Azure Portal's Test in Webchat feature and the bot worked fine. This bot is using webchat (iframe embed) as well as DirectLine channel. The DirectLine channel works fine it is only the webchat that is not working.
So to test my theory that I am getting the error because of webchat getting updated by Microsoft. I used the embed code in Azure Portal to use the latest webchat and the webchat channel started working.
BRIEF HISTORY:
To modify the UI of the webchat I used this method to modify the UI of the IFrame of my bot. This method requires to download the source of IFrame, create an HTML page and use that page as a source of your IFRAME in your website (you can see the customization in the image).
Now that I started getting the issue I mentioned above, I tried to do the same thing with the latest version of webchat but it is not working. The webchat is not sending messages and I cannot find what CSS file this new version of webchat is using.
WHAT I NEED GUIDANCE ON:
Either a way to continue using the old webchat with the proper UI
OR
How to update the UI of this new webchat version?

I can't advise on fixing the iframe version, but this already wasn't officially supported, and with the latest webchat update Microsoft is moving more to recommending botframework-webchat (directline) to format the UI. A good place to start is the branding sample.
That sample doesn't spell out the options in the code, but if you take a look at the default options file, that should give you everything you need to customize the chat the way you want.
What this does not do is set up the header that used to be present in ootb webchat (and which I see you customized in your example). Now the best way is to do this in html/css, and you probably can just reuse what you did for your custom option. I just created an additional DIV, set it to height: 40px;, then set the webchat DIV to height: calc(100% - 40px);. Anyone who's good with HTML can probably come up with better than this, essentially you just build your page however you want at that point and the webchat implementation just controls the chat area itself (essentially send box and response/bubble area). I also added a custom button to my header.
<div id="chatbotTitle"><h3 style="padding-left:10px;">OEM CSC Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>

The error you are receiving is not a web chat issue. It is an issue in your bot that is being reported via web chat because that is the client being used.
Usually, this error is referring to an incoming activity that your bot doesn't know how to handle (i.e. your bot logic). For example, you have a waterfall step in your main dialog that, depending on the user's response, opens a component dialog. That dialog gets user information (name, age, etc.) that, when complete, returns to the main dialog. However, the next step isn't prepared as perhaps the user exited that dialog prematurely or didn't answer all the questions as expected.
Whatever the case may be, because it isn't setup to handle the incoming activity, it isn't returning the dialog's turn status. You will need to debug your code, stepping thru it, to see which "step" is the root cause.
For me, I have experienced this when I set up Web Chat to send an event back to my bot. My bot didn't know what to do with the incoming event-type activity and would produce that error.
Hope of help!

Related

MS Teams Message Extension submitTask not working in iPhone Teams App

I have created a message extension with the custom web form, it fails to send any data back to the bot on microsoftTeams.tasks.submitTask. It just closes the form, and the bot submit action method does not receive any data. No issues with other clients like web, windows, or mac. Any way to debug or look into log files on the mobile?
Event tried with this sample code for message extension and used the compiled TaskModule.zip package, it's also not working in the Teams iOS application.
try sending only one parameter into submitTask.You could do something like this.
microsoftTeams.tasks.submitTask(yourObj);

How to update an existing activity in WebChat

My scenario is: I send card attachments each with an AcceptButton to users. When 1 user clicks on that button, ideally I want to disable all similar buttons (of the same offer) for all users. I am storing conversation details of each user, and I know the ActivityId of each message-with-said-button (it follows a certain string format).
My issue is similar to this and this but for WebChat not Teams.
I did try those solutions but I got the error "Method not allowed" for both UpdateActivityAsync() and DeleteActivityAsync(). Then I read here that UpdateActivity is not supported in WebChat. (But might be available in the future?)
I would like any visual indication that the offer is no longer available. (Right now, they receive an "Offer was already accepted by {UserX}" which would still be in place on top of changing the card/message.)
Is there a way to do this via backChannel? I can trigger an event and pass the ActivityId (tested by showing a simple alert()) but how do I apply changes to that specific activity?
Per this comment in Web Chat's source code and this open issue in the Web Chat repository for adding support for deleteActivity and updateActivity, Update Activity events are not currently supported in Web Chat. Unfortunately, there is currently no way to really update an activity in Web Chat.
Hope this helps!

Unable to connect Web App Bot to Cortana Channel

I'm trying to add the Cortana channel to a bot I've been working on today. However, when the page loads, the entire form is greyed out except for the knowledge.store Register button, and the Cancel button.
I've read elsewhere that people have managed to get past this by clicking really quickly on the Save button that appears briefly as the page loads, but I've had no luck with that. The (very helpful) tech support guy suggests it could be due to special characters or numbers in the bot name, but I have the exact same issue with a bot name that's just lowercase letters.
UPDATE: I can now see my knowledge.store organisations in a dropdown next to the Register button. Clicking the Register button throws a "Failed to create bot module" error. I am able to connect the channel successfully on another bot I made to test the issue.

Chat history Persistence in MicroSoft Botframework WebChat window

I have a requirement of maintaining chat history and loading them back in a window after a page refresh or close and opening of the window.
ISSUE : Buttons/carousel/Adaptive cards/Hero Cards events/ properties are not loading (ie; when I click on button or any event, actions are not happening).
DESCRIPTION:
In order to achieve the requirement i had 2 options.
BotFramework _ Directline JS
I guess using this we can only get conversation history and where we couldn't load back the conversation history in chat window.
Though we can get the conversation history we have to send all the messages to bot again.
So i had opted 2nd one.
Store the html controls and Load it in the bot div: When sending or receiving message action is happening from bot am storing the html controls(i.e; controls under wc-message-groups class in local storage) and binding back to the div on page load if data exists.
This works for me to show conversation history in a chat window. But I am not able to get the events/actions for buttons.
Can we do this with Directline JS or is there any option to load properties/events to controls?
Please help me with this issue.
Thanks in Advance
I would start by taking a look at this thread out the Webchat GitHub repo. There is a good discussion going on about how this may be accomplished.
I also created this project in C# using webchat which will provide chat history in the webchat control. The project uses this pull request branch which you would also need to use. Hope this helps, good luck.

Publish bot - Bing Chanel "Submit for Review" button is disabled

I am trying to publish a chatbot to Bing channel. I have filled in all the mandatory information, but the Submit for Review button is still disabled, any tips why? Thanks.
For channel configuration issues, the best way is to submit your problem on BotBuilder GitHub and include your bot name, bot handle and app ID as you registered in the Bot Developer Portal
I was able to repro your issue. It seems that the "Tags for your Bot" field is also mandatory, even though is not marked as it in the UI.
Try filling that field and you will see the button will become enabled.

Resources