Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Conversational Sign Up with Chatbot-like experience with React and Redux

104 views

Published on

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.

Published in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Conversational Sign Up with Chatbot-like experience with React and Redux

  1. 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. 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. 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. 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. 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. 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. 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. 8. HOW does my Chatbot look like: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 8
  9. 9. Chatbot is a simple state machine: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 9
  10. 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. 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. 12. Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 12 Props in the data object:
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. The full reducer implementation for the chatbot: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 23
  24. 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. 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. 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. 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. 28. Event handlers to add and confirm user input: Conversational Sign Up with Chatbot-like experience with React and Redux | Ilona Demidenko | @ilonacodes 28
  29. 29. DEMO
  30. 30. Thank you! ☺ @ilonacodes ilonacodes.com Conversational Sign Up with Chatbot-like experience with React and Redux github.com/ilonacodes/chatbot-signup

×