ES EN
Home Guides Mobile app

How to add a quiz to a mobile app

How to embed the quiz in a React Native or Flutter app
How it works
The quiz is a web page, so inside a native app it opens in a WebView, the built-in browser component available in both React Native and Flutter.
The script and button code you paste on a website do not work here: they are made for a page with a DOM. In the app, you use the direct quiz link.
Copy the direct quiz link
In the quiz editor, open “Publish”, choose the “Direct link” mode and click “Copy”. The address looks like this: https://quiz.leadforms.ru/8233, where 8233 is your quiz number.
“Publish” tab in LeadForms: the direct quiz link and the copy button
React Native
Install the react-native-webview package and open the link on a separate screen:
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 and domStorageEnabled are required: without them the quiz does not work, because it is built entirely in JavaScript.
Flutter
Add the webview_flutter package to pubspec.yaml and open the quiz on a screen:
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 is required: by default, the WebView has JavaScript turned off and the quiz does not start.
Internet permission on Android
Make sure this line is in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />
It is usually there already. If it is missing, the WebView shows a blank screen with no error, and the cause is hard to find.
On iOS nothing special is needed: the quiz is served over HTTPS and App Transport Security restrictions do not affect it.
How to open the quiz with a button
The WebView screen opens like any other: in React Native, with navigation (navigation.navigate); in Flutter, with Navigator.push.
If you want it on top of the current screen instead of as a separate page, open it in a modal: in React Native, with <Modal> with the WebView inside; in Flutter, with showModalBottomSheet or showDialog.
What to keep in mind
• Leads arrive the same way as from a website: in your dashboard and in the connected integrations.
• Analytics inside the app is measured differently. Google Analytics and ad pixels behave differently in a WebView than in a browser: some events may not arrive, and the traffic source is detected less accurately. If quiz analytics matters to you, compare it with the built-in reports in the “Analytics” section of your dashboard.
• The link can also open in the phone browser: then the quiz appears in a separate window over the app. It is simpler, but the person leaves your app.
Stuck with the setup?
If something does not work, and we will sort it out with you.

Still have questions? Write to us

Name *
* Required field
Email *
* Required field
Message
Write to us!
We reply within 30 seconds