#Example for Cayu

1 messages · Page 1 of 1 (latest)

frozen shore
#

Telling the keyword EXPAND to the chatbot, this script will expand the (maximize) the pop-up screen of a chatbot, **requires: v1 Chatbot, pop-up enabled, full-screen enabled **(untested with v2 "Beta Chatbots")

let isMaximized = false;

jQuery(document).on('input', 'input[type="text"], textarea', function(e) {
  const inputValue = e.target.value.trim();
  
  if (inputValue === 'EXPAND' && !isMaximized) {
    const maximizeButton = document.querySelector('.mwai-resize-button');
    if (maximizeButton) {
      maximizeButton.click();
      isMaximized = true;
    }
  } else if (inputValue !== 'EXPAND') {
    isMaximized = false;
  }
});

This next part goes in the HEADER:
-it allows you to load jquery to enable the above coding

<head>
  <!-- Other head content... -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
</head>
frozen shore
#

@fading badger

fading badger
#

Oh, great! This looks good, I was out and just arrived in Barcelona. I will try it today.

fading badger
#

OOOOhh! "Works perfectly! Now I'm going to try to make it execute code to modify things outside of the chat."

fading badger
# frozen shore <@1095758522202996766>

OOOOhh! "Works perfectly! Now I'm going to try to make it execute code to modify things outside of the chat."
"There may be people who encounter issues when loading jQuery in the head section. It's not necessary to do so if it's already loaded by the theme or other plugins. However, the code will need to be executed in the footer in most cases for it to work."

frozen shore
#

You might already have jQuery running from another plugin, you either do not need the jQuery call or need to put it in the footer instead (like in the message)
Or if you have modified the code already it might be something in the modification

#

Keep in mind: you have to connect any pieces of code you modify into a function within your site that already exists or you have to build the function, so it can be called and map it to your preferred keyword

Any function can be "connected" via its selector, in this case it is the (.mwai-resize-button)

frozen shore
#

here is the code you can use in your footer instead, if the other doesnt work that should rely on what you have loaded and use it instead:

// Listen for user inputs
jQuery(document).ready(function($) {
  $('input[type="text"], textarea').on('input', function(e) {
    const inputValue = e.target.value.trim();
  
    if (inputValue === 'EXPAND') {
      const maximizeButton = document.querySelector('.mwai-resize-button');
      if (maximizeButton) {
        maximizeButton.click();
      }
    }
  });
});
#

basically, the code is also "wrapped" to ensure it executes after all your other stuff is loaded; that way we can ensure it uses the existing jQuery call

# 
// Define the isMaximized variable
var isMaximized = false;

// Listen for user inputs
jQuery(document).ready(function($) {
  $('input[type="text"], textarea').on('input', function(e) {
    const inputValue = e.target.value.trim();
  
    if (inputValue === 'EXPAND' && !isMaximized) {
      const maximizeButton = document.querySelector('.mwai-resize-button');
      if (maximizeButton) {
        maximizeButton.click();
        isMaximized = true;
      }
    } else if (inputValue !== 'EXPAND') {
      isMaximized = false;
    }
  });
});

The above is the original code modified to work directly in the footer...

#

You also should REMOVE the header code, which gives you access to the jQuery library, you basically already have that.
It also should work with: V2 "Beta Chatbots"

fading badger