Dear Team,
I have created a bot using RASA. It went well and thanks to RASA for providing such a great specification.
In my bot, when a user click on avatar below, i want to show some choices. Technically let’s say initPayload. But, my question is how can we achieve that feature. Thanks
Best Regards, Ravi
@krkc Hey! Are you using Botfront? Right @krkc The above scenario you want to develop or already developed? It all depends on frontend you are using nothing Rasa can do in this.
Hey, @nik202
No, i have been referred to some personal projects called moltron. Where there is no configuration for my request. Thanks
Best Regards, Ravi
OR
Hi @nik202 Yes, that’s correct.
@krkc This yes for 1 or 2 
My bad, it’s yes for option 2 
@krkc Few questions for you if you don’t:
Hi @nik202
@krkc Thanks for the information.
in domain.yml file do it
responses:
utter_welcome_message:
- text: Hello 👋! I'm your Technical Assistant!
utter_menu:
- text: Select the topic or write your question below.
buttons:
- title: Rasa Open source
payload: /rasa
- title: Rasa X
payload: /rasax
- title: Software
payload: /software
In stories.yml file
version: “2.0”
stories:
- story: welcome path1
steps:
- intent: get_started
- action: utter_welcome_message
- action: utter_menu
In botfront snippet:
<div id="webchat">
</div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://">
<script>!(function () {
let e = document.createElement("script"),
t = document.head || document.getElementsByTagName("head")[0];
(e.src =
"https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),
(e.async = !0),
(e.onload = () => {
window.WebChat.default(
{
selector: "#webchat",
initPayload: "/get_started",
customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
socketUrl: "http://localhost:5005",
customMessageDelay: (message) => {
let delay = message.length * 30;
if (delay > 3 * 200) delay = 3 * 200;
if (delay < 100) delay = 100;
return delay;
},
socketPath: "/socket.io/",
title: "Bot",
tooltipPayload: "/get_started",
tooltip: true,
tooltipDelay: 500,
subtitle: "Powered by XYZ",
connectingText: "Waiting for server...",
profileAvatar: "https://",
openLauncherImage: "https://",
params: {"storage": "session"},
mainColor: "#ffd600",
userBackgroundColor: "#ffd600",
userTextColor: "#cde9ce",
showMessageDate: false,
inputTextFieldHint: "Hi.Type your message here...",
badge: " ",
displayUnreadCount: true,
isChatOpen: false,
embedded: false,
showCloseButton: true,
fullScreenMode: true,
showFullScreenButton: true,
docViewer: false,
},
null
);
}),
t.insertBefore(e, t.firstChild);
})();
</script>
for integration Rasa with botfront: https://youtu.be/eJMT2FovZsM
I have mentioned only important one rest you know the basic syntax and process. I guess it will solve your issue:) If there is any issue do let me know. Yes, I have changed the file name to stories.yml 
<link rel="stylesheet" type="text/css" href="https://"> you can ignore this it is used for custom css only may be later you need it.
Goodluck!
Hi @nik202 stories: should be in stories.yml file.
Hi @nik202 I got you now. I have modified the code with the code snipps you provided. Let me check this by training my model and executing. Thanks again
Hey @nik202
The solution you have provided work with botfront. And this can’t be aligned with my existing code. Alternatively i was trying to find out any approach that can solve my issue. Will get back to you if i found any solution for this. Thanks for your efforts and quick responses. Appreciate that
Best regards, Ravi
@krkc Hi, thats why I asked you do you know the botfront and provided you the solution for same. @krkc What is your existing code? Where you want to deploy your chatbot. The approach you looking is all depends on frontend keep that in mind and rasa using Markdown.
If you further need any support just asked. Good Luck!
got it. Thanks
Hey @nik202
I’ve fixed it.
Steps Done:
1> Created a custom actions.py with action_hello_world programm. class ActionHelloWorld(Action):
def name(self):
return "action_hello_world"
def run(self, dispatcher, tracker, domain):
dispatcher.utter_message("Hello world !") # send the message back to the user
return []
2> Created a script.js with below…
customActionTrigger();
3> Created a constant.js file with below lables and values.
const action_name = "action_hello_world";
const rasa_server_url = "http://localhost:5005/webhooks/rest/webhook";
const sender_id = uuidv4();
4> Created a chat.js file with the below function.
function customActionTrigger() {
$.ajax({
url: "http://localhost:5055/webhook/",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
next_action: action_name,
tracker: {
sender_id,
},
}),
success(botResponse, status) {
console.log("Response from Rasa: ", botResponse, "\nStatus: ", status);
if (Object.hasOwnProperty.call(botResponse, "responses")) {
setBotResponse(botResponse.responses);
}
$("#userInput").prop("disabled", false);
},
error(xhr, textStatus) {
// if there is no response from rasa server
setBotResponse("");
console.log("Error from bot end: ", textStatus);
$("#userInput").prop("disabled", false);
},
});
}
5> register the action in domain.yml file actions:
6> created a story in stories.yml file. stories:
story: hello world
steps:
With all the above changes, now i can see the bot responds with it’s initPayload. Hence it is possible to write our custom initPayload capability with out any further destructions. That’s the capability of RASA.
Note : This method will only work in Rasa 2.x
Solved screen shot
Thanks,
Best Regards, Ravi
@krkc congrts mate. I dont know you are using AJAX. But great you solved it. I hope some of my suggests helped you whilst cracking your solution. Good Luck!
You too @nik202
It was really great to interact with you and it’s all happened with your co-operation too. Thanks again
Best Regards, Ravi
@krkc No worries mate 
Close this thread with the solution for others!
Help me with Rasa 3.x, please!
