You're welcome! Here's some great free resources you can use: www.codecademy.com/learn/react-101 th-cam.com/video/Ke90Tje7VS0/w-d-xo.html scrimba.com/g/glearnreact Good luck!
hello Fredrik and thank you very much. i have some issue here could you please help? in the quiz component it tell me that the question is undefinde and from where did you get the configProps?
Hi In my project they are using chatbot but facing issue with submit button like I am not able to add accessibility attributes to it.. can you help me in explaining how to add accessibility property for submit button
Hi, what if I want the options to be sent as reply to db, how do I trigger message parser? Nevermind, I am gonna request from actionbprovider always and thatway ill just pads it as props and when user answers- ill trigger
Hey, this library has been updated to a newer version and now you need to import the stylesheet like explained in the documentation: fredrikoseberg.github.io/react-chatbot-kit-docs/docs/ Should solve the issue :)
Hello sir , I have created a custom button which I am rendering with bot message. Upon clicking it , there should be a reply from user 's side with a text automatically. How to do it ?
Hi, I would like to know how we can integrate this into an existing webpage as in the chatbot expands only when I click on the chatbot icon on the bottom right of the webpage.
I have machine learning code in python for Chatbot and need some knowledge in connecting with react app.Please share a video link if it exists. It's helps a lot.
Amazing video! How do you access the styling to customize the style of this bot? I'm trying to create an external CSS and seem to be having some trouble.
Thanks! You can override all of the styling in your own stylesheet with all of the classes listed here: fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuring-css You just need to make sure that you import your own stylesheet AFTER you add the react-chatbot-kit external stylesheet that was added in version 2.0. Otherwise the chatbot styles will still take precedence.
It's because when you write your ActionProvider it does not get initialised before it is passed to the Chatbot. So inside of the chatbot we do new ActionProvider(setState) and we pass the Chatbots setState function to the actionProvider. So when you are doing the addMessageToState you are actually manipulating the Chatbot state so that we can get the messages on the screen.
You can use a condition in your react program to choose whether or not to display the chatbot, see this example: github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/App.js
Where do you want to save it? Since you control what happens in the MessageParser and the ActionProvider, you can include your custom logic there, including syncing to a third party API if you need to.
use redux-toolkit and inside message parser js import { useSelector, useDispatch } from 'react-redux'; import { decrement, increment } from '../../store/counterSlice'; class MessageParser { constructor(actionProvider) { this.actionProvider = actionProvider; // here this.count = useSelector((state) => state.counter.value); this.dispatch = useDispatch(); then in parse(message) function you can this.dispatch(increment()); hope that gave you an idea.
3 ปีที่แล้ว
Hi! what is the name of this font that you use in the editor? I loved it.
fredrikoseberg.github.io/react-chatbot-kit-docs/ In the bottom section you can find an example on how to save and load messages. You can change the content of the functions to retrieve from anywhere.
hi there, actually i got the functionality by this npm package but it is not giving me chat container and all the css in it can u please help me in that
Thanks! It's material facebook theme, along with some of my own custom modifications. You can find the base theme here: marketplace.visualstudio.com/items?itemName=rmarganti.vsc-material-facebook-theme
You can define a function that returns the config object, and where you initialize the chatbot you can call that function and pass in your array of objects as an argument, then use that argument in the state property in the config.
@@fredrikosebergcodinglesson7841 oh thank you, didn't know that you answer back so fast, I'm a complete newbie with react and javascript so I don't really understand how I do it. Atm I rewrite my app using redux so it works for now. But I heard that redux reduces my app performance. So really hope if you can write a tutorial or a video for that problem
how do I implement the option to take the person to a link? Suppose I have a website and in chatbot I give 4 options and each option will take me to a separate page or link how can implement that?
Several ways to do this. You could have the options be buttons that have an onclick handler that pushes to history. Or if you are using react router you could wrap your options elements with the Link component and then supply the path in "to" prop. Basically any way you usually handle your routing is applicable.
Hi, thanks for this tutorial. This is some new learning for me. My question is somewhat related to your tutorial and I hope you would be able to guide me the right way! I am learning by myself. I have made a bot dialog using Bot Composer part of Microsoft Azure bot framework. I got the dialog setup but now need to work on the front end. While Microsoft suggest React for UI customisation and your tutorial helps me there I need to know if you can guide me on how will I be able to connect the react code with my bot composer? Any help will be appreciated. Thank You
Depending on what the bot-composer does, you can make API calls from either the MessageParser or ActionProvider. For example when you receive the message, in the MessageParser you can just forward the message to your API and receive the response from the API which can be used to update the bot. Does that help?
@@fredrikosebergcodinglesson7841 Thank you currently looking into the API option will revert back with my discoveries and if I am able to solve it update you here with the solution. Also another quick question! Can I built my bot using React directly and then host it on the Azure platform link it to my Wordpress site?
Great chat bot, very informative video, thanks! One question, is there a way after receiving a user button click (ex: "Javascript", "HTML", "CSS") in my widget to then display that button text that the client selected as a Client Message?
Thanks! You can indeed do that. Every widget is passed the action provider in props, so you can simply create a method in the actionprovider that creates a client message using the provided this.createClientMessage method and then update the message array with the client message. Then in your widget you can use the actionProvider and call that method once the user clicks the button.
@@fightingliongk5605 You're welcome! Glad to hear it :)
3 ปีที่แล้ว
Hi Fredrik, I'm here again! I would like to search for the questions, validate the answers and search for other fields, such as punctuation, from a database. How can I do this? Do you have any tutorials for this? I'm using 'react-simple-chatbot'.
Hi Monica. I'm not familiar with that package, but if you can access in the input in the chatbot, you should be able to call an API endpoint using the data from the input field. In my package I would implement this in the ActionProvider.
@@fredrikosebergcodinglesson7841 when i run the chatbot i have this error : Failed to compile. ./src/components/Quiz/FlashCard.jsx Syntax error: C:/chatbot/src/components/Quiz/FlashCard.jsx: Unexpected token (11:5) 9 | 10 | return ( > 11 | | ^ 12 | setShowAnswer(!showAnswer)}
@@fredrikosebergcodinglesson7841 I was trying to implement a 'stage' state in the Chatbot so I can throw some actions if the user message contains X AND the Chatbot is currently at Y stage. I'm not sure if directly accessing the Chatbot state I initially set in config is the right approach though.
Ah I get it. Currently, you can't access state from the MessageParser. If I've needed to create stage based components, I've usually created it as a separate widget to render with a chatbotmessage. The widgets you register in config are injected with state, when they are used with a chatbot response. But I can see the use case for wanting to read state in the message parser and I'll look into implementing that in the next minor version.
@Stahl V I've added support for reading the state in the messageparser in version 1.0.6. Here's an example on how you can implement it: gist.github.com/FredrikOseberg/161bbcc7220ded5de7a1fce834d7fe99
You could either (a) manually override the CSS by grabbing the CSS class of the container. Or (b) use the customStyles property in the config as shown here: gist.github.com/FredrikOseberg/87795296efb67fe76fa05fc839d22e25
Each element of the chatbot has a corresponding CSS classname. You can pick the element you want to change and put your CSS changes for that class in App.css.
@@fredrikosebergcodinglesson7841 Hello sir Thank you for your response but I want to increase the width of chatbot window and I am unable to do that. Can I please get to know which CSS classname is corresponding to which chatbot element? It would be really appreciative if you can provide me with any code snippet. Thanks a lot. This has helped me a lot with my project.
@@fredrikosebergcodinglesson7841 Thanks a lot. It worked!! Thank you so much for the complete chatbot kit and for giving a response to my doubts. It really helped me. Looking forward to more videos from your channel
Amazing Video!!! I have a doubt that can we add a widget that takes the address of the user in a form and save the address data? Any relevant resource for this purpose will be helpful :)
Hi! Yeah, you can definitely do that. All you need to do is to create a widget with an input field and use the setState function to update the internal chatbot state. I have a video on how to work with widgets here: th-cam.com/video/YGXXITnXvYU/w-d-xo.html
Hello, thanks so much for this tutorial. However, I'm getting this error "this.setState is not a function" from my Action provider class.. please help. Thanks
thankyou for all these vids i was able to create a chat bot just in a day also can you do a video about widgets too cause that would helpful and one question how do i render the api fetched data as a chatbot message
Hi Kapil. Thanks for the feedback :).. I have a video series on how to use widgets and data fetching in this playlist: th-cam.com/play/PL_kr51suci7UQAxHOF2GitkM5WrOBPcpf.html Last video :)
If you just want to put it online really quickly I suggest you use: www.netlify.com/ You can just connect your repository from github, and it will deploy it easily for you. It's free for small projects, and really easy to use.
@@automatewithrezwan Yes you can. You can retrieve data from APIs like a normal react component would. Here's an example from Skybot source code: github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/bots/skybot/widgets/FlightList/FlightList.jsx
Your a complete lifesaver, i have a hackathon right now trying to make a react chatbot THANKS!
You earned yourself a subscriber. Great tutorial.
Thank you Nischal. I'm glad you enjoyed it :)
Your video saved us from losing a hackathon
Amazing! Thanks for letting me know :)
How to disable sending the empty message.
Hi Fredrik, can we add an extra button for audio beside the send message button? If yes, can you guide me on how to achieve that
Hey Man, Very useful knowledge sharing. Today I finally completed the full video. And built side by side some app. Support and Love Bro
Thank you! Love the support. Happy to hear you built a side app. That's the best way to learn.
god tier youtuber, thanks for the video tutorial!
Thanks for the kind words! Glad you enjoyed :)
Hi
How to store chats in locastorage.......?? I had static content but according to docs not working...better if u provide example.
As you say often; Perfect!
Thank you!
Hey there!, I'm trying to run it but the chat window doesn't even look similar to what you show. Am I doing something wrong? thanks!
how can we load next question this above quiz?
Thanks for such in-depth detailed video! Do you recommend any course/website for React learning beginner/moderate?
You're welcome! Here's some great free resources you can use:
www.codecademy.com/learn/react-101
th-cam.com/video/Ke90Tje7VS0/w-d-xo.html
scrimba.com/g/glearnreact
Good luck!
Is it working ...? No styling available for me ...
Hii I doing same but getting error undefined createchrtbot when I click button
hello Fredrik and thank you very much.
i have some issue here could you please help?
in the quiz component it tell me that the question is undefinde and from where did you get the configProps?
How can I access the code used for both Options.jsx and Options.css?
Is there anyway to make the react chat bot container expand to full screen? Just subscribed :)
Where to contact if facing errors?
hello sir, I wanna know how exactly the overview component should contain
how can i add a sequence of question and save the answers
Hey, How can I customize the time that the dots animation runs? I saw the delay option but its not what I want, I want the dots to run for longer
the css is not working properly if i implement chatbot as a component do u have any suggestions what i should do ?
Hi In my project they are using chatbot but facing issue with submit button like I am not able to add accessibility attributes to it.. can you help me in explaining how to add accessibility property for submit button
Hi, what if I want the options to be sent as reply to db, how do I trigger message parser?
Nevermind, I am gonna request from actionbprovider always and thatway ill just pads it as props and when user answers- ill trigger
My chatbot is not styled as this one it shows only plain text.
I want to say that it is not looking like chatbot you shown
Any solutions anyone?
Hey, this library has been updated to a newer version and now you need to import the stylesheet like explained in the documentation: fredrikoseberg.github.io/react-chatbot-kit-docs/docs/
Should solve the issue :)
@@fredrikosebergcodinglesson7841 wow ,it is fixed now
Thank you so much
@@fredrikosebergcodinglesson7841 I have some other doubts can I contact you via any social platform
Hello sir , I have created a custom button which I am rendering with bot message. Upon clicking it , there should be a reply from user 's side with a text automatically. How to do it ?
did you find a way to do it?
¡Gracias!
how to add files in it ?
Hi, I would like to know how we can integrate this into an existing webpage as in the chatbot expands only when I click on the chatbot icon on the bottom right of the webpage.
Hi there! I am actually covering that in my latest video: th-cam.com/video/hHlcYeyFA2Q/w-d-xo.html
really good!
Thanks Alex!
Hello Fredrik, how can I change the styles of the chatbot?
You can change the styles by using the defined chatbot classes and overriding them in your app.css file.
Hello, Nice tutorial!
Where do I put the code of connecting to a websocket server
How can we connect react UI with backend machine learning python code ?
You can use fetch to get the data you need from your backend in the actionprovider, or inside your custom widgets.
I have machine learning code in python for Chatbot and need some knowledge in connecting with react app.Please share a video link if it exists. It's helps a lot.
i'm doing exactly like how you did in the video but when i click next question it give me quiz over!
Amazing video! How do you access the styling to customize the style of this bot? I'm trying to create an external CSS and seem to be having some trouble.
Thanks! You can override all of the styling in your own stylesheet with all of the classes listed here: fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuring-css
You just need to make sure that you import your own stylesheet AFTER you add the react-chatbot-kit external stylesheet that was added in version 2.0. Otherwise the chatbot styles will still take precedence.
@@fredrikosebergcodinglesson7841 excellent! Exactly what I was hoping for.
How can add and fetch the messages from the database,
Hi there! It's located in the documentation at the bottom of the page: fredrikoseberg.github.io/react-chatbot-kit-docs/
Hope that helps
Hey I'm not able to get the initial chat bot look even after installing react-chatbot-kit. Can you help me out?
Yeah. It has been updated since this video. You now need to add an external css script. The docs detail how to do this. Hopefully that helps!
I'm also facing the same issue, did you get chatbox?
Amazing! But I did not understand why do i need to update the state in actionprovider, addmessagetostate?
It's because when you write your ActionProvider it does not get initialised before it is passed to the Chatbot. So inside of the chatbot we do new ActionProvider(setState) and we pass the Chatbots setState function to the actionProvider. So when you are doing the addMessageToState you are actually manipulating the Chatbot state so that we can get the messages on the screen.
@@fredrikosebergcodinglesson7841 👌
How do you minimize the bot window?
You can use a condition in your react program to choose whether or not to display the chatbot, see this example:
github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/App.js
Thank you very much appreciated!
Nice video!
Thank you Eduardo! :)
Hi Fredrick, nice tutorial tho! But I have a problem, what if I want to save some data given by the user ? Is there any way for that?
Where do you want to save it? Since you control what happens in the MessageParser and the ActionProvider, you can include your custom logic there, including syncing to a third party API if you need to.
use redux-toolkit
and inside message parser js
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from '../../store/counterSlice';
class MessageParser {
constructor(actionProvider) {
this.actionProvider = actionProvider;
// here
this.count = useSelector((state) => state.counter.value);
this.dispatch = useDispatch();
then in parse(message) function you can
this.dispatch(increment());
hope that gave you an idea.
Hi! what is the name of this font that you use in the editor? I loved it.
Hi. It's operator mono :)
How do i keep the chat history for different users.
fredrikoseberg.github.io/react-chatbot-kit-docs/ In the bottom section you can find an example on how to save and load messages. You can change the content of the functions to retrieve from anywhere.
@@fredrikosebergcodinglesson7841 Thanks I got it..
hi there, actually i got the functionality by this npm package but it is not giving me chat container and all the css in it can u please help me in that
Hi, the chatbot was updated to version 2.0 lately, you have to import the CSS now: import 'react-chatbot-kit/build/main.css';
@@fredrikosebergcodinglesson7841 thank you for the help
Cool video
I like your content what theme you are using
Thanks! It's material facebook theme, along with some of my own custom modifications. You can find the base theme here:
marketplace.visualstudio.com/items?itemName=rmarganti.vsc-material-facebook-theme
I have an array of objects in my main app, how do I pass it to Chatbot so I can use it later ?
You can define a function that returns the config object, and where you initialize the chatbot you can call that function and pass in your array of objects as an argument, then use that argument in the state property in the config.
@@fredrikosebergcodinglesson7841 oh thank you, didn't know that you answer back so fast, I'm a complete newbie with react and javascript so I don't really understand how I do it. Atm I rewrite my app using redux so it works for now. But I heard that redux reduces my app performance. So really hope if you can write a tutorial or a video for that problem
how do I implement the option to take the person to a link? Suppose I have a website and in chatbot I give 4 options and each option will take me to a separate page or link how can implement that?
Several ways to do this. You could have the options be buttons that have an onclick handler that pushes to history. Or if you are using react router you could wrap your options elements with the Link component and then supply the path in "to" prop. Basically any way you usually handle your routing is applicable.
which editor are you using here, is it Visual code?
Hi! Yes, you are correct. I'm using visual studio code.
Hi, thanks for this tutorial. This is some new learning for me. My question is somewhat related to your tutorial and I hope you would be able to guide me the right way! I am learning by myself. I have made a bot dialog using Bot Composer part of Microsoft Azure bot framework. I got the dialog setup but now need to work on the front end. While Microsoft suggest React for UI customisation and your tutorial helps me there I need to know if you can guide me on how will I be able to connect the react code with my bot composer? Any help will be appreciated. Thank You
Depending on what the bot-composer does, you can make API calls from either the MessageParser or ActionProvider. For example when you receive the message, in the MessageParser you can just forward the message to your API and receive the response from the API which can be used to update the bot. Does that help?
@@fredrikosebergcodinglesson7841 Thank you currently looking into the API option will revert back with my discoveries and if I am able to solve it update you here with the solution. Also another quick question! Can I built my bot using React directly and then host it on the Azure platform link it to my Wordpress site?
Great chat bot, very informative video, thanks! One question, is there a way after receiving a user button click (ex: "Javascript", "HTML", "CSS") in my widget to then display that button text that the client selected as a Client Message?
Thanks! You can indeed do that. Every widget is passed the action provider in props, so you can simply create a method in the actionprovider that creates a client message using the provided this.createClientMessage method and then update the message array with the client message. Then in your widget you can use the actionProvider and call that method once the user clicks the button.
@@fredrikosebergcodinglesson7841 Thanks, worked perfectly!
@@fightingliongk5605 You're welcome! Glad to hear it :)
Hi Fredrik, I'm here again! I would like to search for the questions, validate the answers and search for other fields, such as punctuation, from a database. How can I do this? Do you have any tutorials for this? I'm using 'react-simple-chatbot'.
Hi Monica. I'm not familiar with that package, but if you can access in the input in the chatbot, you should be able to call an API endpoint using the data from the input field. In my package I would implement this in the ActionProvider.
How to connect it to the localhost ? Is it npm start ? I m able to get error once when i do that
The first thing you need to do is to get a react app up and running. The easiest way to do that is with create-react-app: create-react-app.dev/
@@fredrikosebergcodinglesson7841 thankyou
i have an error when i start the project :
Cannot read property 'length' of undefined
Start which project?
@@fredrikosebergcodinglesson7841 the chatbot
Ok. Do you have your code somewhere I can look?
@@fredrikosebergcodinglesson7841 when i run the chatbot i have this error :
Failed to compile.
./src/components/Quiz/FlashCard.jsx
Syntax error: C:/chatbot/src/components/Quiz/FlashCard.jsx: Unexpected token (11:5)
9 |
10 | return (
> 11 |
| ^
12 | setShowAnswer(!showAnswer)}
What version of react are you using? Try using instead of .
How can I check the current state of the Chatbot from the parse method in MessageParser?
Hi. I'm not sure if I understand correctly. Which state are you talking about?
@@fredrikosebergcodinglesson7841 I was trying to implement a 'stage' state in the Chatbot so I can throw some actions if the user message contains X AND the Chatbot is currently at Y stage.
I'm not sure if directly accessing the Chatbot state I initially set in config is the right approach though.
Ah I get it. Currently, you can't access state from the MessageParser. If I've needed to create stage based components, I've usually created it as a separate widget to render with a chatbotmessage. The widgets you register in config are injected with state, when they are used with a chatbot response.
But I can see the use case for wanting to read state in the message parser and I'll look into implementing that in the next minor version.
@Stahl V
I've added support for reading the state in the messageparser in version 1.0.6. Here's an example on how you can implement it: gist.github.com/FredrikOseberg/161bbcc7220ded5de7a1fce834d7fe99
@@fredrikosebergcodinglesson7841 Thank you for the fast reply and implementing the fature. I really appreciate it and I'll try it asap!
How to change color of message Container??
You could either (a) manually override the CSS by grabbing the CSS class of the container. Or (b) use the customStyles property in the config as shown here:
gist.github.com/FredrikOseberg/87795296efb67fe76fa05fc839d22e25
How do I increase the size of the chatbot window? Please help
Each element of the chatbot has a corresponding CSS classname. You can pick the element you want to change and put your CSS changes for that class in App.css.
@@fredrikosebergcodinglesson7841 Hello sir Thank you for your response but I want to increase the width of chatbot window and I am unable to do that. Can I please get to know which CSS classname is corresponding to which chatbot element? It would be really appreciative if you can provide me with any code snippet. Thanks a lot. This has helped me a lot with my project.
@@tanviaditya5901 Can you try to put this in your App.css?
.react-chatbot-kit-chat-container {
width: 500px;
}
@@fredrikosebergcodinglesson7841 Thanks a lot. It worked!!
Thank you so much for the complete chatbot kit and for giving a response to my doubts. It really helped me.
Looking forward to more videos from your channel
Amazing Video!!! I have a doubt that can we add a widget that takes the address of the user in a form and save the address data? Any relevant resource for this purpose will be helpful :)
Hi! Yeah, you can definitely do that. All you need to do is to create a widget with an input field and use the setState function to update the internal chatbot state. I have a video on how to work with widgets here: th-cam.com/video/YGXXITnXvYU/w-d-xo.html
@@fredrikosebergcodinglesson7841 thanks Fredrick
Hello, thanks so much for this tutorial. However, I'm getting this error "this.setState is not a function" from my Action provider class.. please help.
Thanks
Hey, thanks! What does your ActionProvider class look like? And when does this error message occur?
Can I deploy a chat bot with a system which works offline, will the bot work?
And I am not able to change some css for the bot container, I can or I can't?
Yeah, no problem. As long as you can run a development server it will work.
Yes, all elements have classes you can manipulate.
thankyou for all these vids i was able to create a chat bot just in a day
also can you do a video about widgets too cause that would helpful
and one question how do i render the api fetched data as a chatbot message
Hi Kapil. Thanks for the feedback :).. I have a video series on how to use widgets and data fetching in this playlist: th-cam.com/play/PL_kr51suci7UQAxHOF2GitkM5WrOBPcpf.html
Last video :)
how can i put it online? like on a Digital ocean Server or a site?
If you just want to put it online really quickly I suggest you use: www.netlify.com/
You can just connect your repository from github, and it will deploy it easily for you. It's free for small projects, and really easy to use.
@@fredrikosebergcodinglesson7841 thanks, can we connect a database to this bot , like it will retrieve data from that database and then show it?
@@automatewithrezwan Yes you can. You can retrieve data from APIs like a normal react component would. Here's an example from Skybot source code:
github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/bots/skybot/widgets/FlightList/FlightList.jsx
@@fredrikosebergcodinglesson7841 thanks, could you create a short video on how to integrate APIs in the chatbots?
@@automatewithrezwan I just uploaded a new video explaining how to do data fetching: th-cam.com/video/YGXXITnXvYU/w-d-xo.html
and what did you use to make that floating action button ?
Html, css and JavaScript:) it’s just a normal button with an on click handler.
I love it, you can integrate with WhatsApp?
In what capacity? Since you control most of the pieces here you could do an API call to whats app api in the ActionProvider or in a custom widget :)