Customizing the Chat widget for mobile devices

Return to top
Have more questions? Submit a request

18 Comments

  • Matt Wren

    I'm currently on a Enterprise - Support+Chat and cannot seem to get the "Overlay and Chat Popout" options to appear.  I'm using on a Wix website and cannot get the mobile version to work, desktop works well.

    1
  • 胡斯文

     

    When an Android app accesses my site via WebView and opens the chat window and clicks the button, it cannot wake up the album to send the file. The iOS app works fine

    在Android app通过WebView访问我的网站并打开聊天窗口点击按钮无法唤起相册发送文件,iOS的app可以正常使用

     

     

     

     

     

     

    1
  • Brett - Community Manager
    Zendesk Community Team

    Hey Candice,

    It looks like you have a ticket open with our Customer Advocacy team related to this issue. We will continue working with you on the ticket to troubleshoot this issue.

    Cheers!

    0
  • sweety kamboj

    Hi Ramin,

    How can i integrate this  zoopim api in my react website.

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Hi Ben,

    We haven't changed anything in the mobile widget that would cause this issue. I had a look at your site and the widget works fine, there is an issue that the button conflicts with a button on your page.

    That is easily resolved by using the offset APIs to move the button location.

    You can get all of the button API docs here: https://api.zopim.com/files/meshim/widget/controllers/liveChatAPI/Button-js.html

    -Ramin

    0
  • Ben Baker

    I have add the code to our website, its working fine on desktop but its not working on mobile

    Its appearing on mobile but its breaking the page. Can someone assist please? The old version of live chat worked fine and didn't break the page.

    0
  • Kristel Angela Garcia

    This article describes advantages of using the overlay chat widget and how to turn it on.

    Understanding the advantages of the overlay chat widget
    Here are some of the key advantages of the overlay chat widget.

    Start a conversation faster
    01-overylay-chatwindow

    The overlay widget lets the visitor remain in the tab they were using. The widget also loads 2-3x faster (depending on network speeds).

    02-overlay-sendbutton

    Giving a customer the ability to send attachments like photos or screenshots of an error can be incredibly useful when trying to understand their situation and provide help. The overlay option lets visitors start a conversation by sending an attachment.

    Better understand your mobile visitors
    03-overlay-visitorpath

    Understanding where your visitors have been and where they are going during a chat conversation can help the agent understand what the visitor has tried and what they are looking at now. The overlay widget lets agents get the full visitor path tracking just like what they are used to for desktop visitors.

    If you have Google Analytics on your website, you can take advantage of the events inside Google Analytics to better understand your desktop visitor’s actions. The overlay widgets lets you track those same events for mobile visitors as well. This will ensure that the numbers in Google Analytics are more accurate and captures all visitor events, regardless of what device or platform they are using.

    Maintain your brand on mobile
    The overlay widget ensures your website visitors always remain on your site and domain, even while chatting.

    Zendesk Chat offers a comprehensive Javascript API that allows for more customization of the widget experience. The overlay widget ensures that the mobile widget reacts to all of the APIs the same way it does on the desktop widget.

    A better mobile chat experience
    To ensure the mobile overlay widget feels as native to the phone as possible, there are a number of other smaller tweaks

    Preventing the keyboard from jumping around when the visitor is typing
    Smoother chat log support and reduced jumping when a new message is received.
    Ensuring that the keyboard stays open after the visitor hits ‘Send’ so they don’t have to keep tapping on the text input field when they want to send multiple messages.
    Ensuring that the text input field is always accessible even as the visitor scrolls up the chat log to review previous messages.
    Works with Zendesk Support
    If you use Chat with the Zendesk Web Widget, all the benefits mentioned earlier also applies to you!

    04-overlay-webwidget

    Having the mobile overlay widget enabled allows Support tickets created from Chat to include the mobile visitor’s URL. This is important if you use triggers in Support that looks for a specific URL in the ticket, for example, when assigning tickets to the correct brand.

    Turning on the overlay chat widget
    You can turn on the overlay option through the Widget settings inside the Chat dashboard, and select the Appearance tab.

    ykOLYAS-VB4CW0CfGF96tYLiDeCS4HGJJqz1ke0KI8g

    Under the Chat Window section, click on the “Overlay Window” toggle for the ‘Mobile Widget’ setting and click ‘Save Changes’ at the bottom of the page.

    0
  • Devan - Community Manager
    Zendesk Community Team

    Hello Anna Lui,

    The Chat API would be your best bet for customizing the size of your widget. I've shared some documentation that should get you started, but if you have any questions, I would recommend posting in our developer support forums for API help.

    Chat API

    Developer Support

    Best regards. 

    0
  • candiceyang

    I have also encountered  the above problem "When an Android app accesses my site via WebView and opens the chat window and clicks the button, it cannot wake up the album to send the file. The iOS app works fine",  has it been solved now?

    0
  • Jon Daniels
    Zendesk Customer Advocate

    Hey Ronny!

    You can always use the chat JS API to change the appearance or wording of the widget when accessed via mobile:

    Zendesk Chat Javascript API

    While we can't assist with custom code here, I hope this helps you get started!

    0
  • Mahesh Embadi

    HI Kristel Angela Garcia,

    Is there any specific code to on the chat badge in zendesk? or we can only update via zendesk account.

    0
  • Ronny Sage

    Is there a way to set mobile specific settings? We don't want the same Chat Button message on mobile. 

    0
  • Kristel Angela Garcia

    You can only update via zendesk account sir. Or try to read some articles using web widgets embed costumer service in our website. Thanks

    0
  • Ramin Shokrizadeh
    Zendesk Product Manager

    Please email support@zendesk.com to get assistance.

    0
  • Duc Nguyen Huy

    Hi,

    Thanks for your article. I can't do the widget centered on mobile device (Safari app on iOS)? Could you let me know what's options to obtain that?

    Thanks for help.

    Best.

    0
  • Anna Lui

    It would be great to be able to resize the widget on mobile/desktop :)

    0
  • Mahesh Embadi

    Hi All,

    I have a zendesk account. But in that chat badge option is off. If it is off also i need to show chat badge in the website . Is there any code to do it with out customizing in appearance section.

    0
  • Katie Dougherty
    Zendesk Community Team

    Hi Matt Wren

    Thank you for reaching out! If you have the integrated Chat experience (Support+Chat), the "Overlay and Chat Popout" options are not available. However, I'd like to pass along some customization options from our developer documentation: 

    I hope this helps answer your question! Feel free to reach back out with additional questions. 

    0

Please sign in to leave a comment.

Powered by Zendesk