Hi,
I m using buttons with payload ad categorical slots to give choices for user for ex:
Choose language: English French Arabic Armenian
The problem is that the user can type anything, how can I force the user to click on these buttons or type the values of these buttons only?
Hey Paul
You need to implement that in your frontend. You can send a custom JSON key in your response (there is text, image, buttons, attachement, and custom like in this code at line 556).
This custom key can itself hold JSON, in which you can set an attribute (like pdf_attachment, dropDown, etc. in the code above) named, for example no_typing, and you write code for it such as when it is detected and with a value of true, the input gets disabled.
@ChrisRahme Any suggestions how we can archived in Botfront, that is developed in ReactJS. Just curious to know that I can worked in that too.
Sorry Nik, I haven’t used Botfront, but the same logic should apply: Detect a Custom Output Payload (implemented in however JSON format you want) in the response and according to the value of a certain key within it, hide or disable user input.
For example:
utter_buttons:
- text: Please choose a language
buttons:
- title: "English"
payload: "/set_language"{"language": "English"}
- title: "French"
payload: "/set_language"{"language": "French"}
- custom:
no_typing: "true"
@ChrisRahme I will give it a try, but at the backend semantic logic, can be disturb because originally the bot is trained in English language. Will find this also 
Thanks mate for the suggestion and logic.
Thank you my friend Chris.
I solved the problem by customizing the code of Rasa chatbot widget.
@paolo_1st Please share the solution for others, if you can.
Under the script file of Rasa chatbot widget:
1)- Create a global array at the top of the page and add all payloads of the buttons:
Blockquote const input_disabled_arr = [‘/affirm’, ‘/deny’, ‘/stop’…]; input_disabled = 0; Blockquote
2)- Disable input on buttons:
Blockquote function addSuggestion(textToAdd) { setTimeout(function() { var suggestions = textToAdd; var suggLength = textToAdd.length; $(’
‘).appendTo(“.chats”).hide().fadeIn(1000); // Loop through suggestions for (i = 0; i < suggLength; i++) { if(input_disabled_arr.includes(suggestions[i].payload)) { input_disabled=1; $(“#userInput”).prop(‘disabled’, true); } else { input_disabled=0; $(“#userInput”).prop(‘disabled’, false); } $(’<div class=“menuChips” data-payload='’ + (suggestions[i].payload) + ‘'>’ + suggestions[i].title + “”).appendTo(“.menu”); } scrollToBottomOfResults(); }, 1000); } Blockquote
3)- Enable user input for anything else than buttons:
Blockquote function setBotResponse(response) { if(handoff==1) { if(first_handoff_call==1) { $(‘
You have been transferred to human agent. You can start the communication.
’).appendTo(“.chats”).hide().fadeIn(1000); first_handoff_call=0; } get_handoff_conversations(sender_id); }//handoff else { setTimeout(function () { hideBotTyping(); if (response.length < 1) { //if there is no response from Rasa, send fallback message to the user var fallbackMsg = “Sorry, i am facing some issues. Please try again later.”; var BotResponse = ‘’ + fallbackMsg + ‘
’; $(BotResponse).appendTo(“.chats”).hide().fadeIn(1000); scrollToBottomOfResults(); } else { //if we get response from Rasa for (i = 0; i < response.length; i++) { //check if the response contains “text” if (response[i].hasOwnProperty(“text”)) { input_disabled=0; $(“#userInput”).prop(‘disabled’, false); var BotResponse = ‘’ + response[i].text + ‘
’; $(BotResponse).appendTo(“.chats”).hide().fadeIn(1000); }
//check if the response contains "images"
if (response[i].hasOwnProperty("image"))
{
input_disabled=0;
$("#userInput").prop('disabled', false);
var BotResponse = '<div class="singleCard">' + '<img class="imgcard" src="' + response[i].image + '">' + '</div><div class="clearfix">';
$(BotResponse).appendTo(".chats").hide().fadeIn(1000);
}
//check if the response contains "buttons"
if (response[i].hasOwnProperty("buttons"))
{
addSuggestion(response[i].buttons);
}
//check if the response contains "custom" message
if (response[i].hasOwnProperty("custom"))
{
input_disabled=0;
$("#userInput").prop('disabled', false);
//check of the custom payload type is "quickReplies"
if (response[i].custom.payload == "quickReplies")
{
quickRepliesData = response[i].custom.data;
showQuickReplies(quickRepliesData);
return;
}
//check of the custom payload type is "location"
if (response[i].custom.payload == "location")
{
$("#userInput").prop('disabled', true);
getLocation();
scrollToBottomOfResults();
return;
}
//check of the custom payload type is "cardsCarousel"
if (response[i].custom.payload == "cardsCarousel")
{
input_disabled=0;
$("#userInput").prop('disabled', false);
restaurantsData = (response[i].custom.data)
showCardsCarousel(restaurantsData);
return;
}
}
}
scrollToBottomOfResults();
}
}, 100);
}//no handoff
}
Blockquote
@paolo_1st Can you tell more specific which Rasa Chatbot Widget ? and can you formatted text as I am trying to understand the code, and its not useful at all. Thanks.
Under the script file of Rasa chatbot widget:
1)- Create a global array at the top of the page and add all payloads of the buttons: const input_disabled_arr = [’/affirm’, ‘/deny’, ‘/stop’…]; input_disabled = 0; Blockquote
2)- Disable input on buttons: function addSuggestion(textToAdd) { setTimeout(function() { var suggestions = textToAdd; var suggLength = textToAdd.length; $(’
‘).appendTo(“.chats”).hide().fadeIn(1000); // Loop through suggestions for (i = 0; i < suggLength; i++) { if(input_disabled_arr.includes(suggestions[i].payload)) { input_disabled=1; $(“#userInput”).prop(‘disabled’, true); } else { input_disabled=0; $(“#userInput”).prop(‘disabled’, false); } $(’<div class=“menuChips” data-payload=’’ + (suggestions[i].payload) + ‘’>’ + suggestions[i].title + “”).appendTo(“.menu”); } scrollToBottomOfResults(); }, 1000); }
3)- Enable user input for anything else than buttons:
function setBotResponse(response)
{
if(handoff==1)
{
if(first_handoff_call==1)
{
$(‘
You have been transferred to human agent. You can start the communication.
’).appendTo(“.chats”).hide().fadeIn(1000); first_handoff_call=0; } get_handoff_conversations(sender_id); }//handoff else { setTimeout(function () { hideBotTyping(); if (response.length < 1) { //if there is no response from Rasa, send fallback message to the user var fallbackMsg = “Sorry, i am facing some issues. Please try again later.”; var BotResponse = ‘’ + fallbackMsg + ‘
’; $(BotResponse).appendTo(“.chats”).hide().fadeIn(1000); scrollToBottomOfResults(); } else { //if we get response from Rasa for (i = 0; i < response.length; i++) { //check if the response contains “text” if (response[i].hasOwnProperty(“text”)) { input_disabled=0; $(“#userInput”).prop(‘disabled’, false); var BotResponse = ‘’ + response[i].text + ‘
’; $(BotResponse).appendTo(“.chats”).hide().fadeIn(1000); } //check if the response contains "images"
if (response[i].hasOwnProperty("image"))
{
input_disabled=0;
$("#userInput").prop('disabled', false);
var BotResponse = '<div class="singleCard">' + '<img class="imgcard" src="' + response[i].image + '">' + '</div><div class="clearfix">';
$(BotResponse).appendTo(".chats").hide().fadeIn(1000);
}
//check if the response contains "buttons"
if (response[i].hasOwnProperty("buttons"))
{
addSuggestion(response[i].buttons);
}
//check if the response contains "custom" message
if (response[i].hasOwnProperty("custom"))
{
input_disabled=0;
$("#userInput").prop('disabled', false);
//check of the custom payload type is "quickReplies"
if (response[i].custom.payload == "quickReplies")
{
quickRepliesData = response[i].custom.data;
showQuickReplies(quickRepliesData);
return;
}
//check of the custom payload type is "location"
if (response[i].custom.payload == "location")
{
$("#userInput").prop('disabled', true);
getLocation();
scrollToBottomOfResults();
return;
}
//check of the custom payload type is "cardsCarousel"
if (response[i].custom.payload == "cardsCarousel")
{
input_disabled=0;
$("#userInput").prop('disabled', false);
restaurantsData = (response[i].custom.data)
showCardsCarousel(restaurantsData);
return;
}
}
}
scrollToBottomOfResults();
}
}, 100);
}//no handoff
}