1. Cognigy.AI Help Center
  2. Community
  3. ✨ Conversational AI projects: Best practices

Opening a WebChat on the webpage without showing the button

Avatar
John Campbell-Higgens

I have used the code

<script src="https://github.com/Cognigy/WebchatWidget/releases/download/v2.48.0/webchat.legacy.js"></script>
<script>
    initWebchat(
        "https://endpoint-trial.cognigy.ai/289793cc47f157c79a3e1b933492b0b645db9f4edc2b56de10424279fbf1e2a0", {
        settings: {
            //colorScheme: '#FAB'
        }
    }).then(webchat => { 
        window.cognigyWebchat = webchat.open();
        //webchat.open()
    });
    
</script>

 

Which is good and opens a demo, but it opens in the bottom right of the screen with the little round button shown.

I want to just display the Webchat window in a location within the HTML, is this possible?

Didn't find what you were looking for?

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

Comments

3 comments

Sort by Date Votes
  • Avatar
    Rishad

    If I understand correctly ,You want to reposition/customize the position of Webchat Window. 

    If so, you can override the below style settings to adjust the position

    [data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
        left: auto;
        top: auto;
        bottom: 5px;
        right: 5px;
    }

    0
  • Avatar
    Rishad

    And If you want to hide the Chatbot Button , override the below style

    [data-cognigy-webchat-root] button[data-cognigy-webchat-toggle] {
        display: none;
    }

    Then add your own button/link anywhere in you page and onClick even handler invoke  

    <script>

    initWebchat(

    // code

     });

    </script>

    1
  • Avatar
    Nils Hoffmann

    If you want to additionally hide the close icon in the title bar: 

    <style>
    /* hide close button in header */
    [data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-header-close-button {
        display: none;
    }
     
    /* hide open/close button beneath webchat widget */
    [data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
        display: none;
    }

    </style>

    0

Please sign in to leave a comment.