Início Guias App mobile

Como adicionar o quiz a um app mobile

Como integrar o quiz a um app em React Native ou Flutter
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.
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.
Aba “Publicação” na LeadForms: link direto do quiz e botão de copiar
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.
Como abrir o quiz com um botão
A tela do WebView abre como qualquer outra: no React Native, com a navegação (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.
Não está conseguindo configurar?
Se algo não funcionar, você pode e resolvemos juntos.

Ainda tem dúvidas? Fale com a gente

Nome *
* Campo obrigatório
E-mail *
* Campo obrigatório
Mensagem
Fale com a gente!
Respondemos em 30 segundos