How to disable input box when quick reply options are listed?

In my bot I have close ended questions, how can I allow users to only select single choice options available on screen and disable the input box ?

1 Like

Hey @sumeetzade !

I understand that you want to hide the input bot in your chat interface. I assume you are using the web chat channel.

In order to hide the input box, you can customize the web chat’s CSS rules. By setting display: none on the .bpw-keyboard CSS class, you will effectively hide the input box.

Hope this helps!

Thanks spgin for your quick reply.

I tried that and able to hide the input box completely using css rule.But I want to hide it for single choice questions and show it for the normal responses.

I am not getting the event at which I should hide the text box and then again show it for normal responses.

After trying too many options, I found a solution for this.

  • In JavaScript, I checked for div with class “bpw-keyboard-quick_reply”. if it is loaded then disable the input box else keep it enable.
  • I used MutationObserver to observe the loading of child div.

Hope this will be helpful.

Hi @sumeetzade.

I’m trying to do that, but no idea how to do it. It may be that you can post the code or the way you did it. I don’t know much about programming
Thank you

Hi,

My script for finding quick_reply options and disable input box.

<!------- custom script added for hiding inputbox -->
  <script>		
	const target = document.getElementById("app");
	const config = {  
		childList: true,
		subtree: true		
	};
	// setinputbox function
	function setinputbox(mutations) {	    
			var appobj = document.getElementById("app");						
			var str = appobj.outerHTML ;			
			var n = str.search("bpw-keyboard-quick_reply");		
			if (n > 1){					
				document.getElementById("btn-send").style.display = "none" ;	
				document.getElementById("input-message").disabled = true;               				
			}else{				
				document.getElementById("btn-send").style.display = "" ;	
				document.getElementById("input-message").disabled = false;				
			}   
		
	}	
	const observer = new MutationObserver(setinputbox);	
	observer.observe(target, config);  
</script>
<!------- custom script end for-->

But I did not find the proper solution to include this script on load of chat window.
The way I implemented this is:

  1. Add above script in /data/assets/ui-studio/public/lite/index.html file
  2. Set index.html file to readonly.
  3. Restart the Botpress service.

Make sure after botpress service restarted, above script present in index.html file.

1 Like

Hi,

Thanks for the information, I will try it in my bot