Cómo funciona
El quiz es una página web, así que dentro de una app nativa se abre con un WebView, el componente de navegador integrado que existe tanto en React Native como en Flutter.
El script y el código del botón que se pegan en un sitio web aquí no sirven: están pensados para una página con DOM. En la app se usa el enlace directo del quiz.
El script y el código del botón que se pegan en un sitio web aquí no sirven: están pensados para una página con DOM. En la app se usa el enlace directo del quiz.
Copia el enlace directo del quiz
En el editor del quiz abre «Publicación», elige el modo «Enlace directo» y pulsa «Copiar». La dirección tiene esta forma:
https://quiz.leadforms.ru/8233, donde 8233 es el número de tu quiz.
React Native
Instala el paquete
react-native-webview y abre el enlace en una pantalla propia: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 y domStorageEnabled son obligatorios: sin ellos el quiz no funciona, porque está construido íntegramente en JavaScript.Flutter
Agrega el paquete
webview_flutter a pubspec.yaml y abre el quiz en una pantalla: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 es obligatorio: por defecto el WebView trae JavaScript desactivado y el quiz no arranca.Permiso de internet en Android
Comprueba que en
android/app/src/main/AndroidManifest.xml está esta línea:<uses-permission android:name="android.permission.INTERNET" />
Normalmente ya está. Si falta, el WebView muestra una pantalla en blanco sin ningún error y cuesta dar con la causa.
En iOS no hace falta nada especial: el quiz se sirve por HTTPS y no le afectan las restricciones de App Transport Security.
En iOS no hace falta nada especial: el quiz se sirve por HTTPS y no le afectan las restricciones de App Transport Security.
Cómo abrir el quiz con un botón
La pantalla del WebView se abre como cualquier otra: en React Native, con la navegación (
Si lo quieres encima de la pantalla actual en lugar de como página aparte, ábrelo en una ventana modal: en React Native con
navigation.navigate); en Flutter, con Navigator.push.Si lo quieres encima de la pantalla actual en lugar de como página aparte, ábrelo en una ventana modal: en React Native con
<Modal> con el WebView dentro; en Flutter, con showModalBottomSheet o showDialog.Qué tener en cuenta
• Los leads llegan igualque desde la web: al panel y a las integraciones conectadas.
• La analítica dentro de la app se mide de otra forma. Google Analytics y los píxeles publicitarios se comportan en un WebView de forma distinta que en el navegador: algunos eventos pueden no llegar y el origen del tráfico se detecta con menos precisión. Si la analítica del quiz te importa, contrástala con los informes internos de la sección «Analítica» del panel.
• El enlace también se puede abrir en el navegador del teléfono : entonces el quiz aparece en una ventana aparte sobre la app. Es más sencillo, pero la persona sale de tu aplicación.
• La analítica dentro de la app se mide de otra forma. Google Analytics y los píxeles publicitarios se comportan en un WebView de forma distinta que en el navegador: algunos eventos pueden no llegar y el origen del tráfico se detecta con menos precisión. Si la analítica del quiz te importa, contrástala con los informes internos de la sección «Analítica» del panel.
• El enlace también se puede abrir en el navegador del teléfono : entonces el quiz aparece en una ventana aparte sobre la app. Es más sencillo, pero la persona sale de tu aplicación.
¿No te sale la configuración?
Si algo no funciona, puedes y lo resolvemos contigo.