Issues w/ embedded chatbox on iOS

Hello @nicoter.

We reviewed your site and found that you configured bot-chat window as DOM instead of the pop-up window (“# watsonconv-floating-box”). As a result, the plugin behaves incorrectly when interacting with the window from mobile devices. By default, the plugin works correctly on all iOS devices, but we can’t guarantee its behavior if the source code is changing.

If you have more questions, don’t hesitate to ask them.

Regarding DOM, I simply included the chatbot window with the shortcode [watson-chat-box]. Isn’t this a standard way to configure it?

Does that mean the shortcode implementation doesn’t work on iOS devices? This would render the shortcode useless, since nowadays 50-60% of traffic is mobile.

Hello @nicoter.

We are already fixing this.
The fix will be released in one of the next updates.
Until the problem is resolved, you can use the plugin by default (in the “#watsonconv-floating-box” pop-up window).

Unfortunately this is not working, here’s what I did:

1) Removed the shortcode
2) Added <div id=”watsonconv-floating-box”></div> to a custom HTML Gutenberg block instead
3) Override some CSS:

#watson-float {
    bottom: auto;
    right: auto;
    position: static;
}

The chatbox appears and is placed at the same position, but it still has the same bad behavior on iOS devices.

Any rough ETA for the fix to be released?

Thanks

Follow these steps to enable chatbox only on the pages you need:

• Remove the div and CSS that you added
• Go to the “Watson Assistant” -> “Customize Plugin” ->”Behavior” tab
• For “Show Chat Box On:”, select “Only Certain Pages”
• In the list that appears, select the pages on which you want to display the chat window and click “Save Changes”

But then the chatbox will not appear inline and break the design of the page anyway. The point of using the shortcode (or div with CSS) is to embed the chat window at a specific position.

Any ETA for the fix?

Hello @nicoter.
We are already fixing this. A bug fix release is scheduled for the end of this week.

Great to hear this, thanks!

Is the fix already available somewhere, e.g. on Github?

Hello @nicoter.
We released the new version of plugin (0.8.27) that has the fix to your issue. Please update your plugin to the latest version and let us know if the issue persists.

Thank you, it’s much appreciated! I had some z-index issues with my theme but after sorting this out it’s working fine.

Although I had to add the following CSS in order for the chat window to take the full height:

.embedded-watsonconv-on-ios #message-container {
    height: calc(100% - 40.33px);
}

You’re already adjusting the height of #watson-box and #chatbox-body, so you should probably also adjust the height of #message-container.

Also please note I had to substract 40.33px from the height for the message form to be perfectly visible. On #chatbox-body you’re substracting 37px. I assume the value depends on the used WordPress theme, because the height of the message form is defined with “em”, see:

#watson-box .message-form {
    ...
    min-height: 2.75em;
    ...
}

I suggest you set the minimum height to e.g. 40px and also use 40px when substracting in order for it to be compatible with every theme.

Hello @nicoter.

Thank you for your suggestions, we will definitely take them into account.

If you have more questions, don’t hesitate to ask them.

Marking as resolved.

Thanks again for fixing this!