Zendesk help widget | Community
Skip to main content

Zendesk help widget

  • January 23, 2024
  • 1 reply
  • 0 views

Roman14

Hello. My client wants great accessibility on their web site but we have a complain when the user zooms in on 400 % the help widget from Zendesk starts to overlap content because it has a fixed size. Is there a way to make it a little more responsive?

1 reply

Brandon12
  • January 25, 2024

Hey @roman14 -

A few options here:

  • Custom CSS for the Widget: Zendesk allows you to customize the appearance of the widget using CSS. You can write custom CSS rules to adjust the size and position of the widget based on the zoom level or screen size. For example, you can reduce the size of the widget or change its position when the screen is zoomed in to a certain level.
@media screen and (max-width: 800px) { /* Adjust as needed based on zoom level */
    .zendesk-widget-class { /* Replace with actual class or ID of the widget */
        /* CSS rules to adjust size, position, etc. */
    }
}
  1. Use JavaScript for Dynamic Adjustments: Utilize JavaScript to dynamically adjust the widget's properties based on the user's zoom level or viewport size. You can detect zoom level changes and modify the widget's size and position accordingly.

window.addEventListener('resize', function() {
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
    if (zoomLevel > 4) { // Assuming 400% zoom
        // Adjust the size and position of the Zendesk widget
        // This is a placeholder, replace with actual code to adjust the widget
    }
});
  • Widget Visibility Toggle: Implement a feature that allows users to hide or show the widget as needed. This can be particularly useful for users who rely on high zoom levels and need to temporarily move the widget out of the way.

Hope this helps!

Brandon