Mobile SDK Integration Guide

Mobile SDK Integration Guide

The Clio SDK enables seamless chatbot capabilities within your React Native mobile application using a WebView. Follow the steps below to integrate Ask Clio's AI assistant into your app.

---

Step 1: Install WebView

npm install react-native-webview
# or
yarn add react-native-webview

On iOS, also run:

cd ios && pod install && cd ..

Base URL:

AskClio is loaded from:

https://app.askclio.ai

---

Example Usage

import React from "react";
import { StyleSheet, View } from "react-native";
import { WebView } from "react-native-webview";

export default function AskClioScreen() {
  const clientId = "abc_123"; // replace with your actual client_id
  const url = `https://app.askclio.ai?client_id=${encodeURIComponent(
    clientId
  )}&is_wide=true`;

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: url }}
        style={styles.webview}
        javaScriptEnabled
        domStorageEnabled
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

Notes

• Replace abc_123 with your actual client_id. The client_id can be found at the bottom of the Configuration Tab here.

• is_wide=true is optional; remove it if you prefer the default layout.

• The WebView takes up all available space (flex: 1), but you can adjust dimensions if you want a smaller view.

---

Here are the required parameters for the ChatModal component:

• client_id (required) – your unique client identifier. The client_id can be found at the bottom of the Configuration Tab here.

• is_wide (optional) – when set to true, the interface will use a wider layout.

---

Next Steps

After completing the integration, test the chatbot in your app to ensure it works seamlessly. If you encounter any issues, check the logs or reach out to our support team at [e-mail].