DEV Community

Denis
Denis

Posted on

Build User Onboarding Tours in Minutes with OnboardFlow Architect, Built by AI Agents

#node #javascript #ai #opensource

OnboardFlow Architect: Revolutionizing User Onboarding, Built by AI Agents

In the world of web applications, first impressions are paramount. Effective onboarding of new users can make the difference between an application's success and abandonment. But crafting interactive user tours can be a time-consuming and complex task for developers and designers. That's why at Pixel Office, we embarked on building OnboardFlow Architect, a powerful visual tool that simplifies this process, and best of all, it was built by our AI agents, Jan (the coder) and Klára (the designer).

The Technical Challenge: Simplifying a Complex Task

Our goal was to create a tool that would empower anyone – from product managers to developers – to visually design and generate code for interactive user onboarding tours. This meant combining an intuitive user interface with a robust code generator that would be compatible with modern frontend frameworks. Jan and Klára eagerly took on this challenge.

Klára, Our AI Designer, the UX Visionary

Klára focused on a seamless user experience. She designed the drag-and-drop interface where users can easily add and reorder tour steps, define custom messages, specify target UI elements using CSS selectors, and set up progression logic. The emphasis was on visual feedback and a real-time preview, allowing users to instantly see how their tour would look.

Jan, Our AI Developer, the Code Maestro

Once Klára finalized the designs, Jan jumped into implementation. His task was to translate Klára's visual concepts into functional, optimized, and easily integrable code. Jan architected a system that efficiently processes user inputs and generates clean HTML, CSS, and JavaScript snippets. These snippets are designed to be seamlessly integrated into any web application, regardless of the frontend framework used.

"Implementing the core logic for the OnboardFlow Architect widget itself, especially the dynamic Firebase authentication and the multilingual i18n setup for its interface elements, was an interesting challenge. It ensures the builder is universally accessible, while the generated tour code also supports multi-language content, making it truly global-ready," says Jan.

Here’s a glimpse of the initialization code snippet our widget uses internally for its operation:

        const WIDGET_SLUG = "onboardflow-architect";
        const FIREBASE_API_KEY = "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly"; // Use the provided fake key
        const PIXELOFFICE_API_BASE = "https://api.pixeloffice.eu/api/pay";
        const WHATSAPP_PHONE = "420607450436";
        const INITIAL_FREE_USES = 3;

        // Firebase Initialization
        const firebaseConfig = {
            apiKey: FIREBASE_API_KEY,
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        let auth;
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
            auth = firebase.auth();
        } else {
            auth = firebase.auth(); // app already initialized
        }

        const i18n = {
            en: {
                widgetTitle: "O
// ... and other multi-language translations
Enter fullscreen mode Exit fullscreen mode

Quality Assurance by Martin and Deployment by Tomáš

After intense development, the testing phase began. Martin (our AI QA engineer) meticulously verified the functionality, stability, and user-friendliness of OnboardFlow Architect to ensure a flawless experience. Once the tool was ready, Tomáš (our AI DevOps specialist) executed a seamless deployment to make OnboardFlow Architect available to everyone.

Key Features of OnboardFlow Architect

  • Visual Drag-and-Drop Editor: Easily create and reorder tour steps.
  • Customization: Define messages, target UI elements (CSS selectors), and progression logic.
  • Real-time Preview: Instantly visualize your tour as you build it.
  • Code Generation: Export ready-to-implement HTML, CSS, and JavaScript snippets compatible with popular frontend frameworks.
  • Multi-language Support: Create tours with content for multiple languages (premium feature).
  • Optimized Code Export: Production-ready code for direct integration.

Free vs. Premium

The free version allows users to design up to a 3-step basic tour with limited styling options.

For a symbolic payment of $1.99 (via Stripe), you unlock premium features:

  • Unlimited tour steps.
  • Advanced customization (custom themes, event hooks, delay settings).
  • Multi-language support for tour content.
  • Export of optimized, production-ready code.

Try it Out for Yourself!

Seeing is believing. We invite you to try out OnboardFlow Architect and experience its power firsthand. It's a tool designed to save you hours of development time and help you create engaging onboarding experiences for your users.

Live Demo: Try OnboardFlow Architect now!

Happy tour building!

Top comments (0)