Как это работает
Квиз — это веб-страница, поэтому в нативном приложении он открывается через WebView: встроенный браузерный компонент, который есть и в React Native, и во Flutter.
Скрипт и код кнопки, которые вставляют на сайт, здесь не нужны — они рассчитаны на страницу с DOM. В приложении используется прямая ссылка на квиз.
Скрипт и код кнопки, которые вставляют на сайт, здесь не нужны — они рассчитаны на страницу с DOM. В приложении используется прямая ссылка на квиз.
Скопируйте прямую ссылку на квиз
В редакторе квиза откройте «Публикация», выберите способ размещения «Прямая ссылка» и нажмите «Копировать». Адрес выглядит так:
https://quiz.leadforms.ru/8233, где 8233 — номер вашего квиза.
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 он не попадает.
Для iOS отдельных настроек не нужно: квиз отдаётся по HTTPS, под ограничения App Transport Security он не попадает.
Как открывать квиз по кнопке
Экран с WebView открывается как любой другой: в React Native — через навигацию (
Если квиз нужен поверх текущего экрана, а не отдельной страницей, откройте его в модальном окне: в React Native это
navigation.navigate), во Flutter — через Navigator.push.Если квиз нужен поверх текущего экрана, а не отдельной страницей, откройте его в модальном окне: в React Native это
<Modal> с WebView внутри, во Flutter — showModalBottomSheet или showDialog.Что учесть
• Заявки приходят так же, как с сайта — в личный кабинет и в подключённые интеграции.
• Аналитика внутри приложения считается иначе. Яндекс.Метрика, Google Analytics и пиксели работают в WebView не так, как в браузере: часть событий может не долетать, а источник трафика определяется неточно. Если для вас важна аналитика по квизу — сверяйтесь с внутренними отчётами в разделе «Аналитика» личного кабинета.
• Ссылку можно открыть и во внешнем браузере — тогда квиз откроется отдельным окном поверх приложения. Так проще, но пользователь уходит из приложения.
• Аналитика внутри приложения считается иначе. Яндекс.Метрика, Google Analytics и пиксели работают в WebView не так, как в браузере: часть событий может не долетать, а источник трафика определяется неточно. Если для вас важна аналитика по квизу — сверяйтесь с внутренними отчётами в разделе «Аналитика» личного кабинета.
• Ссылку можно открыть и во внешнем браузере — тогда квиз откроется отдельным окном поверх приложения. Так проще, но пользователь уходит из приложения.
Не получается настроить?
Если что-то не получается, вы можете — поможем разобраться.