SlideShare a Scribd company logo

Ilona Demidenko - Conversational Sign Up - Codemotion Amsterdam 2019

•
•
Codemotion
Codemotion

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.

Related slideshows

InfiniteUp Data analysis and UX recommendations 30 11_20 - 06_12_20
InfiniteUp Data analysis and UX recommendations 30 11_20 - 06_12_20InfiniteUp Data analysis and UX recommendations 30 11_20 - 06_12_20
InfiniteUp Data analysis and UX recommendations 30 11_20 - 06_12_20
 
Easily Deploy your Chat Bot to Multiple Channels with Stamplay
Easily Deploy your Chat Bot to Multiple Channels with StamplayEasily Deploy your Chat Bot to Multiple Channels with Stamplay
Easily Deploy your Chat Bot to Multiple Channels with Stamplay
 
Best Practices in SharePoint User Management
Best Practices in SharePoint User ManagementBest Practices in SharePoint User Management
Best Practices in SharePoint User Management
 
1 of 31
Download to read offline
Conversational Sign Up with Chatbot- like experience with React and Redux Ilona Demidenko @ilonacodes Amsterdam | April 2-3, 2019
Conversational Sign Up with Chatbot-like experience with React and Redux 2Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes
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 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 4 My Chatbot serves a certain purpose: to sign up the user ✅
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 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 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 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 8
HOW does my Chatbot look like: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 9
Chatbot is a simple state machine: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 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 11
Because… ⤵ • Easy to change the experience without coding: • via content/marketing system • or even by a non-programmer 👉 If the whole experience is described in the data structure: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 12
Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 13 Props in the data object:
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 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 15 By triggering the proper transitions when certain user interactions happen
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 16
…then this action will be handled by reducer: • The currentState will be replaced by the new state (nextState) from the action • The previous state will be stored in the history array Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 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 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 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 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 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 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 23
The full reducer implementation for the chatbot: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 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 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 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 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 28 👉 name, email, usageFor, relatedUpdates
Event handlers to add and confirm user input: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 29
DEMO
Thank you! ☺ @ilonacodes ilonacodes.com Conversational Sign Up with Chatbot-like experience with React and Redux github.com/ilonacodes/chatbot-signup

More Related Content

Ilona Demidenko - Conversational Sign Up - Codemotion Amsterdam 2019

  • 1. Conversational Sign Up with Chatbot- like experience with React and Redux Ilona Demidenko @ilonacodes Amsterdam | April 2-3, 2019
  • 2. Conversational Sign Up with Chatbot-like experience with React and Redux 2Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes
  • 3. 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 3
  • 4. 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 4 My Chatbot serves a certain purpose: to sign up the user ✅
  • 5. 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 5
  • 6. 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 6
  • 7. …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 7
  • 8. 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 8
  • 9. HOW does my Chatbot look like: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 9
  • 10. Chatbot is a simple state machine: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 10
  • 11. …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 11
  • 12. Because… ⤵ • Easy to change the experience without coding: • via content/marketing system • or even by a non-programmer 👉 If the whole experience is described in the data structure: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 12
  • 13. Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 13 Props in the data object:
  • 14. 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 14
  • 15. 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 15 By triggering the proper transitions when certain user interactions happen
  • 16. 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 16
  • 17. …then this action will be handled by reducer: • The currentState will be replaced by the new state (nextState) from the action • The previous state will be stored in the history array Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 17
  • 18. …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 18
  • 19. 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 19
  • 20. 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 20
  • 21. 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 21
  • 22. 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 22
  • 23. 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 23
  • 24. The full reducer implementation for the chatbot: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 24
  • 25. 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 25
  • 26. 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 26
  • 27. 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 27
  • 28. 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 28 👉 name, email, usageFor, relatedUpdates
  • 29. Event handlers to add and confirm user input: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 29
  • 30. DEMO
  • 31. Thank you! ☺ @ilonacodes ilonacodes.com Conversational Sign Up with Chatbot-like experience with React and Redux github.com/ilonacodes/chatbot-signup