Chatbot Widget for Rasa using Rest Channel

Getting Started with Rasa Tutorials, Resources & Videos
22

@a1exsta

in domain.yml

responses:
  utter_greet:
  - text: "Check this video" [click 👉](https://rasa.com)
1 Like
23

@nik202 many thanks for your advise! I’ll try.

24

@a1exsta no worries.

25

@nik202 hi! I tried it and it doesn’t work in rasa v2.8.2. Maybe this way works with rasa X only?

26

Hi I would like to integrate reminders with the Widget @JiteshGaikwad.

  • I have added the following lines in credentials.yml file

callback:

url: “http://localhost:5034/bot”

  • I have created a callback server file but I don’t know how to send the information received here to the widget callback_server.py (819 Bytes)

I am not sure if I have to change the constant rasa_server_url in static/js/constants.js. Right now I am doing

ngrok http 5005 → http://XXXXXXX.ngrok.io

http://XXXXXXX.ngrok.io/webhooks/rest/webhook

Do I have to add (http://XXXXXXX.ngrok.io/webhooks/callback/webhook) in any place?

@ Yash_kals… Could you help me with the implementation?

Thanks in advance, Paula

27

@Paula is this still an issue? Do tag me.

28

@nik202 yes… I did not find a solution.

29

Can you state your current error? @Paula

30

Hi @nik202 There is no error. I don’t know how to do it. It is necessary to add js code (chatbot widget). Also, I have to change things in rasa code (python). I could not find any guide… Best Paula

31

@Paula I hope you have seen this repo? are you following same steps ?

32

@nik202 Everything is ok but now… I would like to integrate reminders with the Widget JiteshGaikwad.

  • I have added the following lines in credentials.yml file

callback:

url: “http://localhost:5034/bot”

  • I have created a callback server file but I don’t know how to send the information received here to the widget

I am not sure if I have to change the constant rasa_server_url in static/js/constants.js. Right now I am doing

ngrok http 5005 → http://XXXXXXX.ngrok.io

http://XXXXXXX.ngrok.io/webhooks/rest/webhook

Do I have to add (http://XXXXXXX.ngrok.io/webhooks/callback/webhook) in any place? Could you help me with the implementation?

Thanks in advance, Paula

33

Thanks @JiteshGaikwad Good work :+1:

35

hii @JiteshGaikwad i wanted to add a datepicker js component and call it from custom action in order to take input as a date from a datepicker but it is not working can you please help here i am attaching the code.

class ActionAskDOB(Action):

def name(self) -> Text:

    return "action_ask_DOB"

def run(self, dispatcher: CollectingDispatcher,

        tracker: Tracker,

        domain: Dict[Text, Any]) -> List[Dict[Text, Any]]:

        data =[]

        today = date.today()

        json_str = json.dumps({'created_at': today}, default=str)

        data.append({"initial_date": json_str})

        message={"payload":"dob","data": data}

        dispatcher.utter_message(text="Choose your Date of Birth:", json_message=message)

        return

dob.js /**

  • renders pdf attachment on to the chat screen
  • @param {Object} pdf_data json object */

function renderDOB(initial_date){

const { date : dob_date} = initial_date.custom
const date_picker =`<div>
<!-- Add the HTML <input> element  -->
<input  id = ""element" type ="text" placeholder='${dob_date}' /></div>` 
$(".chats").append(date_picker);
scrollToBottomOfResults();

var datepicker = new ej.calendars.DatePicker(); // Render the initialized DatePicker. datepicker.appendTo(’#element’) }

36

OMG, I just got this to work. @JiteshGaikwad thank you for sharing, you are a rockstar! :+1:

37

Hi @JiteshGaikwad,

First of all, this chatbot widget is awesome. I have been looking for a UI for my chatbot since I am not into front-end. But I have small doubt, or you can say I am stuck.

I want to integrate my chatbot to my website which uses suppose index.html file already. How can I integrate your widget to my website just like rasa provide their own widget which asks for socket-URL. Is there any way to add that thing to this widget. I really want to use this widget in my project, and I can’t find a better UI.

Looking forward to your reply.

1 Like
38

Hello There! Thanks for sharing this awesome widget. I would like to know how to implement this in my React app? Is there anyway I could add it like a snippet or is there a different method? Thanks in advance!

1 Like