Hide text input when buttons appear
# 🤝helpb
brainy-summer-1041
08/04/2023, 8:37 AMWhen i add a single choice card (or any card that uses buttons) the user can still type a message.
This often causes the user to exit the desired conversation flow.
Can i hide the input section from a specific point to prevent this from happening? (and make it re-appear later on)
brainy-summer-1041
08/04/2023, 8:39 AMA method could be using JS code to dynamically change the CSS. It would hide the user input section whenever buttons appear, and make it re-appear once the buttons are gone
h
helpful-vr-6699
08/04/2023, 8:48 AMI was looking to do that but I cannot seem to grab the input field
helpful-vr-6699
08/04/2023, 9:46 AMThe elements are inside the iFrame and cannot be selected
Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame.b
brainy-summer-1041
08/04/2023, 10:01 AM@famous-jewelry-85388 talked about using a JS script, but nothing more
brainy-summer-1041
08/04/2023, 10:02 AMI hope there's a way of doing it inside of Botpress as well
h
helpful-vr-6699
08/04/2023, 11:42 AMHopefully someone chimes in on the matter
helpful-vr-6699
08/04/2023, 11:45 AMBut with the amount of help posts everyday we will see
b
bright-magazine-792
08/04/2023, 5:18 PMwith the custom events release, I see there should be a possible workaround.
1. sending custom event after/before single choice
2. JS to toggle CSS properties to
display: nonebright-magazine-792
08/04/2023, 5:18 PMI'd highly suggest you wait for a couple of weeks until we release our new webchat, that might help in easing such operations.
b
brainy-summer-1041
08/04/2023, 5:53 PM@bright-magazine-792 will it become available earlier than 2 weeks in the beta?
b
bright-magazine-792
08/04/2023, 5:56 PM@famous-zoo-73118 do you have any insight on this?
f
famous-zoo-73118
08/04/2023, 6:00 PM@brainy-summer-1041 The new webchat is still in the works but we'll probably first start with a beta and as Rohan mentioned that won't be available until a few or several weeks more.
However, the behavior you originally reported might be something that could be improved in the flow itself. @colossal-activity-12523 do you know if this behavior could be changed at the dialog manager level?
i
important-accountant-83157
08/04/2023, 9:52 PMIn the meantime I tried to do this with some code and failed. I first put the following in my stylesheet:
.bpw-composer {
display:block;
}
Then I added an Execute Code card to my first node with the following code That I got from GPT :
const composerElement = document.querySelector('.bpw-composer')
if (composerElement) {
composerElement.style.display = 'none';
}
When the bot got to that point it simply said it ran into an error. So then I tried a different approach. I added the following class to my stylesheet:
.hidden {
display: none;
}
And then added the following code (again from gpt) to an execute code card:
const composerElement = document.querySelector('.bpw-composer');
composerElement.classList.add('hidden');
It again errored out. Am I approaching it the correct way and is there a simple fix to my sloppy code solution?
f
famous-zoo-73118
08/04/2023, 10:42 PM@important-accountant-83157 @bright-magazine-792 Unfortunately It's not possible to use that approach as the bot runs on the server side so it doesn't have access to the user's browser.
b
brainy-summer-1041
08/04/2023, 11:06 PMCan I take a creative approach? For example, modify the CSS so the button section covers the user input
brainy-summer-1041
08/04/2023, 11:06 PMIt may be unusual, but it may also be useful
brainy-summer-1041
08/07/2023, 11:24 AM@famous-zoo-73118 @bright-magazine-792
f
famous-zoo-73118
08/07/2023, 5:30 PM@brainy-summer-1041 Could you share a quick example of the approach? In general, the CSS of the current webchat cannot be controlled from the bot due to the way it's designed and browser restrictions. However, we're working on redoing the webchat from the ground up so it can be much more customizable long-term, which we expect to finish in the next several weeks.
26 Views