スマートフォンアプリに埋め込む

読了時間：約 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://helpdog.ai/hc/nocoinc/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を永続化することを検討してください。