Connect FlutterFlow to Olark by building a Custom Widget that wraps a webview_flutter WebView loading an HTML page with the Olark JavaScript snippet and your public Site ID. There is no Olark customer-facing REST API to call and no mobile SDK — the WebView embed is the only honest path. The Site ID is public and safe in the widget. The chat bubble only appears in real web or device builds, not in the FlutterFlow canvas.
| Fact | Value |
|---|---|
| Tool | Olark |
| Category | Communication |
| Method | Custom Widget |
| Difficulty | Beginner |
| Time required | 20 minutes |
| Last updated | July 2026 |
Add Olark Live Chat to Your FlutterFlow App with a WebView Widget
Olark is one of the simplest live-chat platforms available — website owners paste a small JavaScript snippet onto their pages and a chat bubble appears, connecting visitors to human agents. Pricing starts at approximately $29 per seat per month (verify current plans at olark.com). The platform is web-first and built around its browser-rendered JavaScript widget. There is no Olark native mobile SDK and no public customer-facing REST API that lets you build your own chat interface backed by Olark messaging. If you need to build a fully native Flutter chat UI backed by Olark messaging, Olark is not the right tool — look at platforms like Intercom or Zendesk Chat that offer proper mobile SDKs and REST APIs.
For FlutterFlow, the correct and only practical approach is a Custom Widget that wraps a webview_flutter WebView. The WebView loads a minimal HTML page containing the Olark loader script tagged with your Olark Site ID. The Olark JavaScript then renders the chat bubble inside the WebView container. This works on Flutter web builds and on iOS/Android builds using the device's native browser engine. The integration works well for a Support screen where the whole screen or a large portion is dedicated to the chat widget.
The Site ID is a public identifier — it appears in the source code of every website that uses Olark, so there is no security concern about including it in your Custom Widget code or as a widget parameter. There are no backend secrets, no OAuth flows, and no Cloud Functions required. It is one of the simplest third-party integrations you can build in FlutterFlow.
Integration method
FlutterFlow has no native Olark connector and Olark has no customer-facing REST API for building custom chat UIs. The only viable integration is a Custom Widget that wraps a webview_flutter WebView loading a simple HTML page containing the Olark JavaScript snippet with your public Site ID. The Site ID is safe in client code — it appears on every website that uses Olark. The chat bubble renders inside the WebView on web and mobile device builds; it does not appear in the FlutterFlow canvas preview.
Prerequisites
- An Olark account with at least one active seat (free trial or paid plan at olark.com)
- Your Olark Site ID from the Olark dashboard (Settings → Install)
- A FlutterFlow project on a plan that supports Custom Code (Custom Widgets)
- Basic familiarity with the FlutterFlow Custom Code panel (no Dart expertise needed — the code is minimal)
Step-by-step guide
Copy your Olark Site ID from the dashboard
Log in to your Olark account at olark.com. In the left sidebar, click 'Settings' and then 'Install'. Olark shows you the JavaScript snippet for embedding the chat on your website. In this snippet, find the line that sets your site ID — it looks like `olark.configure('system.api_key', '1234-567-89-01234')`. The value in quotes after `system.api_key` is your Site ID. Copy this value — it is a hyphen-separated alphanumeric string like `1234-567-89-01234`. You can also find it in Settings → Account → Site ID. This is the only credential you need for the WebView embed. It is a public identifier — it is visible in the source code of every website that uses Olark, so it is safe to include in your FlutterFlow widget code and safe to have in your app binary. There are no API keys, OAuth tokens, or secrets involved in the basic Olark embed.
Pro tip: Your Site ID is also visible if you inspect the source of any website that uses Olark — it is intentionally public. Do not confuse it with your Olark account password or any admin credentials.
Expected result: You have your Olark Site ID copied (a string like `1234-567-89-01234`). You have NOT needed to set up any API keys or backend credentials.
Create the Olark Custom Widget in FlutterFlow
Open your FlutterFlow project. In the left navigation, click Custom Code. Click the + Add button and select Widget. Name the widget 'OlarkChatWidget'. In the Dependencies field, type `webview_flutter` and add it to the project — FlutterFlow will include this package when building the app. The webview_flutter package is the official Flutter package for embedding a native WebView on iOS, Android, and web. In the widget Dart code area, you will write a StatefulWidget. The widget creates a WebViewController, configures it with JavaScript mode set to unrestricted (this is mandatory — without it, the Olark JavaScript never executes), and loads an HTML string containing the Olark loader script. Add a `siteId` String parameter to the widget so you can set it from the FlutterFlow canvas without editing the code. The HTML you load is a minimal web page with the Olark script tag in it. The script dynamically creates the chat bubble. The WebViewWidget renders this inside a sized container set to your specified width and height. You should also set up a NavigationDelegate that allows all navigation — Olark sometimes opens links or confirmation dialogs inside the WebView. After pasting the code, click Save. FlutterFlow will compile and verify the widget code. Any syntax errors appear in the output panel at the bottom.
1// custom_widget.dart — OlarkChatWidget2import 'package:flutter/material.dart';3import 'package:webview_flutter/webview_flutter.dart';45class OlarkChatWidget extends StatefulWidget {6 const OlarkChatWidget({7 super.key,8 required this.width,9 required this.height,10 this.siteId = 'YOUR-SITE-ID', // set this via the widget parameter in FlutterFlow11 });1213 final double width;14 final double height;15 final String siteId;1617 @override18 State<OlarkChatWidget> createState() => _OlarkChatWidgetState();19}2021class _OlarkChatWidgetState extends State<OlarkChatWidget> {22 late final WebViewController _controller;2324 @override25 void initState() {26 super.initState();27 _controller = WebViewController()28 ..setJavaScriptMode(JavaScriptMode.unrestricted) // REQUIRED for Olark29 ..setNavigationDelegate(30 NavigationDelegate(31 onNavigationRequest: (NavigationRequest request) {32 return NavigationDecision.navigate; // allow all navigation in WebView33 },34 ),35 )36 ..loadHtmlString(_buildOlarkHtml(widget.siteId));37 }3839 String _buildOlarkHtml(String siteId) {40 return '''41<!DOCTYPE html>42<html>43<head>44 <meta charset="UTF-8">45 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">46 <style>47 html, body { margin: 0; padding: 0; height: 100%; background: transparent; }48 </style>49</head>50<body>51 <!--[if lte IE 8]><script charset="utf-8" type="text/javascript" src="https://static.olark.com/jsclient/loader0.js"></script><![endif]-->52 <script type="text/javascript">53 ;(function(o,l,a,r,k,y){54 if(o.olark) return;55 r="script"; y=l.createElement(r); r=l.getElementsByTagName(r)[0];56 y.async=1; y.src="//"+a; r.parentNode.insertBefore(y,r);57 y=o.olark=function(){k.s.push(arguments); k.t.push(+new Date)};58 y.extend=function(i,j){y("extend",i,j)};59 y.identify=function(i){y("identify",k.i=i)};60 y.configure=function(i,j){y("configure",i,j); k.c[i]=j};61 k=y._={s:[],t:[+(new Date)],c:{},l:a};62 })(window,document,"static.olark.com/jsclient/loader.js");63 olark.configure("system.api_key","$siteId");64 </script>65</body>66</html>67''';68 }6970 @override71 Widget build(BuildContext context) {72 return SizedBox(73 width: widget.width,74 height: widget.height,75 child: WebViewWidget(controller: _controller),76 );77 }78}Pro tip: Do not try to build a 'collapsed by default' state by using a small initial height — Olark controls its own bubble positioning via JavaScript. Let the widget take its full height and let Olark render the bubble where it decides to place it (usually bottom-right corner).
Expected result: FlutterFlow accepts the Custom Widget code without errors. The widget appears in the Custom Widgets list and shows a grey placeholder in the canvas editor.
Place the widget on a Support screen and configure the Site ID
In the FlutterFlow page editor, create a new page or navigate to your existing 'Support' or 'Help' screen. Open the Add Elements panel by clicking the + button in the left navigation toolbar or pressing A on the keyboard. Scroll to the bottom of the elements list to find the Custom Widgets section. Drag the 'OlarkChatWidget' onto the page or click it to add it. Once placed, select the widget on the canvas (it shows as a grey placeholder rectangle). In the right-side Properties panel, look for the widget's Parameters section. Set the `siteId` parameter to your Olark Site ID string (e.g., `1234-567-89-01234`). Set the widget's Width to 'Expand' or a fixed pixel value (e.g., 400), and the Height to 'Expand' or a fixed value (e.g., 500). If you want the chat to fill the entire screen, place the widget inside a Container set to fill the screen and configure both width and height to Expand. The grey canvas placeholder is normal — Custom Widgets that use WebView cannot render in the FlutterFlow visual canvas. You must run a real build to see the chat widget. This is not a bug; it is a platform limitation.
Pro tip: If you have multiple Olark accounts or a staging Olark account vs production, create two separate widget configurations by passing different siteId values as a widget parameter — no code changes needed.
Expected result: The OlarkChatWidget is placed on your Support screen with the correct Site ID parameter set. The Properties panel shows the siteId configured. The canvas shows a grey placeholder.
Test the widget on a real web or device build
Because Custom Widgets using WebView cannot render in the FlutterFlow canvas, you must run a real build to see the Olark chat bubble. For a web build, click the 'Run' button in the top-right toolbar of FlutterFlow and select 'Run in Chrome' (or whichever browser option is available). FlutterFlow compiles your project and opens it in a browser tab. Navigate to the Support screen. After the page loads, you should see the Olark chat bubble appear in the bottom-right corner of the WebView — exactly as it would on a normal website. If you see a blank white area, open Chrome DevTools (press F12), go to the Console tab, and look for JavaScript errors. Common issues: the Site ID is wrong (check for typos or extra spaces), JavaScript mode is not set to unrestricted (check the widget code), or the Olark script URL is blocked by a browser content policy. For an iOS or Android build, connect a physical device to your computer, click the Flutter Flow 'Test' button, and select the connected device. The WebView will use the device's native browser engine (WKWebView on iOS, Android System WebView on Android), and the Olark bubble should appear similarly to the web build. Tapping the bubble opens the Olark chat window. Type a test message — it should appear in the Olark agent console within seconds.
Pro tip: If you are testing on Android and the WebView appears blank, the device may have an outdated Android System WebView. Update it from the Play Store (search 'Android System WebView') and try again.
Expected result: The Olark chat bubble is visible in the bottom corner of the Support screen in a real web or device build. Tapping it opens the chat window. A test message sent from the app appears in the Olark agent console.
Understand the limitations and decide if Olark is the right fit
Before shipping this integration, it is important to be clear about what Olark can and cannot do in a FlutterFlow context. What works: the chat bubble renders on web and mobile device builds inside the WebView, connects visitors to agents, and is functionally equivalent to Olark on a website. What does not work: you cannot build a custom Flutter chat interface backed by Olark — there is no REST API for sending or receiving messages programmatically, no push notification integration with Olark events, and no way to pull chat history into a Flutter widget. The Olark bubble only appears in the WebView, not as a floating button over your native Flutter UI. Olark is web-first by design and does not offer a native mobile SDK. If you need more control over the chat UI, richer integration (chat history, typing indicators, push notifications for new messages), or a truly native Flutter chat component, consider platforms that offer REST APIs and mobile SDKs such as Zendesk Chat, Intercom, or Smooch (Zendesk Sunshine Conversations). If you'd rather have someone else build the right chat integration for your specific needs, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.
Pro tip: If pre-filling the user's name in the Olark chat widget is important (so agents see who they are chatting with), you can add a JavaScript bridge call in the HTML: `olark.identify({ name: 'John', email: 'john@example.com' })`. Pass user info via JavaScript evaluated in the WebViewController after the page loads.
Expected result: You have a working Olark chat embed in your FlutterFlow app and a clear understanding of its limitations. You know whether Olark meets your needs or whether a more capable platform is required.
Common use cases
Support screen in a SaaS app that lets users chat with a human agent
A FlutterFlow SaaS app includes a dedicated 'Help' page in the bottom navigation bar. Tapping Help opens a screen that fills with the Olark Custom Widget — the full screen becomes a chat window. Users type their question and connect with a support agent who is logged into the Olark agent console. The agent sees the chat coming in as a standard Olark conversation. No backend setup is needed on the FlutterFlow side.
Create a Help screen with a full-screen Olark chat widget using our Site ID. Show a loading spinner for the first 2 seconds while Olark initializes, then hide it.
Copy this prompt to try it in FlutterFlow
E-commerce app with a support bubble available on the checkout screen
A FlutterFlow shopping app places the Olark Custom Widget at the bottom of the checkout screen as a collapsible panel. When users have questions about their order, they tap the chat bubble to expand the widget and connect with a support agent. The widget stays collapsed by default and does not interfere with the normal checkout flow.
Add an Olark chat widget panel anchored to the bottom of the checkout screen that expands to full height when tapped. Default state is collapsed showing just the chat bubble.
Copy this prompt to try it in FlutterFlow
Internal feedback tool for field staff to report issues to a support team
A FlutterFlow internal app for field technicians includes a 'Report Issue' screen with the Olark widget. Field staff can describe a problem and get immediate guidance from an expert via live chat. Because this is a web-only deployment (web app), the Olark widget works identically to a standard website embed.
Build an 'Ask Expert' screen with a full-width Olark chat widget. Pre-fill the user's name in the Olark chat window using the lpTag.identify API call from JavaScript.
Copy this prompt to try it in FlutterFlow
Troubleshooting
The WebView area is blank — the Olark chat bubble never appears
Cause: The most common cause is that JavaScript mode is not set to unrestricted on the WebViewController. Without JavaScript enabled, the Olark loader script tag is present in the HTML but never executes, so the chat bubble never initializes. The WebView simply shows the blank body of the HTML page.
Solution: In the Custom Widget Dart code, verify the line `..setJavaScriptMode(JavaScriptMode.unrestricted)` is called on the WebViewController in `initState`. Open Chrome DevTools (F12) while running the web build and check the Console tab for errors. Also verify the Site ID contains no extra spaces or quotes — copy-paste it from the Olark dashboard directly.
1// Correct: JavaScript unrestricted2_controller = WebViewController()3 ..setJavaScriptMode(JavaScriptMode.unrestricted)4 ..loadHtmlString(html);56// Wrong: will cause Olark to silently fail7_controller = WebViewController()8 ..loadHtmlString(html); // JavaScriptMode defaults to disabledThe chat bubble appears in the web build but not in the iOS or Android build
Cause: On Android, DOM storage may be disabled by default on some device configurations, which prevents the Olark script from storing session state. On older iOS devices, WKWebView may block third-party scripts from loading due to content security policies.
Solution: For Android, if using an older webview_flutter API version, explicitly enable DOM storage by configuring the Android WebView settings. For iOS, ensure your app has no custom content security policy that blocks external script sources. Test on an updated device with a current OS version — older Android WebView versions can behave differently.
The Custom Widget shows as a grey box in the FlutterFlow canvas and nothing renders
Cause: This is expected and correct behavior. FlutterFlow's visual canvas cannot render Custom Widgets that use native platform code like WebView. The grey placeholder is the normal canvas representation of any Custom Widget.
Solution: This is not a bug. Use the FlutterFlow Run button → Run in Chrome (for web) or test on a real device to see the widget render. The canvas placeholder will always be grey regardless of how the widget looks at runtime.
The Olark chat widget loads but tapping or clicking it does not open the chat panel
Cause: If the WebViewController's NavigationDelegate blocks certain navigation types (like opening new windows or handling click events), Olark's interactivity may be suppressed. Some WebView configurations also block popups, which Olark may use for certain UI flows.
Solution: Ensure the NavigationDelegate in your Custom Widget code returns `NavigationDecision.navigate` for all navigation requests. The code example above includes this pattern. If the issue persists on iOS, also set `allowsInlineMediaPlayback: true` on the WKWebViewConfiguration (available in the webview_flutter iOS implementation).
Best practices
- Set JavaScript mode to unrestricted on the WebViewController before loading any HTML — without this, the Olark script never executes and the widget appears blank.
- Always test the Olark widget on a real build (web → Run in Chrome, mobile → device build) — the FlutterFlow canvas does not render WebView-based Custom Widgets.
- Set a NavigationDelegate that allows all navigation requests — Olark may internally open links or handles that require navigation permission from the WebView.
- The Olark Site ID is public and safe in client code — do not treat it as a secret or try to hide it in environment variables.
- Be honest with your users about chat availability: the Olark agent console must have at least one agent logged in and available for the chat bubble to accept conversations — if no agents are available, Olark shows an offline message form.
- Consider the user experience on mobile: the Olark chat widget is designed for desktop browsers. On small phone screens inside a WebView, the UI may be cramped. Test on actual device screen sizes and adjust the widget height accordingly.
- If you need to pre-fill user info (name, email) in the Olark chat so agents know who they are talking to, call `olark.identify` via the WebViewController's `runJavaScript` method after the page loads.
Alternatives
LivePerson is an enterprise alternative that also supports WebView embedding but additionally offers REST APIs and a Mobile Messaging SDK for more sophisticated contact-center integrations.
Zendesk Chat has a mobile SDK and REST API that enable native Flutter chat UIs and push notifications — better if you need more than a basic WebView chat bubble.
Intercom has an official Flutter SDK and enables native in-app messaging with user targeting, push notifications, and product tours — a more powerful option than Olark for SaaS apps.
Frequently asked questions
Can I build a custom Flutter chat UI backed by Olark?
No. Olark does not offer a public customer-facing REST API for sending or receiving messages programmatically. There is no endpoint you can call to post a customer message to an Olark conversation or retrieve chat history in JSON form. The only integration path is the JavaScript WebView embed. If you need a custom native Flutter chat UI, choose a platform that exposes a messaging REST API such as Intercom, Zendesk Chat, or Smooch (Zendesk Sunshine Conversations).
Is the Olark Site ID safe to include in my Flutter app?
Yes. The Olark Site ID is a public identifier that appears in the JavaScript source of every website using Olark — any user who views the page source of an Olark-enabled website can see it. It does not grant access to your Olark account, your agent console, or any conversation data. It only identifies which Olark account a visitor chat should route to. There is no security concern with including it in your app binary.
Does the Olark widget work offline or in airplane mode?
No. The Olark chat script loads from `static.olark.com` at runtime — it requires an active internet connection to download and initialize. If the device is offline, the WebView will show either a blank page or a network error from the WebView itself. Consider showing a placeholder widget or a message explaining that chat requires an internet connection when the device is detected as offline using Flutter's connectivity_plus package.
Can I pass the logged-in user's name and email to Olark so agents know who they are chatting with?
Yes, but it requires a small JavaScript bridge. After the WebView page loads (use the `onPageFinished` callback in the NavigationDelegate), call `_controller.runJavaScript("olark.identify({ name: 'UserName', email: 'user@example.com' })")`. In the Custom Widget, you can add `userName` and `userEmail` parameters and pass them through the `runJavaScript` call after page load.
What happens when no Olark agents are online?
When no agents are available or outside business hours, Olark automatically shows an offline message form instead of the live chat interface. Visitors can leave their name, email, and message, which gets queued as a conversation in the Olark agent console. This behavior is configured in the Olark dashboard under Settings → Availability. No FlutterFlow-side changes are needed — the JavaScript SDK handles the online/offline state automatically.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation