Getting Started

Before your start

Before continuing with the documentation, you should have created a Chatsy account and have a Chatbot created. If you haven't done so, please create a Chatbot.

Toggle Chatsy Visibility

Toggle the visibility of the Chatsy widget. This is useful if you want to hide the widget when the user is on a specific page.

      
        
      
      
          <script type="text/javascript">
            // Open the Chatsy widget
            chatsy.open();

            // Close the Chatsy widget
            chatsy.close();

            // Toggle the Chatsy widget
            chatsy.toggle();
          </script>
        
    

Listen for Chatsy Events

Listen for Chatsy's emitted events. This is useful if you want to perform an action when a specific event is fired.

      
        
      
      
          <script type="text/javascript">
            // Listen for status changes
            chatsy.on('status', function (event, status) {
              console.log('Chatsy status', status);

              if (status === 'loading') {
                // The Chatsy widget has started loading into the webpage
              } else if (status === 'loaded') {
                // The Chatsy widget has finished loading into the webpage
              } else if (status === 'initialized') {
                // The Chatsy widget has been initialized and is ready to be interacted with
              } else if (status === 'connecting') {
                // The Chatsy widget has started connecting the user to a Chatbot
              } else if (status === 'connected') {
                // The Chatsy widget has successfully connected the user to a Chatbot
              }
            })

            // Listen for state changes
            chatsy.on('state', function (event, state) {
              console.log('Chatsy state', state)

              // The state is not available until the connected event has been fired
              // The state object contains the following properties:
              // chat
              // conversation
              // sessionData
              // userData
            })
          </script>
        
    

Add Data to the Chatsy Session

Use the following code to add data to the Chatsy session. This is useful if you want to pass data to the Chatbot.

      
        
      
      
          <script type="text/javascript">
            // Add data to the Chatsy session
            chatsy.addUserData({
              name: 'John Doe',
              email: '[email protected]'
            })
          </script>
        
    

Send a message programatically

You can send a message programatically. This is useful if you want to send a message to the Chatbot when the user interacts with your page.

      
        
      
      
          <script type="text/javascript">
            // Send a message to the Chatbot
            chatsy.message('Hello, I need help!')
          </script>