Bot is not working in Iphone Devices after deployed into production environment

[konagallasushmitha]

Everything is working fine while inspecting in dev tools also. But unable to find out y this bot is not allowing to type anything and scrolling issues. Can u pls help me y its happening like this

[lzc850612]

@stevkan can you please take a look? Thanks

[stevkan]

@konagallasushmitha, a few questions for you:

• Are you able to post your Web Chat code so I can see how you are implementing (hiding any tokens/secrets)?
• Just verifying that you are experiencing this issue when using the Safari browser on iOS? In case it should matter, can you tell me the version of the OS (and browser, if that has a separate version number)?
• The image looks public-facing. Are you able to provide a link I can visit to test, as well?

[konagallasushmitha]

@stevkan Can I have your mailid please so that I can ping you privately ........

[stevkan]

@konagallasushmitha, you can find me email listed in my GH profile. I will keep an eye out for your email.

[stevkan]

@konagallasushmitha, unfortunately, I am not having any issues displaying the embedded iframe DSM Web Chat (tested on: iPhone X using Chrome and Safari, and simulated iPhone X using Chrome desktop).

I took a peak at some of the underlying code and I think you are altering some of the Web Chat elements using CSS...? For instance, the inclusion of position and bottom which I see on the DSM Web Chat send box element with class main. But I don't see these in my basic instance of embedded iframe Web Chat (see below images).

If you are, I suspect that some of these customizations may be affecting how Web Chat is displaying (at least in some instances as I can't repro it). Can you confirm for me if you are passing in custom CSS rules for Web Chat? Are these customizations for placement of the send box or related to placing the embedded iframe in the bottom right corner of the page?

DSM Web Chat

My Web Chat

[stevkan]

Customer responded by email on 10/7 with the following:

yes steven, we have made changes in node_modules webchat component...... I have documented all the node modules library changes

Botframework webchat component --> node_modules\botframework-webchat-component\lib\Styles\StyleSet\SendBox.js · The styles for .main class - the send box styles

node_modules\botframework-webchat-component\lib\Styles\StyleSet\SendBoxButton.js · The styles for the send button

node_modules\botframework-webchat-component\lib\Styles\StyleSet\TextContent.js · The styles for text content - font sizes of messages from bot.

node_modules\botframework-webchat-component\lib\Styles\StyleSet\UploadButton.js · The upload button will be enabled only when the bot replies with a text - 'Please upload the required document'. · The button can be either enabled or disabled using - 'hideUploadButton' flag · The styles for this upload button will be defined here.

node_modules\botframework-webchat-component\lib\Styles\defaultStyleOptions.js · All the style properties will be defined in this file. · We can get their source of definition inside the 'lib' folder

Some other files where CSS have been changed --> § node_modules\botframework-webchat-component\lib\Utils\TypeFocusSink\FocusBox.js § node_modules\botframework-webchat-component\lib\SendBox\Assets - where all the SVG data is stored for icons and images used within the chatbot

[konagallasushmitha]

Hi steven, I just got to know that this is not allowing to type anything as sendbox was not appearing to do that @safari browser for iphone XS but I am unable to debug whats going on as I am using windows os which doestn't support safari browser

[stevkan]

@konagallasushmitha, I suspect that some of the style changes you are making to the components are what are causing the rendering issues for you. Though, why for you and not for me when visiting the same site, I don't know (see image below). There is also the outside possibility that the issue is specific to your phone. Have you tested on another?

If the issue persists, I would also suggest that you rollback the changes you made and then apply them one by one verifying along the way whether any of them are the root cause of the issue.

There is also a means for debugging Safari. In a nutshell, this requires allowing debugging on your phone, connecting your phone to MacOS, and viewing mobile Safari thru the Mac. This link details how you can achieve this manually under "Method 1". This article was posted in June, 2020 so it is relatively recent. You may be able to get greater insight if you are able to set this up.

All that having been said, most of the changes it appears you are trying to make are typically done as part of implementing Web Chat in the HTML page. While you can do anything you want, changes to the code are usually focused around adding/making changes to some feature vs. stylistic changes. Is there a reason you are doing so much in the library?

Additionally, avoiding direct changes to the library means you don't have to re-apply custom code to the SDK when new versions come out.

Here are some considerations:

• Typical CSS changes, like adjusting size, color, font size, etc., are made in the <style> tag of the HTML page, per usual.

• Some items are accessible via passing in a custom styleOptions (available properties) or styleSet (available properties) property as a parameter into Web Chat. You can reference 2.branding-styling-and-customization/a.branding-web-chat and 02.branding-styling-and-customization/b.idiosyncratic-manual-styles for samples of both, respectively.

  • styleOptions is the preferred method as it allows plugging in updated supported style values.
  • Some properties, such as TextContent, are not accessible via styleOptions but can be updated via styleSet, however this replaces all the default stylings used by Web Chat.
  • You can't use both properties in Web Chat together but you can pass styleOptions into styleSet and pass the latter into Web Chat.

[stevkan]

Closing due to a lack of activity. If the problem persists or there are new details you can provide, please feel free to reopen the issue.