Overview

This documentation outlines the complete setup, structure, and components used to create and manage the Webflow-integrated chatbot system for Kalam. It serves as a reference for development, maintenance, onboarding, and future scalability.

GitHub Repository

‍Repository URL: https://github.com/kalamcx/chatgpt-webflow-backend
‍Branch: main
‍Deployment Hook: Integrated with Render.com for auto-deploy on push

Render Server

‍Service Name: chatgpt-webflow-backend
‍Primary URL: https://chatgpt-webflow-backend.onrender.com
‍Node Version: 22.16.0
‍Memory Tier: 512MB (upgrade recommended to 2GB for better performance)
‍Port: 10000 (bound automatically by Render)

Environment Variables (.env)

OPENAI_API_KEY=your_openai_key
ASSISTANT_ID=your_assistant_id
PORT=10000

JavaScript (Webflow Frontend)

‍Location: Webflow project (inside custom code block)
Functions:Creates a new thread from server (/create-thread)
Submits user message (/ask)
Displays loading animation (Lottie)
Simulates typing effect
UI for new chat, delete, and suggested questions

CSS

Handled inside Webflow styles.

Custom classes used:

‍.gpt_form-block
.gpt_input
.gpt_content-answer
.gpt_content-line, .is-user, .is-bot
.gpt_nav_new-chat, .gpt_nav_delete-chat, .gpt_stop-icon

OpenAI Assistant API

‍Assistant ID is passed in each request
‍Thread lifecycle managed per session
‍Run lifecycle managed with polling until status: completed
‍Only final assistant reply is shown to user

Future Enhancements (Planned)
✅ Supabase for user authentication, storage, and memory
✅ n8n for workflow automation (e.g., Zoho Desk, Zoho Recruit)
✅ Dynamic content (images, buttons, quick replies)
✅ Sitemap crawling for dynamic knowledge access
✅ Conversation history persistence & analytics dashboard

Overview

This documentation outlines the complete setup, structure, and components used to create and manage the Webflow-integrated chatbot system for Kalam. It serves as a reference for development, maintenance, onboarding, and future scalability.

Contact & Access

‍Developer: Hisham Tawfiq
‍Webflow Project: Kalam.cx/ask-kalam
‍GitHub Repo: https://github.com/kalamcx/chatgpt-webflow-backend
‍Render Dashboard: https://dashboard.render.com/