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 mode
If you have enabled the integrated Chat experience, this option is not available.
- From the Zopim dashboard, select Settings > Widget > Appearance tab.
- In the Chat Window section, select Overlay Window or Chat Popout.
- Click Save Changes.
13 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可以正常使用
Please email support@zendesk.com to get assistance.
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.
Please sign in to leave a comment.