The beloved chatbots are occupying a lot of IT-fields incredibly fast because they are easily customized, validated, API integrated. In short words, smart AI. In my talk, I am going to explain how to easily customize conversational sign-up forms with multiple field types to collect information through a chatbot-like experience written with React and Redux such as Name, Email, Location, and so on. Moreover, I will highlight how to recognize if the user enters the right data and how the chatbot will be making decisions and how to proceed with conversation depending on the user's replies.
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Conversational Sign Up with Chatbot-like experience with React and Redux
1. Conversational Sign Up with
Chatbot-like experience with
React and Redux
1Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes
2. I am not a Chatbot expert or anything.
Before starting…
I just have tried to design and implement
conversational experience for Sign Up Form.
🙅
💁
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 2
3. How to start? 🤔
☝ Understand the goal of Chatbot
before moving to the design
process.
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 3
My Chatbot serves a certain purpose:
to sign up the user ✅
4. Moving on to…&
✌ Creating a conversational UX.
• To answer all the user’s questions
before they are ready to sign up
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 4
5. Not to forget:❗
🤞 Give a personality to the
Chatbot - unique characteristics,
like:
• Fitting name
• Avatar
• Animated emotions
• Voice
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 5
6. …and more… 📯
🤘 “Foreknow” the user’s responses.
• By adding the context to the
conversation via the answer-options
for the user
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 6
7. Last but not least 🏁
🖐 Preview all collected user data
at the end of conversation
before the submission.
• The user needs to know and agree
with data that will be processed.
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 7
8. HOW does my Chatbot look like:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 8
9. Chatbot is a simple state machine:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 9
10. …and…
The whole data structured in a
nested JSON object and stored
in the state of the Chatbot
reducer.
🗄
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 10
11. Because… ⤵
• Easy to change the experience
without coding
👉 If the whole experience is
described in the data structure:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 11
12. Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 12
Props in the data object:
13. Transitions is a to conversational
experience
🔑
• With corresponding ID to the next
interaction
• Each transition depending on the
user action
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 13
14. HOW to implement such a
conversational engine in React and
Redux?
⬇
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 14
By triggering the proper
transitions when certain user
interactions happen
15. After processing the user request, the
action “MAKE_TRANSITION” will be
dispatched, so that the state machine
can move to the next state:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 15
16. …then this action will be handled by
reducer:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 16
17. …and render the corresponding
response as a new state in the
<Chat /> component:
Keeping the previous chat history➕
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 17
18. The <Message /> component renders
the state of the message displayed
during the chat + history of states:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 18
19. To bind the user input into the data
object to each relevant transition
include input prop with the unique name:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 19
20. To use user input in future messages,
I have applied the interpolation
technique:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 20
21. Its logic is implemented in
renderMessage(message, fields)
function:
• message is the prop from the state
transition (eg. Hello, $name$!)
• fields are the different user inputs to
each specific field like name, email…
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 21
22. To update every change of the user
input in the store, I have added the
“UPDATE_FIELD” action:
There are only 2
dispatching
actions
🙏
• statesReducer also handles it and returns
the state with the updated fields.
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 22
23. The full reducer implementation for
the chatbot:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 23
24. Coming back to the <Chat /> component,
every change in each input element is
handled by updateField action:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 24
25. After receiving all the required
information from the user responses
for the conversational sign-up form
at the end of the conversation, the
chatbot displays all user answers for
confirmation.
✅
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 25
26. This couldn't fit in the simple generic
<Message/> component, so I’ve created
a custom one: <ConfirmSignUp />:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 26
27. That renders all the input data
from the user via the fields props:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 27
👉 name, email, usageFor, relatedUpdates
28. Event handlers to add and confirm
user input:
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 28
