The L’Oréal Chatbot is a branded AI assistant designed to help users explore and understand L’Oréal’s wide range of products—from makeup and skincare to haircare and fragrances. Built with conversational UI in mind, the assistant offers tailored recommendations and routine suggestions in a clean, stylish interface inspired by L’Oréal's brand guidelines.
- Understands casual, vague, or beauty-specific queries using natural language processing (NLP).
- Handles open-ended beauty questions with brand-safe fallback messaging.
- Supports multi-turn conversations and retains session context.
- Offers multilingual responses based on the user's input language.
- Recommends foundations, serums, lipsticks, and more using official L’Oréal tools.
- Adapts suggestions to user concerns like dryness, undertone, or curl type.
- Links users to L’Oréal’s shade matcher, mascara finder, and virtual concierge quizzes.
-Branded loading animation with animated gold rings and fading tagline.
-Typing indicator (animated dots) simulates real-time engagement.
-Clean, mobile-responsive layout built with vanilla JS and CSS.
-Markdown support for rich-text AI replies (bold, links, line breaks).
-Uses official L’Oréal logo, font guidelines, and color palette for cohesive styling.
- HTML, CSS, JavaScript (Vanilla)
- OpenAI API (via secure serverless proxy)
- Cloudflare Workers (for secure API routing)
- Markdown to HTML rendering
- Responsive design with custom CSS animations
This project uses a secure serverless function to handle OpenAI API requests. API keys are never exposed on the client side.
Created by Kezia Grace West, a linguist and creative technologist passionate about inclusive design, conversational AI, and immersive user experiences.
- 🔗 GitHub: @KGwest
- 🎓 Student at UT Arlington, studying Linguistics + Computer Science
GitHub Repo: github.com/KGwest/L-oreal-Chatbot
Live Site: kgwest.github.io/L-oreal-Chatbot/