I am unable to initiate initPayload on my existing code. Is there a way to do that?

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

image

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

  1. @krkc I still not get you. You want to display some messages or choices on the bot widget button that’s it right?

OR

  1. @krkc Inside, the chat screen you want to show some buttons or choice of menu to the user? Right

Hi @nik202 Yes, that’s correct.

@krkc This yes for 1 or 2 :stuck_out_tongue:

My bad, it’s yes for option 2 :slight_smile: :smile: :smiley:

@krkc Few questions for you if you don’t:

  1. Do you know frontend (bot front) to deploy
  2. Are you using Rasa Open Source or Rasa X?
  3. On which rasa version you are working on?
  4. On Window, Ubuntu or Mac?

Hi @nik202

  • Do you know frontend (bot front) to deploy - Yes
  • Are you using Rasa Open Source or Rasa X? - RASA Open Source
  • On which rasa version you are working on? 2.7.1
  • On Window, Ubuntu or Mac? - Windows [/quote]

@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 :blush:

<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!

1 Like

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!

1 Like

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:

  • action_hello_world

6> created a story in stories.yml file. stories:

  • story: hello world

    steps:

    • intent: hello world
    • action: action_hello_world

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 :smiley:

Thanks,

Best Regards, Ravi

1 Like

@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!

1 Like

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 :slight_smile: Close this thread with the solution for others!

1 Like