Documentation

System Architecture

‍Frontend: Webflow (custom HTML, CSS, JavaScript embedded)
Backend: Node.js server hosted on Render
Database: Supabase (planned), temporary local session
Automation/Workflow: n8n (planned)
AI Assistant: OpenAI Assistant API (GPT-4)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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

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/