Smartly AI Mobile WebView Integration

Integrate your Smartly AI chatbot into any mobile app using a WebView and a simple hosted HTML page. This method works with any platform (React Native, iOS, Android, Flutter, etc.) and requires no SDK installation.

Overview

The Smartly AI Webchat widget is fully responsive, making it ideal for embedding in a WebView inside your mobile app.
How it works:

Create an HTML page with your agent’s Webchat code.
Host this HTML page online.
Open it in your app’s WebView to chat with your AI agent.

1. Activate the Webchat Integration & Find Your App ID

Before your chatbot can appear in a WebView, you must activate the Webchat integration for your agent in the Smartly AI platform.

a. Go to the Integration Section

In your Smartly AI dashboard, select your AI agent.
Go to the Integrations section and choose Webchat.

b. Find Your App ID and Embed Code

Copy the App ID shown at the top of the Webchat integration panel.
Copy the full JavaScript embed code—this will be added to your HTML page.

How to get the App ID

c. Activate the Integration

At the bottom left of the Webchat integration window, click the Launch button to activate the integration.
(The Webchat integration is deactivated by default, and your bot will not be visible until you activate it.)

Launch Webchat Integration

2. Create and Host Your Webchat HTML Page

Create an HTML file (e.g., chatbot.html) and paste the embed code from the Webchat integration window:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Smartly AI Chatbot</title>
    <!-- Smartly AI Webchat Embed Code -->
    <script type="text/javascript">
      var SMARTLY_APP_ID = "YOUR_APP_ID"; // Replace with your Smartly AI App ID
      var SMARTLY_LANG = "fr-fr";         // Set your desired language code
      var SMARTLY_USER_DATA = {};         // Optional: pass user data
      (function() {
        d = document;
        s = d.createElement("script");
        s.src = "https://cdn.smartly.ai/webchat.min.js";
        s.async = 1;
        d.getElementsByTagName("head")[0].appendChild(s);
      })();
    </script>
  </head>
  <body>
  </body>
</html>

Replace "YOUR_APP_ID" with the value from your Smartly AI dashboard.
Set the desired language (e.g., "fr-fr" for French).
You can customize SMARTLY_USER_DATA if needed.

Host this HTML page on your web server or a static hosting service, and copy the public URL (e.g., https://your-domain.com/chatbot.html).

3. Open the Chatbot in Your App via WebView

Here are example implementations for different frameworks:

React Native

import { WebView } from 'react-native-webview';

export default function ChatScreen() {
  return (
    <WebView source={{ uri: 'https://your-domain.com/chatbot.html' }} />
  );
}

Native Android (Java)

import android.os.Bundle;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;

public class ChatActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://your-domain.com/chatbot.html");
        setContentView(webView);
    }
}

Native iOS (Swift)

import UIKit
import WebKit

class ChatViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView(frame: self.view.frame)
        if let url = URL(string: "https://your-domain.com/chatbot.html") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
        self.view.addSubview(webView)
    }
}

Flutter

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

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chatbot')),
      body: WebView(
        initialUrl: 'https://your-domain.com/chatbot.html',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

Note: Replace https://your-domain.com/chatbot.html with the URL of your hosted HTML page.

Why Use WebView Integration?

Universal: Works with any mobile framework.
Zero SDK installation: Just use a URL.
Always up-to-date: Update your agent in Smartly AI and changes are live instantly.
Full customization: You control the look and behavior from your Smartly AI dashboard.

Advanced Customization

Adjust language, appearance, and behavior in your Webchat integration settings.
More options and advanced settings are documented here:
Smartly AI Webchat Documentation