スマートフォンアプリにFAQサイトを埋め込む

読了時間：約 8 分

ヘルプドッグで作成したヘルプセンターは、スマートフォンおよびタブレット向けのアプリにWebView形式で表示することができます。

Flutterによるサンプルコード

以下の例は、webview_flutter を利用してアプリからヘルプセンターを呼び出す参考コードです。

JavaScriptを有効にしてください

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HelpdogWebView extends StatelessWidget {
  const HelpdogWebView({super.key});
  @override
  Widget build(BuildContext context) {
    final controller =
        WebViewController()
          ..loadRequest(Uri.parse('https://help.helpdog.ai/hc/helpdog/ja/')) // このURLを変更してください
          ..setJavaScriptMode(JavaScriptMode.unrestricted) // JavaScriptの有効化が必要です
          ..setBackgroundColor(Colors.black)
          ..setNavigationDelegate(
            NavigationDelegate(
              onProgress: (int progress) {
                log('progress: $progress');
              },
              onPageStarted: (String url) {
                log('page started: $url');
              },
              onPageFinished: (String url) {
                log('page finished: $url');
              },
              onWebResourceError: (WebResourceError error) {
                log('error: $error');
              },
              onNavigationRequest: (NavigationRequest request) {
                return NavigationDecision.navigate;
              },
            ),
          );
    return Scaffold(
      appBar: AppBar(title: const Text('Helpdog Webview')),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: WebViewWidget(controller: controller)),
            SizedBox(
              height: 50,
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {
                        controller.goBack();
                      },
                      icon: const Icon(Icons.arrow_back_ios),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {
                        controller.goForward();
                      },
                      icon: const Icon(Icons.arrow_forward_ios),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {
                        controller.reload();
                      },
                      icon: const Icon(Icons.replay),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意点

現時点では、アプリ用に表示をカスタマイズする機能（ヘッダーやフッターを非表示にするなど）はありません。
分析データのために同一ユーザーをトラッキングしたい場合、Cookie、LocalStorageを永続化することを検討してください。