React Native Voicebot Integration Guide for Expo (Bare/Ejected) 🤖

This guide provides a streamlined walkthrough for integrating the voicebot-react-native-expo package into your bare minimal or ejected Expo managed React Native project. This guide will not work for projects running solely within the Expo Go app.

🚀 Getting Started

Prerequisites:

• An existing React Native project created with Expo, where you have access to the native Android folder (either a bare minimum project or an ejected managed Expo project).
• Fundamental knowledge of React Native and Expo .

1. Installation 📦

Install the voicebot-react-native-expo package and its dependencies. Navigate to your project's root directory in your terminal and run:

npm i voicebot-react-native-expo; npx voicebot-install

This command takes care of the package installation and automatically sets up the necessary configurations.

If you have already installed the voicebot-react-native-expo package, you can run the following command:

npx voicebot-install

This command will install the package's dependencies.

2. Register kipps-ai Globals 🌎

Import the registerGlobals function from voicebot-react-native-expo/rn and call it within your application:

Option 1: index.js

import { registerGlobals } from 'voicebot-react-native-expo/rn';

registerGlobals(); 

// ...rest of your index.js code

Option 2: App.js

import React, { useEffect } from 'react';
import { registerGlobals } from 'voicebot-react-native-expo/rn'; 

export default function App() {
  useEffect(() => {
    registerGlobals();
  }, []); 

  // ...rest of your App.js code
}

3. Android Configuration 🤖

After running the installation, you need to adjust the minSdkVersion in your android/app/build.gradle file to at least 24.

1. Open your android/app/build.gradle file in a text editor.

2. Locate the defaultConfig section.

3. Within the defaultConfig block, find the line minSdkVersion and make sure it's set to 24 or higher ans targetSdkVersion 31. It should look something like this:

   defaultConfig {
       // ... other configurations
       minSdkVersion 24 
       targetSdkVersion 31 // ... or greater
       // ... other configurations
   }

4. Integrate the VoiceBotButton Component 📞

1. Import: In your React Native component, import the VoiceBotButton component:

   import { VoiceBotButton } from 'voicebot-react-native-expo';

2. Render: Render the VoiceBotButton component, providing your VoiceBot ID, Caller ID, and Caller Name:

   import React from 'react';
   import { StyleSheet, View, SafeAreaView } from 'react-native';
   import { VoiceBotButton } from 'voicebot-react-native-expo';
   
   export default function App() {
     return (
       <SafeAreaView style={styles.container}>
         <VoiceBotButton 
           voicebot_id="YOUR_KIPPS_VOICEBOT_ID" 
           caller_id="YOUR_KIPPS_CALLER_ID" 
           caller_name="YOUR_KIPPS_CALLER_NAME" 
         />
       </SafeAreaView>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       backgroundColor: '#fff',
     },
   });

   Replace the placeholder values above with your actual VoiceBot credentials.

5. Run Your App! 🎉

You've successfully integrated the voicebot-react-native-expo package! Build and run your Expo app to start using the voicebot features. Let me know if you have any more questions!

🚀 Integrating Google Assistant with your React Native VoiceBot App 🎉

This README provides a comprehensive guide to integrate Google Assistant with your React Native app using the voicebot-react-native-expo package. After installing and testing the package, follow these steps to enable Google Assistant integration. ✨

1️⃣ Deep Link Setup 🔗

This section outlines how to configure deep links to allow Google Assistant to launch your app and automatically start the VoiceBot. 🤖

1.1 Update AndroidManifest.xml 📝

Add the following intents and metadata within the <queries> tag and your main activity's <activity> tag in your AndroidManifest.xml. Replace yourappname_in_small_letter with your actual app name in lowercase (e.g., cookdine, meesho).

<queries>
  <!-- ... other queries intents ... -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" />
    </intent>
</queries>

<activity ... >

    <!-- ... other activity settings ... -->

    <!-- Intent filter for https deep links -->
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" android:host="start" />
    </intent-filter>

    <!-- Intent filter for your app scheme -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" android:host="expo-development-client" android:pathPattern=".*" />
    </intent-filter>

    <meta-data
        android:name="android.app.shortcuts"
        android:resource="@xml/shortcuts" />
</activity>

1.2 Create shortcuts.xml 📄

Create a file named shortcuts.xml in main/res/xml/ and paste the following code, replacing yourappname_in_small_letter with your app's name in lowercase.

<?xml version="1.0" encoding="utf-8"?>
<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
    <shortcut
        android:shortcutId="valet"
        android:shortcutShortLabel="@string/activity_valet">
        <capability-binding android:key="actions.intent.START_EXERCISE">
            <parameter-binding
                android:key="exercise.name"
                android:value="@array/valetSynonyms"/>
        </capability-binding>
    </shortcut>
    <capability android:name="actions.intent.START_EXERCISE">
        <intent>
            <url-template android:value="yourappname_in_small_letter://start/{?exercise}" />
            <parameter android:name="exercise.name" android:key="exercise" />
        </intent>
    </capability>
</shortcuts>

1.3 Create arrays.xml 🗄️

Create arrays.xml in res/values/ with the following content:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="valetSynonyms">
        <item>my valet</item>
        <item>valet</item>
        <item>voicebot</item>
        <item>voice bot</item>
        <item>book valet</item>
        <item>kipps</item>
        <item>kipps ai</item>
    </array>
</resources>

1.4 Update strings.xml 🔤

Add the following string resource to your res/values/strings.xml:

<string name="activity_valet">my valet</string>

1.5 Test Deep Link 🧪

Connect your device in USB debugging mode with your app installed. Use this ADB command (replace yourappname):

adb shell am start -a android.intent.action.VIEW -d "yourappname://start"

This should open your app and start the VoiceBot! ✅

2️⃣ Google Assistant Testing 🗣️

2.1 Prerequisites ✔️

• Google Play Console Account: 🎮
• Android Studio (Hedgehog | 2023.1.1): 🦔
• App Actions Test Tool Plugin: 🔌
• React Native App (0.73.3 or lower, Gradle 8.3 or lower): Create a separate test app. ⏪
• Consistent Google Account: 🔄

2.2 Setup and Testing ⚙️

1. Create Test App:

   npx @react-native-community/cli@latest init YourAppName --version 0.73.3

2. Copy Resources: Copy the res folder and the deep link intent filters/metadata from your main app's AndroidManifest.xml into the test app's AndroidManifest.xml. 📂

3. Open in Android Studio: Open the test app in Android Studio Hedgehog | 2023.1.1. 💻

4. App Actions Test Tool: Launch the plugin. 🚀

5. Create Preview: Click "Create Preview" (original app installed on connected device). 📱

6. Run App Action: Click "Run App Action" to trigger Assistant and start the VoiceBot! ✨

7. Test Voice Commands: Try commands like "Start kipps," "Start valet," "Start voicebot," etc. 🗣️

8. Testing and Release: Test thoroughly before production release. 🧪

🎉 Congratulations! You've integrated Google Assistant! Users can now launch your app with voice commands. 🥳

3️⃣ Resources 📚

Here is Example App: GitHub_Link

Here is DOC file for assistant integration : Google_Docs