Is it possible to reposition the WebChat toggle button in an <li> tag?

I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">TestWebsite</a>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
        <script src=""></script>


Didn't find what you were looking for?

New post
Was this post helpful?
0 out of 0 found this helpful



  • Hi, yes you can reposition using this CSS code that adjusts the "position" to being left-sided rather than right sided:

    [data-cognigy-webchat-root][data-cognigy-webchat-toggle].webchat-toggle-button {
    position: fixed;
    left: 32px;

    Read more about how to customize styles of your webchat here:
  • Thanks, Egle!


    I am using the same in my code:

    [data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
                margin: 0px;
                position: fixed;
                top: 10px;
            right: 275px;

    but the problem with this is that the toggle button is not created within the <li> tag and so when resizing the browser the button does not move to the new position of the <li> tag and is positioned in a weird place!


Please sign in to leave a comment.