Como funciona
O quiz é uma página web, então dentro de um app nativo ele abre com um WebView, o componente de navegador integrado que existe tanto no React Native quanto no Flutter.
O código da LeadForms que você cola num site não serve aqui: ele foi feito para uma página web. No app, usa-se o link direto do quiz.
O código da LeadForms que você cola num site não serve aqui: ele foi feito para uma página web. No app, usa-se o link direto do quiz.
Copie o link direto do quiz
No editor do quiz, abra a aba “Publicação” → subaba “Link direto” e clique em “Copiar”. O endereço tem este formato:
https://quiz.leadforms.org/8233, onde 8233 é o número do seu quiz.
React Native
Instale o pacote
react-native-webview e abra o link numa tela própria: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.org/8233'
export default function QuizScreen() {
const source = { uri: QUIZ_URL }
return (
<WebView
source={source}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>
)
}
javaScriptEnabled e domStorageEnabled são obrigatórios: sem eles o quiz não funciona, porque é feito inteiramente em JavaScript.Flutter
Adicione o pacote
webview_flutter ao pubspec.yaml e abra o quiz numa tela:flutter pub add webview_flutter
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
const quizUrl = 'https://quiz.leadforms.org/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 é obrigatório: por padrão, o WebView vem com o JavaScript desativado e o quiz não carrega.Permissão de internet no Android
Confira se em
android/app/src/main/AndroidManifest.xml existe esta linha:<uses-permission android:name="android.permission.INTERNET" />
Normalmente ela já está lá. Se faltar, o WebView mostra uma tela em branco sem nenhum erro, e é difícil achar a causa.
No iOS não é preciso nada especial: o quiz é servido por HTTPS e não é afetado pelas restrições do App Transport Security.
No iOS não é preciso nada especial: o quiz é servido por HTTPS e não é afetado pelas restrições do App Transport Security.
Como abrir o quiz com um botão
A tela do WebView abre como qualquer outra: no React Native, com a navegação (
Se quiser o quiz por cima da tela atual, e não como página separada, abra-o numa janela modal: no React Native, com
navigation.navigate); no Flutter, com Navigator.push.Se quiser o quiz por cima da tela atual, e não como página separada, abra-o numa janela modal: no React Native, com
<Modal> e o WebView dentro; no Flutter, com showModalBottomSheet ou showDialog.O que levar em conta
• Os leads chegam do mesmo jeito que pelo site: no painel e nas integrações conectadas.
• A análise dentro do app é medida de outro jeito. O Google Analytics e os pixels de anúncios se comportam num WebView de forma diferente do navegador: alguns eventos podem não chegar e a origem do tráfego é detectada com menos precisão. Se a análise do quiz é importante para você, compare com os relatórios internos da seção “Análise” do painel.
• O link também pode ser aberto no navegador do celular: aí o quiz aparece numa janela separada sobre o app. É mais simples, mas a pessoa sai do seu aplicativo.
• A análise dentro do app é medida de outro jeito. O Google Analytics e os pixels de anúncios se comportam num WebView de forma diferente do navegador: alguns eventos podem não chegar e a origem do tráfego é detectada com menos precisão. Se a análise do quiz é importante para você, compare com os relatórios internos da seção “Análise” do painel.
• O link também pode ser aberto no navegador do celular: aí o quiz aparece numa janela separada sobre o app. É mais simples, mas a pessoa sai do seu aplicativo.
Não está conseguindo configurar?
Se algo não funcionar, você pode e resolvemos juntos.