A Better Mobile Experience for your Guests

As we move into a world where mobile is the primary means through which users surf the Internet, every website owner has to ensure that the mobile experience provided to their website visitors converts them to customers. Live chatting has been an effective way of pushing reluctant prospects over the fence. However, if your live chat solution does not work well on mobile, you are going to lose sales.

The great live chat solution that Mibew Messenger has been, still lags behind when it comes to mobile. Below we give some tips and mods on making it work for you. This is a shortlist of what we have done to meet our needs. In the comments below feel free to share your tips and hacks.

Mobile CSS

There is a thread in the Mibew forums where someone is asking for a mobile css. The core Mibew team has not yet addressed this issue. With the default chat style in Mibew 2.x, one annoyance is that on mobile devices, when the user is typing their message, the text box gets zoomed in so much that the individual characters appear very big. I have seen this behavior on an iPhone 5s and an HTC One M8.

We suggest the following modifications to the code to mitigate this issue:

1. _layout.handlebars in styles/chats/default/templates_src/server_side
   • Defining an HTML5 header so that bootstrap functions can work. It is currently defined as HTML 4
   • Linking in bootstrap
2. chat.css in styles/chats/default
   • Adding @media queries for phones and tablets
3. iframe.css in styles/chats/default
   • Increased the iframe’s height to 510px to eliminate the need for scrolling.
     How much you will need to set the iframe’s height depends on how high your logo is. Our logo is 100px high. If yours is over 100px high, you will need to adjust the iframe’s height accordingly.

You can either replace the individual files mentioned above, or extract default-fixed.zip and replace the styles/chats/default directory with the extracted directory.

Again, your comments are greatly appreciated.