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.

---

Step 2: Customization Options

The Web SDK provides several customization options to align the chatbot with your branding:

1. Custom Logo: Replace the default Clio logo with your own branding in the Ask Clio middle office.

2. Custom Sizing: The parameter is_wide=true is optional — remove it if you prefer the default layout.

3. Custome Colors & Fonts: You can change the background colors, fonts, and more in the Ask Clio middle office.

To configure these options, reach out to our support team at [e-mail] for guidance.

Step 3: Final Verification

To verify, open the iFrame and interact with the chatbot.

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