Главная Инструкции Мобильное приложение

Как добавить квиз в мобильное приложение?

Инструкция для внедрения квиза в приложение на React Native и Flutter
Как это работает
Квиз — это веб-страница, поэтому в нативном приложении он открывается через WebView: встроенный браузерный компонент, который есть и в React Native, и во Flutter.
Скрипт и код кнопки, которые вставляют на сайт, здесь не нужны — они рассчитаны на страницу с DOM. В приложении используется прямая ссылка на квиз.
Скопируйте прямую ссылку на квиз
В редакторе квиза откройте «Публикация», выберите способ размещения «Прямая ссылка» и нажмите «Копировать». Адрес выглядит так: https://quiz.leadforms.ru/8233, где 8233 — номер вашего квиза.
Вкладка «Публикация» в LeadForms: прямая ссылка на квиз и кнопка копирования
React Native
Установите пакет react-native-webview и откройте ссылку отдельным экраном:
npm install react-native-webview
cd ios && pod install && cd ..
import React from 'react'
import { WebView } from 'react-native-webview'

const QUIZ_URL = 'https://quiz.leadforms.ru/8233'

export default function QuizScreen() {
  const source = { uri: QUIZ_URL }

  return (
    <WebView
      source={source}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      startInLoadingState={true}
    />
  )
}
javaScriptEnabled и domStorageEnabled обязательны: без них квиз не отработает — он целиком построен на JavaScript.
Flutter
Добавьте пакет webview_flutter в pubspec.yaml и откройте квиз экраном:
flutter pub add webview_flutter
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

const quizUrl = 'https://quiz.leadforms.ru/8233';

class QuizScreen extends StatefulWidget {
  const QuizScreen({super.key});

  @override
  State<QuizScreen> createState() => _QuizScreenState();
}

class _QuizScreenState extends State<QuizScreen> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(quizUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: WebViewWidget(controller: controller)),
    );
  }
}
JavaScriptMode.unrestricted обязателен — по умолчанию JavaScript в WebView выключен, и квиз не запустится.
Разрешение на интернет для Android
Проверьте, что в android/app/src/main/AndroidManifest.xml есть строка:
<uses-permission android:name="android.permission.INTERNET" />
Обычно она уже стоит. Если её нет, WebView покажет пустой экран без ошибки — и причину найти сложно.
Для iOS отдельных настроек не нужно: квиз отдаётся по HTTPS, под ограничения App Transport Security он не попадает.
Как открывать квиз по кнопке
Экран с WebView открывается как любой другой: в React Native — через навигацию (navigation.navigate), во Flutter — через Navigator.push.
Если квиз нужен поверх текущего экрана, а не отдельной страницей, откройте его в модальном окне: в React Native это <Modal> с WebView внутри, во Flutter — showModalBottomSheet или showDialog.
Что учесть
Заявки приходят так же, как с сайта — в личный кабинет и в подключённые интеграции.
Аналитика внутри приложения считается иначе. Яндекс.Метрика, Google Analytics и пиксели работают в WebView не так, как в браузере: часть событий может не долетать, а источник трафика определяется неточно. Если для вас важна аналитика по квизу — сверяйтесь с внутренними отчётами в разделе «Аналитика» личного кабинета.
Ссылку можно открыть и во внешнем браузере — тогда квиз откроется отдельным окном поверх приложения. Так проще, но пользователь уходит из приложения.
Не получается настроить?
Если что-то не получается, вы можете — поможем разобраться.

Остались вопросы? Напишите нам

Имя *
* Обязательно к заполнению
e-mail *
* Обязательно к заполнению
Сообщение
Напишите нам!
Ответим в течение 30 секунд