Tiledesk Developer Hub
WebsiteCommunityTutorialsGet started
  • Introduction
  • Community
  • Ask for Support
  • Public Roadmap and Changelog
  • Tutorials
  • Widget
    • Widget SDK
    • Javascript API: Methods
    • Javascript API: Attributes
    • Javascript API: Listeners/Events
    • Widget Authentication
    • Widget Angular integration
    • Widget React integration
    • Widget for Android with WebView
    • Widget for iOS with WKWebView
    • Widget for Flutter with WebView
    • Widget for React with WebView
    • Widget for Wix Website platform
    • Tutorials
      • Hide widget
      • Show/Hide widget programmatically
      • Force widget loading without user interaction
      • Mobile positioning
      • Custom size (width/height)
      • Installing widget on selected pages
    • Conversation Embedded Apps
      • Payment App Tutorial
      • Prechat form App Tutorial
    • Advanced
      • Preset the Widget on a specific Department
      • Authentication Flow
      • Widget protocol specs
      • Prechat Form JSON specs
      • Prevent multiple conversations
      • Old versions
        • Web SDK v4
  • External Chatbot
    • Introduction
    • Hello World tutorial
    • Chatbot to Human handoff
    • Send Text Buttons
    • Advanced Tutorials
      • Introduction
      • Tutorial 1 - Dialogflow as external chatbot
      • Tutorial 2 - Buttons and images
      • Tutorial 3 - Automatic human handoff with fallback intent
      • Tutorial 4 - Explicit Human handoff with user intent
      • Tutorial 5 - Gracefully handling operating hours during handoff
      • Generate Dialogflow Google Credentials file
    • Rasa tutorials
      • Rasa Tutorial 1 - Rasa as external chatbot
  • Resolution bot
    • Introduction
    • Quickstart
    • Webhook service
    • Rich messages
    • Tutorials
      • Chatbot chooser (multilanguage)
      • Department chooser
      • Order info (webhook)
  • APIs
    • REST APIs
      • Introduction
      • Authentication
      • Requests
      • Leads
      • Messages
      • Activities
      • Projects
      • Team
      • User
      • Analytics
      • Canned responses
      • Tags
      • Events
      • Jwt
      • Labels
      • Images
      • Files
      • Segments
      • Chatbots
      • Knowledge Bases
        • Knowledge Base
        • Contents
        • Question & Answer
      • Management Api
        • Departments
        • Groups
    • NodeJS SDK
    • Webhooks
      • Subscriptions
    • Conversation Messages APIs tips
    • Realtime API
    • JWT Authentication
      • JWT Custom authentication Tutorial
    • Tutorials
      • REST API
        • Sending and receiving messages with Tiledesk APIs
        • PHP Tiledesk REST API example
        • Import multiple messages into Tiledesk using REST APIs from third party app
      • Webhooks
        • Custom Request assignment
        • Request transcript on close
  • Apps
    • Build Custom App - Quick start
    • External Channels integration flow diagram
    • Telegram integration tutorial
  • Dashboard & AgentChat SDK
    • Dashboard SDK
    • Agent Chat SDK
  • Architecture
    • Architecture overview
    • Components list
    • Bot Design diagram
    • Multi Channel Message Flow
  • Installation
    • Installation
    • Running Tiledesk using Docker Compose
    • Running Tiledesk with Kubernetes using Helm
    • Choosing Hardware
  • Configuration
    • Chat21 channel configuration
    • Email parameters and templates configuration
    • Configure the logging system
Powered by GitBook
On this page
  • Integrate Widget for Flutter with WebView
  • Implementation

Was this helpful?

  1. Widget

Widget for Flutter with WebView

PreviousWidget for iOS with WKWebViewNextWidget for React with WebView

Last updated 9 months ago

Was this helpful?

This example shows how to integrate the Tiledesk Widget via a WebView for Flutter.

Integrate Widget for Flutter with WebView

This guide will use the package to implement a Webview, but other similar packages should work with minimal changes to the code.

Implementation

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

class Webview extends StatefulWidget {
  const WebView();

  @override
  ConsumerState<WebView> createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {
  late final _controller = WebViewController();

  @override
  void initState() {
    super.initState();
    unawaited(_initializeController());
  }

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.white,
      child: WebViewWidget(controller: _controller),
    );
  }

  Future<void> _initializeController() async {
    // disable javascript dialog
    await _controller.setOnJavaScriptAlertDialog((request) async {
      return;
    });
    switch (_controller.platform) {
      case final AndroidWebViewController controller:
        await controller.setOnShowFileSelector((params) {
          // implement your logic to show a file picker
          // attachment upload will not work on android unless this is setup
        });
      case final WebKitWebViewController _:
        break;
    }

    await _controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    return _loadRequest();
  }
  
  Future<void> _loadRequest() async {
    final navigationDelegate = NavigationDelegate(
      onPageFinished: (url) {
        // this is necessary to trigger the widget to show without the need for
        //the user to interact with the webview
        _controller.runJavaScript('''
document.dispatchEvent(new Event('mousemove'));
''');
      }
      onNavigationRequest: (request) {
        // intercept url navigation
        // this may be useful to display attachments like PDFs in a custom widget

        // if(request.url.endsWith('.pdf')) {
        //   Navigator.of(context).push(MyPdfViewer());
        //   return NavigationDecision.prevent;
        // }

        return NavigationDecision.navigate;
      },
    );
    await _controller.setNavigationDelegate(navigationDelegate);

    return _controller.loadHtmlString(
      '''
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <script type="application/javascript">
      window.tiledeskSettings= 
      {
          projectid: "<<TILEDESK_PROJECT_ID>>",
          fullscreenMode: true,
          open:true,
      };
      (function(d, s, id) { 
        var w=window; var d=document; var i=function(){i.c(arguments);};
        i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;                    
        var js, fjs=d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js=d.createElement(s); 
        js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document,'script','tiledesk-jssdk'));
    </script>
  </head>
</html>''',
      baseUrl: 'https://widget.tiledesk.com',
    );
  }
}

Find other widget parameters to customize your experience.

webview_flutter
here