About Campaigner
Campaigner is a powerful email marketing platform that enables businesses to automate email workflows, configure targeted campaigns, and streamline communication with their audience. Trusted by businesses worldwide, Campaigner offers advanced tools to create, manage, and optimize email marketing campaigns with ease.
The challenge
Campaigner’s goal was to simplify the process of integrating Webflow forms into their email campaigns. They needed a solution that would enable Webflow users to seamlessly connect and disconnect forms to specific email campaigns without requiring technical expertise.
The challenge lay in designing a user-friendly interface for the Webflow Designer while handling complex backend logic to facilitate smooth data flow between Webflow and Campaigner.
The solution needed to:
- Enable seamless form connections to email campaigns
- Automate form submission processing for email collection
- Maintain Campaigner’s robust automation and workflow features
- Handle relationships between multiple users, Webflow sites, and email campaigns
.png)
.png)
Our approach
Flowout partnered with Moz Group, Campaigner’s parent company, to design and develop a solution that met their requirements. We started by outlining the user journey and identifying core functionalities needed for the integration. With a focus on simplicity and reliability, we built a solution comprising a backend middleware and a Webflow Designer app.
Key steps:
- Backend middleware:
- Built with Laravel, the middleware acted as the backbone of the integration.
- Managed relationships between users, Webflow sites, and forms.
- Tracked form connections to specific email campaigns.
- Processed form submission webhooks from Webflow sites, preparing data for Campaigner campaigns.
- Handled secure authentication between the Campaigner API and the Webflow app.
- Webflow Designer app:
- Developed using Vue.js 3 to ensure a smooth and responsive user experience.
- Included a dashboard for managing Campaigner email campaigns, such as creating, editing, and syncing email data.
- Styled to align with Webflow’s design guidelines, ensuring consistency in element shapes, colors, margins, and paddings.
- Collaboration:
- Worked closely with the Campaigner team to refine the app’s feature set.
- Iterated on design prototypes using Figma to ensure usability and alignment with Webflow’s environment.
.png)
Key features of the Campaigner integration
Form-to-campaign connection
Effortlessly link Webflow forms to specific Campaigner email campaigns directly within the Webflow Designer.
Webhook processing
Middleware automatically processes Webflow form submissions, preparing data for Campaigner’s email workflows.
User-friendly dashboard
Manage email campaigns, edit settings, and sync previous submissions from a centralized dashboard.
Multi-site support
Track and manage forms across multiple Webflow sites, ensuring scalability for users with complex setups.
Secure authentication
Seamlessly connect the Webflow Designer app with Campaigner accounts using OAuth-based authentication.
Custom styling
Aligns with Webflow’s design guidelines, offering a familiar and intuitive interface for Webflow users.
The results
The Campaigner-Webflow integration transformed how users connect their Webflow forms to email campaigns. By enabling seamless form connections and automating data processing, the app significantly reduced manual effort, saving users time and improving workflow efficiency.
For Campaigner, the integration enhanced their platform’s value proposition, making it more attractive to Webflow users.
.png)
.png)
Why us?
Flowout’s extensive experience in developing custom Webflow apps and integrations made us the ideal partner for Campaigner. With a portfolio that includes integrations for platforms like Zapier, Stripe, and Frontify, we have mastered the art of creating user-friendly and scalable solutions. Our standardized development stack (Laravel, Vue.js, Tailwind) and iterative design process ensure rapid delivery without compromising quality.
