Streamlining User Onboarding with Roozna Searchbar

Discover how the Roozna Searchbar can significantly enhance your user onboarding process, making it faster and more user-friendly for new customers to set up their accounts with accurate company information.

The Challenge

When new users sign up for your SaaS platform, you need accurate company information to personalize their experience, set up billing, and provide relevant features. Manual data entry is time-consuming and error-prone, leading to frustration and potential drop-offs during onboarding.

The Solution

By integrating the Roozna Searchbar into your onboarding flow, you can:

Dramatically reduce the time it takes for users to input company details
Ensure data accuracy by pulling information from Roozna's extensive business database
Create a sleek, professional look that matches your application's design
Improve accessibility and user experience across devices

Let's walk through an example of how to implement this solution:

import React, { useState } from 'react';
import { Searchbar } from '@roozna/react-search';

function OnboardingForm() {
  const [companyData, setCompanyData] = useState(null);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    jobTitle: '',
  });

  const handleCompanySelect = (company) => {
    setCompanyData(company);
    // Pre-fill the company name if it's not already filled
    if (!formData.name) {
      setFormData(prev => ({ ...prev, name: company.name }));
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Combine user input with selected company data
    const fullData = {
      ...formData,
      company: companyData,
    };
    // Send this data to your backend or perform further actions
    console.log('Submitting:', fullData);
  };

  return (
    <div className="onboarding-container">
      <h1>Welcome to Our Platform</h1>
      <p>Let's get your account set up in just a few steps!</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="companySearch">Find your company:</label>
          <Searchbar
            apiKey="your_roozna_api_key_here"
            onSelect={handleCompanySelect}
            placeholderText="Search for your company..."
            size="lg"
            width="100%"
            theme="light"
            styles={{
              container: { marginBottom: '1rem' },
              input: { fontSize: '16px', padding: '12px 16px' },
            }}
          />
        </div>

        {companyData && (
          <div className="company-info">
            <h3>Selected Company:</h3>
            <p><strong>{companyData.name}</strong></p>
            <p>Website: {companyData.website}</p>
            {/* Display other relevant company information */}
          </div>
        )}

        <div className="form-group">
          <label htmlFor="name">Your Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="email">Work Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="jobTitle">Job Title:</label>
          <input
            type="text"
            id="jobTitle"
            name="jobTitle"
            value={formData.jobTitle}
            onChange={handleInputChange}
            required
          />
        </div>

        <button type="submit" className="submit-button">
          Complete Sign Up
        </button>
      </form>
    </div>
  );
}

export default OnboardingForm;