Chatbot

WBS coding school final project created by Davide Cravero.

Description

This App simulates a conversation between a Customer support agent and a User.

Its goal is to help and guide customers to solve their request.

The Chatbot is a Web application, part of a cosmetics and personal Care Products e-commerce, The chatbot uses funnel questions in order to get the customers’ query. The User will have to choose one of the 4 different topics: Orders, Shipping, Returns, Refund.

Once the User type or click on the selected topic, the Chatbot will display the related subtopics. At this point the User can select the subtopic needed so the chatbot will display the correct information.

All the text dialogs displayed in this app are fetched from Contentful API.

On my Contentful account I created a 'Content Model' with 3 fields:

a 'text' field, a 'keyword' field and a 'rich text' field.

The rich text is linked to the keyword, where the keyword is the topic and the rich text is the chatbot reply displayed in the app.

Thanks to this connection with Contentful API, we can control all the text content displayed in the App, we can easily customize the conversation, and even change the behaviour of the chatbot.

See it live:

https://chatbotwbs.herokuapp.com/

Stack

Node.js;
REACT.JS (User Interface) using functional components;
Npm dependancies: react-chatbot-kit (https://github.com/FredrikOseberg/react-chatbot-kit);
JS/JSX: App logic;
CSS: external styling;
Contentfull: API for the Chatbot dialogs (https://www.contentful.com);
GIT/GITHUB: version control;
Heroku: App deployment (https://chatbotwbs.herokuapp.com/);

How to run locally

System requirements: Node.js;
Yarn for macOS users you can install Yarn via Homebrew
Clone it to your local repo;
Run "yarn install" to install Yarn dependencies;
Run "yarn start" to run local server;