How to Create a Custom Support Widget for Your FlutterFlow App

Wrap your main page content in a Stack widget. The first child is your existing page content (Column or ScrollView). The second child is an Align widget set to bottomRight with padding 16 from bottom and right. Inside the Align, place a Container styled as a FloatingActionButton: 56×56, circular borderRadius, Theme.primary background color, elevation 8. Inside the Container, add an Icon widget set to Icons.help_outline, color white, size 28. On the Container's On Tap action, add Show Bottom Sheet and select SupportMenu as the Component to display. Set the Bottom Sheet to half-screen height with rounded top corners (borderRadius top-left and top-right: 16).

Create a new Component called SupportMenu. Inside, add a Column with padding 24. First child: a Text widget 'How can we help?' styled as headlineSmall. Below that, add three Container widgets (one per option), each with padding 16, margin bottom 12, borderRadius 12, and a light grey background. Inside each Container, place a Row: an Icon on the left (Icons.search for FAQ, Icons.confirmation_number for Ticket, Icons.chat_bubble for Live Chat), then a SizedBox width 16, then a Column (crossAxisAlignment: start) with a title Text (bodyLarge, bold) and a subtitle Text (bodySmall, secondary color). Titles: 'Search FAQ' / 'Submit a Ticket' / 'Live Chat'. Subtitles: 'Find answers instantly' / 'We will get back to you' / 'Chat with us now'. On Tap for each card: first close the current Bottom Sheet (Navigator.pop), then open a new Bottom Sheet with the specific feature Component (FAQSearch, TicketForm, or LiveChat).

Create a Firestore collection called faq with fields: question (String), answer (String), category (String — 'Getting Started', 'Account', 'Payments', 'Technical'), searchKeywords (Array of Strings — lowercase keywords from the question), and order (Integer for manual sorting). Populate with 10-15 test FAQ entries. Create a FAQSearch Component with a Column: first a TextField with prefixIcon Icons.search, hintText 'Search for help...', and bind its value to a Component State variable called searchQuery. Below the TextField, add ChoiceChips with options Getting Started, Account, Payments, Technical — bind selected value to a Component State variable called selectedCategory. Below that, add a ListView with a Backend Query on the faq collection. When searchQuery is not empty, filter using arrayContainsAny on the searchKeywords field — split the user's searchQuery by spaces into an array using a Custom Function (searchQuery.toLowerCase().split(' ').where((s) => s.isNotEmpty).toList()). When selectedCategory is set, add a where clause: category == selectedCategory. Order by the order field. Each list item is an expandable accordion: a Container with the question as a Text widget and a chevron Icon. On Tap, toggle a local Component State boolean for that item (use the document ID as key). When expanded, show the answer Text below with padding. Use Conditional Visibility on the answer container bound to the expanded state.

Create an Option Set called TicketPriority with values: Low, Medium, High, Urgent. Create a Firestore collection called support_tickets with fields: userId (String), subject (String), priority (String), description (String), status (String, default 'new'), createdAt (Timestamp). Build a TicketForm Component with a Column: a Text heading 'Submit a Ticket', a TextField for Subject (bind to Component State subjectText, validator: required), a DropDown bound to the TicketPriority Option Set (default: Medium), a TextField for Description (maxLines: 5, maxLength: 1000, bind to Component State descriptionText, validator: required), and a Submit Button. Add Conditional Visibility or enabled state on the Submit Button: only enable when subjectText is not empty AND descriptionText is not empty. On Tap of Submit: Create Document in support_tickets with userId = currentUser.uid, subject = subjectText, priority = selected priority, description = descriptionText, status = 'new', createdAt = now. On success: show Snackbar 'Ticket submitted! We will get back to you soon.' and close the Bottom Sheet. Deploy a Cloud Function triggered by onCreate on support_tickets/{docId}: read the new document fields, send an email to support@yourapp.com via the SendGrid API with the ticket details (subject, priority, description, user email).

1// Cloud Function: onNewSupportTicket
2const functions = require('firebase-functions');
3const sgMail = require('@sendgrid/mail');
4sgMail.setApiKey(functions.config().sendgrid.key);
5
6exports.onNewSupportTicket = functions.firestore
7  .document('support_tickets/{ticketId}')
8  .onCreate(async (snap, context) => {
9    const ticket = snap.data();
10    const msg = {
11      to: 'support@yourapp.com',
12      from: 'noreply@yourapp.com',
13      subject: `[${ticket.priority}] ${ticket.subject}`,
14      text: `New support ticket from ${ticket.userId}:\n\nPriority: ${ticket.priority}\nSubject: ${ticket.subject}\nDescription: ${ticket.description}\n\nSubmitted: ${ticket.createdAt.toDate().toISOString()}`,
15    };
16    await sgMail.send(msg);
17  });

Create a Custom Widget called IntercomChat. The widget accepts parameters: intercomUrl (String — your Intercom Messenger URL), userName (String), and userEmail (String). Inside the Custom Widget Dart code, return a WebView widget (from webview_flutter package) that loads the intercomUrl with query parameters for user identity: '${intercomUrl}?name=${userName}&email=${userEmail}'. CRITICAL: do NOT place this Custom Widget directly on the page or inside a hidden container. Instead, create a LiveChat Component that contains a Column with a header ('Live Chat') and a Container below it. Use Conditional Visibility on the Container: only show when a Component State boolean chatInitialized is true. When the LiveChat Bottom Sheet opens, set chatInitialized to true via an On Page Load or On Component Load action. This way the WebView only initializes when the user actually opens the Live Chat sheet — it never loads in the background. The WebView should fill the available height (use Expanded in the Column). Add a loading indicator that shows while the WebView is loading (use the WebView's onPageStarted and onPageFinished callbacks in the Custom Widget to toggle a loading state).

1// Custom Widget: IntercomChat
2import 'package:webview_flutter/webview_flutter.dart';
3
4class IntercomChat extends StatefulWidget {
5  final String intercomUrl;
6  final String userName;
7  final String userEmail;
8  final double? width;
9  final double? height;
10
11  const IntercomChat({
12    super.key,
13    required this.intercomUrl,
14    required this.userName,
15    required this.userEmail,
16    this.width,
17    this.height,
18  });
19
20  @override
21  State<IntercomChat> createState() => _IntercomChatState();
22}
23
24class _IntercomChatState extends State<IntercomChat> {
25  late final WebViewController _controller;
26  bool _isLoading = true;
27
28  @override
29  void initState() {
30    super.initState();
31    final uri = Uri.parse(widget.intercomUrl).replace(
32      queryParameters: {
33        'name': widget.userName,
34        'email': widget.userEmail,
35      },
36    );
37    _controller = WebViewController()
38      ..setJavaScriptMode(JavaScriptMode.unrestricted)
39      ..setNavigationDelegate(NavigationDelegate(
40        onPageFinished: (_) => setState(() => _isLoading = false),
41      ))
42      ..loadRequest(uri);
43  }
44
45  @override
46  Widget build(BuildContext context) {
47    return SizedBox(
48      width: widget.width,
49      height: widget.height,
50      child: Stack(
51        children: [
52          WebViewWidget(controller: _controller),
53          if (_isLoading)
54            const Center(child: CircularProgressIndicator()),
55        ],
56      ),
57    );
58  }
59}