# Code Integration - Basic Steps By now you must have configured and published your Assistant via the Slang Console. Congratulations! :) If you have not already done that, you can do so by following the instructions [here](/slang/getting-started/integrating-slang-retail-assistant/setting-up-the-assistant.md). While the overall idea is similar across platforms, the specific steps involved vary slightly based on the platform on which your app is built. Supported platforms are: * Android Native * React Native for Android * Web (JS) Let's start coding! {% hint style="warning" %} For testing, we recommend using a physical Android device instead of an emulator because most emulators don't work well with microphones. {% endhint %} ## 1. Configure the build system The first step is to update the app's build system to include Slang's Travel Assistant SDK. {% tabs %} {% tab title="Android Native" %} ### Add the Slang dependency to your gradle files Add the path to the Slang maven repository to your top-level gradle file ``` # Add this to your top level gradle file allprojects { repositories { … maven { url "http://maven.slanglabs.in:8080/artifactory/gradle-release" } } } ``` Add the Slang Travel Assistant dependency to your app's gradle file ``` # Add this to your app's gradle file dependencies { … implementation 'in.slanglabs.assistants:slang-travel-assistant:4.0.27' } ``` {% endtab %} {% tab title="React Native" %} ### N/A {% endtab %} {% tab title="Web" %} ### **Install the Slang Travel Assistant package** The next step is to install the latest version of the required packages inside your code repo #### yarn setup If you use yarn for install packages, run the below command ``` $ yarn add @slanglabs/slang-travel-assistant ``` #### npm setup If you use npm for managing your packages, run the below command ```bash $ npm install @slanglabs/slang-travel-assistant --save ``` {% endtab %} {% endtabs %} ## 2. Code integration ### 2.1 Initialization The next step is to initialize the SDK with the [keys](/slang/getting-started/integrating-slang-travel-assistant/setting-up-the-assistant.md) you obtained after creating the Assistant in the Slang console. {% tabs %} {% tab title="Android Native" %} The recommendation is to perform the initialization in the `onCreate` method of the `Application` class. If the app does not use an `Application` class, the next best place would be the `onCreate` method of the primary `Activity` class. ```java // Your application class protected void onCreate(Bundle savedInstance) { ... AssistantConfiguration configuration = new AssistantConfiguration.Builder() .setAPIKey() .setAssistantId() .setEnvironment(STAGING) // Change this to PRODUCTION once you've published the Assistant to production environment .build(); SlangTravelAssistant.initialize(this, configuration); } ``` {% endtab %} {% tab title="React Native" %} This should ideally be done in the componentDidMount of your main app component ```javascript import SlangRetailAssistant from '@slanglabs/react-native-slang-retail-assistant'; SlangRetailAssistant.initialize({ requestedLocales: ['en-IN', 'hi-IN'], // The languages to enable assistantId: '', // The Assistant ID from the console apiKey: '', // The API key from the console }) ``` {% endtab %} {% tab title="Web" %} ```javascript import SlangTravelAssistant from '@slanglabs/slang-travel-assistant'; SlangTravelAssistant.init({ requestedLocales: ['en-IN', 'hi-IN'], // The languages to enable assistantID: '', // The Assistant ID from the console apiKey: '', // The API key from the console }) ``` {% endtab %} {% endtabs %} ### 2.2 Show the Trigger (microphone icon) Once the Assistant is initialized, the next step is to show the microphone UI element (what we call the *Trigger*) that the app's users can click on to invoke the Assistant and speak to it. {% tabs %} {% tab title="Android Native" %} Add the below line to the `onResume` method of the Activities where you want the Assistant to be enabled. ```java protected void onResume(Bundle savedInstance) { ... SlangTravelAssistant.getUI().showTrigger(this); // There is a corresponding hideTrigger too if needed } ``` {% endtab %} {% tab title="React Native" %} One can call "show" and "hide" methods as required to control the visibility of the Assistant ```javascript SlangRetailAssistant.ui.showTrigger(); // There is a corresponding hideTrigger too if needed ``` {% endtab %} {% tab title="Web" %} One can call "show" and "hide" methods as required to control the visibility of the Assistant ```javascript SlangTravelAssistant.ui.show(); // There is a corresponding hide too if needed ``` {% endtab %} {% endtabs %} The trigger is sticky, which means that it will show up on all Activities after it is made visible. To prevent the trigger from showing up on specific activities, you will need to call: `SlangTravelAssistant.getUI().hideTrigger(this)` ### 2.3 Implement Actions {% hint style="info" %} **Refresher:** A `UserJourney` represents a path that a user may take to reach their goal when using a web or mobile app. See [Voice Assistant Concepts](/slang/user-journey-and-app-states.md#user-journey) for details. {% endhint %} Last but not the least, the app needs to implement the Actions associated with the various User Journeys supported by the Assistant. This can be done as shown below {% tabs %} {% tab title="Android Native " %} ```java SlangRetailAssistant.setAction(new SlangRetailAssistant.Action() { @Override public SearchUserJourney.AppState onSearch(SearchInfo searchInfo, SearchUserJourney searchJourney) { // Handle search requests // … searchJourney.setSuccess(); //Setting app state condition return SearchUserJourney.AppState.SEARCH_RESULTS; //Returning app state. } @Override public NavigationUserJourney.AppState onNavigation( NavigationInfo navigationInfo, NavigationUserJourney navigationUserJourney ) { // Handle navigation requests // … navigationUserJourney.setSuccess(); return NavigationUserJourney.AppState.NAVIGATION; } @Override public void onAssistantError(final AssistantError error) { // Handle errors that might have occurred during the Assistant lifecycle // Error codes available // FATAL_ERROR, SYSTEM_ERROR, ASSISTANT_DISABLED, INVALID_CREDENTIALS, } } ``` {% endtab %} {% tab title="React Native" %} ``` ``` {% endtab %} {% tab title="Web" %} ``` SlangTravelAssistant.setAction({ onSearch: (searchInfo, searchUserJourney) => { // use searchInfo for performing the search in app searchUserJourney.setSuccess(); return searchUserJourney.AppStates.SEARCH_RESULTS; }, onNavigation: (navigationInfo, navigationUserJourney) => { // use navigationInfo to know the navigation target navigationUserJourney.setNavigationSuccess(); return navigationUserJourney.AppState.NAVIGATION; }, }); ``` {% endtab %} {% endtabs %} The following user journeys are currently supported by the Slang Travel Assistant: * Voice Search * Voice Navigation The Action Handler interface has an explicit callback for each of the supported user journeys. Whenever the Assistant detects the user journey the user is interested in (based on what they spoke), it invokes the callback associated with that user journey. When these callbacks are invoked, the Assistant also passes the parametric data corresponding to the user journey that the Assistant was able to gather. The app is then expected to: 1. Consume the parametric data as needed 2. Optionally launch appropriate UI actions 3. Set appropriate conditions in the Assistant based on the app's internal state 4. Return the `AppState` that the app transitioned to ### 2.4 Return the `AppState` and `Condition` {% hint style="info" %} **Refresher:** An `AppState` typically corresponds to a screen that the app transitioned to based on user input. See [Voice Assistant Concepts](/slang/user-journey-and-app-states.md#app-states) for details. {% endhint %} An `AppState` indicates which state the app transitioned to, based on the user-journey and parametric data that was passed to the app. The list of`AppStates`that are supported depends on the user journey. `Conditions` represent more detailed states of the app within a particular app state. For example, when performing a search, the search might have failed or the items might be out of stock. The app can use`AppState`conditions to indicate to the Assistant the correct condition. The condition controls the message that the Assistant speaks up after the call-back returns. {% tabs %} {% tab title="Android Native" %} ``` public SearchUserJourney.AppState onSearch(SearchInfo searchInfo, SearchUserJourney searchJourney) { // Handle the Search requests // ... searchUserJourney.setSuccess(); return SearchUserJourney.AppState.SEARCH_RESULTS; } ``` {% endtab %} {% tab title="React Native" %} ``` onSearch: async (searchInfo, searchUserJourney) => { // Handle the search request // ... return SearchUserJourney.AppState.SEARCH_RESULTS; } ``` {% endtab %} {% tab title="Web" %} ``` onSearch: async (searchInfo, searchUserJourney) => { // Handle the search request using searchInfo // ... return searchUserJourney.AppStates.SEARCH_RESULTS; } ``` {% endtab %} {% endtabs %} #### 2.4.2 Assistant Prompts Based on the `AppState` returned and the conditions that were set, the Assistant will speak out an appropriate message to the user. {% hint style="info" %} The prompts spoken by the Assistant are customizable. Refer to the [Customizing the Assistant](broken://pages/-MOf6QJG8KGxusCCCxx9) section, if you're interested in customization. {% endhint %} That's it! These are the basic set of steps required to add Slang's In-App Voice Assistant into your app. Beyond this integration, Slang Voice Assistants provide a lot more power and flexibility to cater to the more advanced needs of apps. Please refer to the [Advanced Concepts](broken://pages/-MZ7afccmp5FF1A81FKl) section for more details. #### --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.conva.ai/slang/getting-started/integrating-slang-travel-assistant/code-integration-basic-steps.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.