React Native Voicebot Integration Guide 🚀

This guide provides a step-by-step walkthrough for seamlessly integrating the voicebot-react-native-cli package into your React Native project, enabling powerful voicebot functionality.

✨ Getting Started

Prerequisites

• Basic understanding of React Native concepts and the React Native CLI project/app.

1. Install the Package and Dependencies

Kick off your integration by installing the voicebot-react-native-cli package and its dependencies. Open your terminal and navigate to your React Native project's root directory, then execute the following command:

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

if you have already installed the voicebot-react-native-cli package then execute the following command:

npx voicebot-install

This command will install the important dependencies and automatically set up the necessary configurations for you.

2. Android Configuration 🤖

Link Vector Icons

Manually link the react-native-vector-icons library: in your android/app/build.gradle file, add the following

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

3. Update minSdkVersion and targetSdkVersion

1. Open your android/app/build.gradle file.

2. Locate the defaultConfig section and ensure minSdkVersion is set to at least 24:

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

4. Register Kipps Globals 🌎

In your project's index.js file, import the registerGlobals function and call it:

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

registerGlobals();

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

5. Integrate the VoiceBotButton Component 📞

1. Import the VoiceBotButton component into your React Native component:

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

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

   import React from 'react';
   import { StyleSheet, View } from 'react-native';
   import { VoiceBotButton } from 'voicebot-react-native-cli'; 
   
   export default function App() {
     return (
       <View style={styles.container}>
         <VoiceBotButton 
           voicebot_id="YOUR_VOICEBOT_ID"
           caller_id="YOUR_CALLER_ID" 
           caller_name="YOUR_CALLER_NAME" 
         />
       </View>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
   });

   Make sure to replace the placeholder values with your actual VoiceBot credentials.

5. Run Your App! 🎉

That's it! You have successfully integrated the voicebot-react-native-cli package into your React Native project. Build and run your app to start using the voicebot functionality.

Integrating Google Assistant with React Native App using Voicebot 🗣️

This document outlines the steps to integrate Google Assistant with your React Native application using the voicebot-react-native-cli package, enabling users to launch your app and initiate voice interactions through voice commands 🎤.

Prerequisites ✅

• voicebot-react-native-cli: Installed and tested in your React Native project.
• React Native Version: 0.73.3 (or compatible). This is crucial for compatibility with the required Android Studio and Gradle versions.
• Android Studio: Hedgehog | 2023.1.1 The Google Assistant plugin requires a specific version.
• Google Assistant Plugin: Installed in Android Studio. This plugin, also known as the App Actions Test Tool, is essential for testing and previewing 🛠️.
• Google Play Console Account: Needed for managing your app's releases and testing 🎮.
• Device/Emulator: An Android device or emulator connected via USB debugging, logged in with the same Google account as used in Android Studio and the Google Assistant plugin 📱.

Integration Steps ⚙️

1. AndroidManifest.xml Configuration 📄

Open your app's AndroidManifest.xml file and add the following within the <activity> tag of your main activity:

<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<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>
<meta-data android:name="android.app.shortcuts" android:resource="@xml/shortcuts" />

Replace yourappname_in_small_letter with your app's name in lowercase (e.g., cookdine, meesho).

2. Create shortcuts.xml ✂️

Create a file named shortcuts.xml in the main/res/xml/ directory and add the following content:

<?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>

Again, replace yourappname_in_small_letter with your lowercase app name.

3. Create arrays.xml 🗄️

Create a file named arrays.xml in res/values/ and add the following:

<?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>

These are the synonyms that users can say to trigger the voicebot.

4. Update strings.xml 📝

In your res/values/strings.xml file, add the following:

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

5. Test Deep Link 🔗

Use the following ADB command to test the deep link integration. Replace yourappname with your app's name (case-sensitive here, unlike the scheme used earlier).

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

If successful, your app should open when this command is executed.

6. Google Assistant Setup 🤖

Creating a Test App 🧪

1. Create a new React Native app with the exact same name as your original app, using React Native version 0.73.3:

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

2. Copy the res folder and the AndroidManifest.xml file from your original app and paste them into the corresponding directories of the newly created app.

3. Open the new project in Android Studio (Hedgehog | 2023.1.1). Make sure you're logged in with your Google Play Console account.

4. Install the Google Assistant plugin (App Actions Test Tool).

Configuring the Google Assistant Plugin 🔧

1. In Android Studio, with your new project open and the plugin installed, click on Create Preview.

2. Ensure your device or emulator is connected and your original app is installed on it.

3. Click the Run App Action button in the plugin. This should trigger the Google Assistant and open your app, starting the voicebot 🚀.

7. Voice Commands 🎙️

After completing the setup, users can say the following commands to Google Assistant to open your app and start the voicebot:

• "Start kipps"
• "Start valet"
• "Start voicebot"
• "Start kipps ai"
• "Start book valet"
• "Start my valet"

You can customize these phrases by modifying the valetSynonyms array in arrays.xml.

8. Testing and Release 🚢

• Internal Testing: Test your integration using an internal release track or by building an APK.
• Production Release: Once testing is complete, release your app to production 🎉.

This detailed guide should help you seamlessly integrate Google Assistant voice commands with your React Native application. Remember to carefully replace placeholder app names with your actual app name and ensure version compatibility for all tools and packages! Good luck! 👍

9. Resources 📚

Here is Example App: GitHub_Link

Here is DOC file for assistant integration : Google_Docs