Skip to main content
Solved

what is custom z-index

  • June 9, 2025
  • 4 replies
  • 56 views
N

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?

Best answer by rschlette

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

    4 replies

    Adrian Raposo
    Forum|alt.badge.img
    • Adrian Raposo
    • Gainsight Employee ⭐️
    • June 9, 2025

    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. 

    Adrian Raposo || Lead Technical Writer - Gainsight
    rschlette
    N
    N
    • NadiaNaziri
    • Author
    • Contributor ⭐️⭐️
    • June 9, 2025

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

    rschlette
    Forum|alt.badge.img+2
    • rschlette
    • Expert ⭐️
    • Answer
    • June 9, 2025

    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
    Adrian Raposo
    N
    N
    • NadiaNaziri
    • Author
    • Contributor ⭐️⭐️
    • June 9, 2025

    Thank You Rob.

    Terms & ConditionsCookie settingsAccessibility statement