Introduction
When designing SaaS applications, platform dependency can create friction for users. In our case, we built a campaign management tool that integrates with platforms like WordPress and Ghost. This allowed users to fetch articles, generate inline or popup campaigns, and collect responses seamlessly.
But what about users who don’t use these platforms or prefer more flexibility?
This article explores how we extended our SaaS solution to allow users to create campaigns directly from an article URL without relying on platform integrations. Along the way, we’ll dive into the tools, technologies, and challenges we encountered to inspire developers working on similar problems.
The Problem
Our initial implementation required users to connect their WordPress or Ghost accounts. Once connected, they could fetch articles, generate AI-powered or custom questions, and create campaigns that could be embedded in their websites.
This worked well for platform-connected users, but a significant gap existed:
- Unconnected Users: Users who weren’t using WordPress or Ghost had no way to create campaigns.
- Flexibility Issues: Users wanted a way to embed campaigns on any platform or website with minimal setup.
To address these issues, we needed to decouple our campaign generation process from platform integrations.
The Solution
We implemented a system that enables users to:
- Generate Campaigns from Article Links:
- Users can paste any article URL into the platform.
- Using AI, we extract the article’s metadata (title, content, author) and automatically generate relevant questions.
- Customize Campaigns:
- Users can edit AI-generated questions or create their own from scratch.
- Additional campaign customization options include styling, layouts (inline or popup), and response tracking.
- Embed Campaigns Anywhere:
- The platform generates an embeddable <iframe> link for the campaign, which users can use on any website.
- Embedded campaigns are dynamically linked to our platform, allowing users to edit campaigns in real-time.
Technologies and Tools
- Next.js:
- We used Next.js for building the SaaS application, leveraging its API routes for article processing and question generation.
- OpenAI API:
- OpenAI’s GPT models were used to analyze article content and generate relevant, engaging questions automatically.
- React and Recoil:
- React powered our front-end, while Recoil managed the campaign state, enabling real-time edits and syncing for embedded campaigns.
- ing for embedded campaigns.
Key Challenges and Solutions
- Decoupling Campaigns from Platforms
- Challenge: Allowing campaign creation without requiring platform connections while maintaining a seamless experience.
- Solution: Introduced an article URL input flow. The AI analyzes the URL content, generates metadata and questions, and feeds them directly into the campaign creation pipeline.
- Dynamic Campaign Embedding with Real-Time Updates
- Challenge: Ensuring campaigns embedded via <iframe> could be updated dynamically after creation.
- Solution: Each campaign is tied to a unique campaign ID. Campaign settings and questions are stored in a central database, allowing real-time edits through our platform that reflect in the embedded version.
- Seamless AI Integration
- Challenge: Generating accurate, relevant questions from diverse article content without user input.
- Solution: Fine-tuned the AI prompt to extract key ideas from the article’s metadata and content, ensuring generated questions align with the context.
Implementation Walkthrough
Here’s a high-level breakdown of the implementation:
- Fetching Article Content
- Users paste an article URL into the campaign creator.
- We use fetch() to retrieve the article's HTML content.
- Generating AI Questions
The extracted content is sent to the OpenAI API with a prompt like:
javascript
The API returns context-specific questions, which users can refine or replace.
- Creating an Embeddable Campaign
Once the campaign is finalized, we generate a unique campaign ID and embed URL:
html
- The embedded campaign dynamically fetches its configuration, ensuring it always reflects the latest edits made through the platform.
- Monitoring Campaign Responses
- Campaign responses are collected in real-time and made available via:
- A downloadable CSV file.
- Scheduled email reports summarizing key metrics.
Results and Benefits
- Platform Independence: Users can now create campaigns for any article, regardless of the hosting platform.
- AI-Driven Simplicity: Automatic question generation reduces user effort and streamlines the campaign setup process.
- Dynamic Embedding: The <iframe> approach allows users to embed campaigns seamlessly and update them without re-embedding.
Takeaways for Developers
- Think Beyond Integrations: Adding flexibility for non-platform-specific use cases broadens the appeal of SaaS applications.
- Leverage AI for Usability: Automating repetitive tasks like question generation enhances the user experience and saves time.
- Design for Real-Time Updates: Embedding dynamic components with centralized data makes it easy to deliver editable and scalable solutions.
Conclusion
By decoupling our campaign creation process from platform integrations, we created a more flexible and accessible SaaS solution. Whether users connect to WordPress, Ghost, or simply provide an article URL, they can now generate campaigns effortlessly and embed them anywhere.
For developers building SaaS platforms, this approach highlights the value of flexibility, AI-driven automation, and real-time updates.
If you’ve worked on similar challenges or have thoughts on enhancing SaaS solutions, feel free to share your ideas or ask questions below!