Users can access your Zendesk Chat widget when they visit your website on a mobile browser. Here's an example of how the chat button looks on a mobile device:
Depending on the setting of the account, the chat window will open in the same tab or in a new one.
Customizing the appearance settings for the mobile widget
You can customize both the desktop browser and mobile versions of your widget as detailed in Customizing the chat widget. Your customer will see the following when beginning a chat.
Appearance settings set for your widget, such as the Chat Window or Message Style, will be reflected on the mobile widget. The chat button and widget appear in the visitor's supported language.
However, there are two appearance settings that will not be reflected in the mobile chat widget for both the Simple and Classic Theme:
- Chat Badge
- Minimized Chat Button
Selecting mobile widget message options
There are two appearance options specific to the mobile widget:
- Chat Popout: Chats open in a new tab, so visitors have to switch tabs to navigate between the chat conversation and your site.
- Overlay Window: Chats open in a pane in the same tab. Visitors can minimize the pane easily and don't have to switch between tabs.
To select popout or overlay modeIf you have enabled the integrated Chat experience, this option is not available.
- From the Chat dashboard, select Settings > Widget > Appearance tab.
- In the Chat Window section, select Overlay Window or Chat Popout.
- Click Save Changes.
18 Comments
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.
Is there a way to set mobile specific settings? We don't want the same Chat Button message on mobile.
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!
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.
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
Hi Ramin,
How can i integrate this zoopim api in my react website.
Please email support@zendesk.com to get assistance.
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可以正常使用
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?
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!
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.
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.
It would be great to be able to resize the widget on mobile/desktop :)
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.
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.
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.
HI Kristel Angela Garcia,
Is there any specific code to on the chat badge in zendesk? or we can only update via zendesk account.
You can only update via zendesk account sir. Or try to read some articles using web widgets embed costumer service in our website. Thanks
Please sign in to leave a comment.