How to add a lightbox to images in Zendesk Help Center

Updated on

Adding a lightbox to images in Zendesk isn't officially supported by ScreenSteps staff. There are a lot of customizations that you can make to your Zendesk Help Center so it is possible that the documentation below will not work depending on how you have designed your help center. But these instructions should give you the information you need to set things up. You will need to undrestand a bit about javascript and CSS to add the lightbox feature.

In a ScreenSteps document, when an image is inserted the HTML looks like this:

<div class="image">
  <a class="screensteps-image-zoom" href="">
    <img src="" alt="my image">

When adding your lightbox library you will want to reference the linked image. For example:


Using that selector, you should be able to integrate your favorite lightbox library into your Zendesk Help Center.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Add the ScreenSteps Admin Bar to the Zendesk Help Center
Next Article How to get your Zendesk API key
Still Need Help? Contact Us