This project provided another significant opportunity where I stepped up as the main developer, and created an MVP for an AI tool's brand site.
The client's design requirements for the site were minimalistic, yet the functional demands were extensive, necessitating advanced custom solutions.
The project required integrating JavaScript to enable texting functionalities targeted at mobile users, specifically iPhone users, pseudo-authentication for certain site features, Stripe for payment processing, and Meta and TikTok pixels for enhanced marketing capabilities. These elements were beyond the standard offerings of Webflow, demanding innovative, custom-coded solutions.
Authentication in Webflow
The first challenge came with authentication.
Given the nature of the subscription and texting service, my client wanted to restrict access to certain features and demos on the site through some form of user authentication.
Typically, this would involve creating a user database and managing login credentials. However, aiming for a simpler and less intrusive user experience, the client preferred not to require visitors to set up accounts. This posed a unique challenge as Webflow does not natively support such a form of authentication without external integrations like Firebase or managing cookies for user sessions.
Regex Validation
I proposed we authenticate user INPUT over CREDENTIALS.
I implemented a regex-based validation system that checks the validity of the phone numbers entered. Here’s how it works:
- A user who expresses interest in trying the texting feature is prompted to enter their phone number in order to interact with the element
- The phone number is validated through a regex, and if it passes, the element becomes interactable
- The valid phone number is used in a script to initiate an SMS text, letting them demo the product
This solution effectively balanced the need for feature restriction with user-friendly access, leveraging custom coding to bridge the gap in Webflow’s native capabilities.
JavaScript. A lot of it.
This project was by far the most code-intensive I had ever undertaken, involving a complex set of custom scripts for diverse functionalities—from user input validation, SMS texting capabilities, to tracking user interactions with Pixel implementation and managing UTM parameters.
The primary challenge was ensuring all these scripts worked harmoniously without conflicts, maintained high performance, and were scalable.
Additionally, maintaining clean, organized code that could be easily updated or debugged posed a significant challenge given the volume and complexity of the scripting required. Webflow even has limitations on the amount of custom code you can write per page (I discovered this the hard way when I hit the limit a few times).
Strategy Implementing
I utilized the following strategies to achieve my goals:
- Organized Coding: I organized my code through experience in my Coding bootcamp - sequentially organizing code (by order of appearance), with clear syntax and comments
- Continuous Optimization and Review: I refined the codebase, eliminating redundant code and consolidating functions
- Proactive Testing: I conducted proactive testing after each update to prevent disruptions and maintain stability
- Detailed Documentation: I utilized a changelog and checklist for easy collaboration with my client
One of the most rewarding aspects of this project was the opportunity to dive deep into the intricacies of custom scripting and its integration into a web development framework like Webflow.
Managing such a variety of scripts—from SMS functionalities to pixel tracking and user authentication—challenged me to think creatively and systematically about code architecture.
It was immensely gratifying to see all these components work seamlessly together, enhancing the site's functionality and user experience. This project not only honed my technical skills but also boosted my confidence in managing complex web development tasks. It underscored the importance of thoughtful coding practices and proactive problem-solving, lessons that I will carry forward in my future projects.