# Olark

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20 minutes
- Last updated: July 2026

## TL;DR

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.

## 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.

## Before you start

- 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

### 1. 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.

**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.

### 2. 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.

```
// custom_widget.dart — OlarkChatWidget
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class OlarkChatWidget extends StatefulWidget {
  const OlarkChatWidget({
    super.key,
    required this.width,
    required this.height,
    this.siteId = 'YOUR-SITE-ID', // set this via the widget parameter in FlutterFlow
  });

  final double width;
  final double height;
  final String siteId;

  @override
  State<OlarkChatWidget> createState() => _OlarkChatWidgetState();
}

class _OlarkChatWidgetState extends State<OlarkChatWidget> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)  // REQUIRED for Olark
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate; // allow all navigation in WebView
          },
        ),
      )
      ..loadHtmlString(_buildOlarkHtml(widget.siteId));
  }

  String _buildOlarkHtml(String siteId) {
    return '''
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <style>
    html, body { margin: 0; padding: 0; height: 100%; background: transparent; }
  </style>
</head>
<body>
  <!--[if lte IE 8]><script charset="utf-8" type="text/javascript" src="https://static.olark.com/jsclient/loader0.js"></script><![endif]-->
  <script type="text/javascript">
    ;(function(o,l,a,r,k,y){
      if(o.olark) return;
      r="script"; y=l.createElement(r); r=l.getElementsByTagName(r)[0];
      y.async=1; y.src="//"+a; r.parentNode.insertBefore(y,r);
      y=o.olark=function(){k.s.push(arguments); k.t.push(+new Date)};
      y.extend=function(i,j){y("extend",i,j)};
      y.identify=function(i){y("identify",k.i=i)};
      y.configure=function(i,j){y("configure",i,j); k.c[i]=j};
      k=y._={s:[],t:[+(new Date)],c:{},l:a};
    })(window,document,"static.olark.com/jsclient/loader.js");
    olark.configure("system.api_key","$siteId");
  </script>
</body>
</html>
''';
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: WebViewWidget(controller: _controller),
    );
  }
}
```

**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.

### 3. 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.

**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.

### 4. 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.

**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.

### 5. 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.

**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.

## 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.

## 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.

Prompt example:

```
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.
```

### 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.

Prompt example:

```
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.
```

### 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.

Prompt example:

```
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.
```

## 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.

```
// Correct: JavaScript unrestricted
_controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadHtmlString(html);

// Wrong: will cause Olark to silently fail
_controller = WebViewController()
  ..loadHtmlString(html); // JavaScriptMode defaults to disabled
```

### The 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).

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-integrations/olark
© RapidDev — https://www.rapidevelopers.com/flutterflow-integrations/olark