'))
)
```
To specify the circular background
```dart
Container(
height: 45,
width: 45,
child:SlangConvaTrigger(enableCircularBackground: true)
)
```
Note:- There are other options to customize your trigger:-
1- icon => If you want to specify an icon instead of an image asset
2- iconColor => For specifying icon colour
2- backgroundColor => For specifying the background colour of the circle
{% endtab %}
{% tab title="Web" %}
Add the below HTML element to your HTML markup in the place where you want the trigger (the default image is a microphone icon) to appear (usually next to the search bar).
```html
```
To specify a custom image for the microphone icon, please specify the `src` attribute in the trigger element.
**src**: A string representing the remote URL of the image.
Example:
```html
```
***
{% hint style="danger" %}
If you are using typescript, then you might get the following error -
{% code overflow="wrap" %}
```
Property 'slang-conva-trigger' does not exist on type 'JSX.IntrinsicElements'.
```
{% endcode %}
To resolve this, create a `declaration.d.ts` file and add the following to this new file -
{% code lineNumbers="true" %}
```ts
declare namespace JSX {
interface IntrinsicElements {
"slang-conva-trigger": any;
}
}
```
{% endcode %}
{% endhint %}
{% endtab %}
{% endtabs %}
### 2.3 Handler for Voice Search
Once the app has integrated the trigger, the next step is to register a callback to handle the voice search commands from the end user. CONVA will process the utterance spoken by the end user and if it detects that the user is trying to do a valid search operation, it will invoke the registered callback with the search string. Note that the search string will always be in English irrespective of which language the end user spoke it in. CONVA will automatically translate other language inputs into English.
{% tabs %}
{% tab title="Android" %}
```java
SlangRetailAssistant.setOnSearchListener(
new OnSearchListener() {
@Override
public void onSearch(SearchInfo searchInfo, final SearchUserJourney searchUserJourney) {
String searchString = searchInfo.getSearchString();
// Fire the actual search using the searchString
}
}
);
```
Or, utilize the onSearch callback provided by the SlangConvaTriggerView component.
```java
SlangConvaTrigger convaTrigger = findViewById(R.id.your_id);
convaTrigger.setOnSearchListener(
new OnSearchListener() {
@Override
public void onSearch(SearchInfo searchInfo, final SearchUserJourney searchUserJourney) {
String searchString = searchInfo.getSearchString();
// Fire the actual search using the searchString
}
}
);
```
{% endtab %}
{% tab title="iOS" %}
SlangRetailAssistant.onSearch = { (searchInfo, searchUserJourney) in
let searchString = searchInfo.searchString
// Fire the actual search using the searchString
...
}
{% endtab %}
{% tab title="React Native" %}
```javascript
SlangRetailAssistant.setAction({
onSearch: (searchInfo, searchUserJourney) => {
String searchString = searchInfo["description"]
// Fire the actual search using the search string
}
});
```
{% endtab %}
{% tab title="Flutter" %}
```dart
SlangRetailAssistant.setOnSearchListener((searchInfo, searchUserJourney) {
String searchString = searchInfo.toString();
// Fire the actual search using the searchString
});
```
{% endtab %}
{% tab title="Web" %}
```javascript
SlangRetailAssistant.setOnSearchListener({
onSearch(searchInfo, searchUserJourney) {
const searchString = searchInfo.item.description;
}
})
```
{% endtab %}
{% endtabs %}
