Реалізація In-App Survey (опитування всередині застосунку) на сайті

Реалізація вбудованих опитувань на веб-сайті

Вбудоване опитування (in-app survey) з'являється прямо в інтерфейсі продукту у відповідь на дію користувача, а не в окремому листі. Конверсія на відповідь вища, ніж у поштових опитувань, тому що користувач знаходиться в контексті взаємодії.

Архітектура системи опитувань

Універсальна система: опитування зберігаються в БД з умовами показу, рушій на фронтенді вирішує — показувати чи ні.

// Схема таблиць
Schema::create('surveys', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('trigger_event');        // 'feature_used', 'upgrade_cancelled', 'idle_30_days'
    $table->json('trigger_conditions');     // {"min_sessions": 3, "plan": ["pro", "enterprise"]}
    $table->integer('delay_seconds')->default(0);
    $table->integer('cooldown_days')->default(30);
    $table->boolean('is_active')->default(true);
    $table->timestamps();
});

Schema::create('survey_questions', function (Blueprint $table) {
    $table->id();
    $table->foreignId('survey_id')->constrained()->cascadeOnDelete();
    $table->text('text');
    $table->enum('type', ['single_choice', 'multi_choice', 'text', 'scale', 'nps']);
    $table->json('options')->nullable();
    $table->integer('order')->default(0);
});

Schema::create('survey_responses', function (Blueprint $table) {
    $table->id();
    $table->foreignId('survey_id')->constrained();
    $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
    $table->json('answers');                // {"q_1": "option_a", "q_2": "Great product"}
    $table->string('trigger_event')->nullable();
    $table->timestamps();
});

API: отримання актуального опитування

class SurveyController extends Controller
{
    public function getForEvent(Request $request): JsonResponse
    {
        $event = $request->input('event');
        $user  = auth()->user();

        $survey = Survey::where('trigger_event', $event)
            ->where('is_active', true)
            ->get()
            ->first(function ($survey) use ($user) {
                // Перевіряємо cooldown
                $lastResponse = SurveyResponse::where('survey_id', $survey->id)
                    ->where('user_id', $user->id)
                    ->latest()->first();

                if ($lastResponse && $lastResponse->created_at->diffInDays(now()) < $survey->cooldown_days) {
                    return false;
                }

                // Перевіряємо умови
                $conditions = $survey->trigger_conditions;
                if (isset($conditions['plan']) && !in_array($user->plan, $conditions['plan'])) {
                    return false;
                }

                return true;
            });

        if (!$survey) return response()->json(null);

        return response()->json([
            'id'        => $survey->id,
            'delay'     => $survey->delay_seconds,
            'questions' => $survey->questions()->orderBy('order')->get(),
        ]);
    }

    public function submit(Request $request, Survey $survey): JsonResponse
    {
        SurveyResponse::create([
            'survey_id'     => $survey->id,
            'user_id'       => auth()->id(),
            'answers'       => $request->input('answers'),
            'trigger_event' => $request->input('event'),
        ]);

        return response()->json(['success' => true]);
    }
}

Frontend: SurveyWidget

// hooks/useSurvey.ts
export function useSurvey(event: string) {
  const [survey, setSurvey] = useState<Survey | null>(null);

  const triggerEvent = useCallback(async () => {
    const data = await fetch(`/api/surveys/for-event?event=${event}`).then(r => r.json());
    if (!data) return;

    // Показуємо з затримкою
    setTimeout(() => setSurvey(data), data.delay * 1000);
  }, [event]);

  return { survey, triggerEvent, dismiss: () => setSurvey(null) };
}

// Використання в компоненті функції
function FeatureComponent() {
  const { survey, triggerEvent, dismiss } = useSurvey('feature_export_used');

  useEffect(() => {
    // Тригер після успішного експорту
    triggerEvent();
  }, []);

  return (
    <>
      <FeatureUI />
      {survey && <SurveyModal survey={survey} onClose={dismiss} />}
    </>
  );
}

SurveyModal з динамічними типами запитань

function SurveyModal({ survey, onClose }: SurveyModalProps) {
  const [answers, setAnswers] = useState<Record<string, any>>({});
  const [step, setStep]       = useState(0);

  const currentQuestion = survey.questions[step];
  const isLast          = step === survey.questions.length - 1;

  const submit = async () => {
    await fetch(`/api/surveys/${survey.id}/submit`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers, event: survey.trigger_event }),
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/30 flex items-end sm:items-center justify-center p-4 z-50">
      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
        <div className="flex justify-between mb-4">
          <span className="text-xs text-gray-400">{step + 1} / {survey.questions.length}</span>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">✕</button>
        </div>

        <QuestionRenderer question={currentQuestion} value={answers[currentQuestion.id]}
          onChange={val => setAnswers(prev => ({ ...prev, [currentQuestion.id]: val }))} />

        <div className="flex justify-end mt-4">
          <button onClick={isLast ? submit : () => setStep(s => s + 1)}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
            {isLast ? 'Надіслати' : 'Далі'}
          </button>
        </div>
      </div>
    </div>
  );
}

Графік

Система вбудованих опитувань з динамічними умовами, збереженням відповідей і React-віджетом: 4-6 робочих днів.