Skip to main content
NadiaNaziri
Contributor ⭐️⭐️⭐️
Jun 9, 2025 9:55 AM UTC
Solved

what is custom z-index

Under Position in Engagements, surveys, bot, in the Editor there is custom z-index available. what is this for and what value should be added here?

    rschlette
    rschletteAnswer
    Expert ⭐️
    Jun 9, 2025 12:30 PM UTC

    The default z-index for the bot is high, so unless there is some issue that you observe in-app, there’s usually no reason to change the z-index. If there is some element in your web app that is overlaying the KC Bot, or if the bot is overlaying something in your web app that it should not, then you can:

    1. right-click the element in question, and choose ‘Inspect’
    2. in the resulting Elements view you will see the CSS applied to the element you inspected. Look for any style that includes z-index, and note that value.
    3. To move the KC Bot in front of the given element, set the KC Bot z-index to be greater than that element’s z-index value. To move the KC Bot behind the given element, set the KC Bot z-index to be less than that element’s z-index value
    View in thread

    4 replies

    Adrian Raposo
    Adrian Raposo
    Gainsight Employee ⭐️⭐️
    Jun 9, 2025 10:15 AM UTC

    Hi ​@NadiaNaziri,  the custom z-index lets you control how the KC Bot or engagement appears in relation to other elements on your page. By assigning a higher z-index value, you can make sure the bot always shows in front of lower-priority items like CTA buttons or notification centers. Here’s some documentation for more info. 

    Translate
    Adrian Raposo || Lead Technical Writer - Gainsight
      NadiaNaziriAuthor
      Contributor ⭐️⭐️⭐️
      Jun 9, 2025 10:37 AM UTC

      Thanks Adrian, I understand now its function. How can I find what value to add there?

      Translate
      rschlette
      rschletteAnswer
      Expert ⭐️
      Jun 9, 2025 12:30 PM UTC

      The default z-index for the bot is high, so unless there is some issue that you observe in-app, there’s usually no reason to change the z-index. If there is some element in your web app that is overlaying the KC Bot, or if the bot is overlaying something in your web app that it should not, then you can:

      1. right-click the element in question, and choose ‘Inspect’
      2. in the resulting Elements view you will see the CSS applied to the element you inspected. Look for any style that includes z-index, and note that value.
      3. To move the KC Bot in front of the given element, set the KC Bot z-index to be greater than that element’s z-index value. To move the KC Bot behind the given element, set the KC Bot z-index to be less than that element’s z-index value
      Translate
        NadiaNaziriAuthor
        Contributor ⭐️⭐️⭐️
        Jun 9, 2025 1:19 PM UTC

        Thank You Rob.

        Translate
        Terms & ConditionsAccessibility statement