Mobile SDK Integration Guide

Mobile SDK Integration Guide

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

---

Step 1: Installation

Run one of the following commands in your project directory to install the Clio SDK:

Using npm:

npm install clio-react-native

Using Yarn:

yarn add clio-react-native

---

Step 2: Integration

Use the ChatModal component from the clio-react-native package to integrate the Clio chatbot into your app. Below is a sample implementation:

import * as React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { ChatModal } from 'clio-react-native';

export default function App() {
  const [chatVisible, setVisible] = React.useState(false);

  function openChat() {
    setVisible(true);
  }

  function closeChat() {
    setVisible(false);
  }

  return (
    <View style={styles.container}>
      <Button title="Open Chat" onPress={openChat}>Open Chat</Button>

      <ChatModal
        visible={chatVisible}
        accountToken="accountToken1"
        clientId="clientId1"
        closeChat={closeChat}
        host="<youraccount>.askclio.ai"
        companyName="<youraccount>"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

---

Parameters

Here are the required parameters for the ChatModal component:

• accountToken: Your specific account token.

• clientId: The unique client ID for your application.

• host: Your Clio instance URL (e.g., <youraccount>.askclio.ai).

• companyName: Your company's identifier.

---

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