Search…
Customizing the Assistant UI
This section includes all customizations that are available on the UI that gets displayed once the app is integrated with the assistant.

Customizing the Slang's Trigger (mic icon)

The trigger UI that's offered by the assistant has the following customizations :

Customizing the trigger position :

    The base position of the trigger
      This indicates the relative position of the trigger UI on the application's screen.
      It is an enum field that includes the following values :
        BOTTOM_CENTER
        BOTTOM_LEFT
        BOTTOM_RIGHT
        CENTER_LEFT
        CENTER
        CENTER_RIGHT
        TOP_LEFT
        TOP_CENTER
        TOP_RIGHT
      The default value for this field is BOTTOM_CENTER
    The x-axis offset from the base position
      This indicates the x-axis offset of the trigger UI from the relative position mentioned above
      The default value for this field is 0
      Note: Offsets are always calculated from the top left. If you want to specify it from the opposite direction indicate that with the negative value.
        For Example: if you want to specify 8 from the right, the value needs to be -8.
    The y-axis offset from the base position
      This indicates the y-axis offset of the trigger UI from the relative position mentioned above
      The default value for this field is 0
      Note: Offsets are always calculated from the top left. If you want to specify it from the opposite direction indicate that with the negative value.
        For Example: if you want to specify 8 from the bottom, the value needs to be -8.
    The draggable parameter
      This indicates whether the trigger UI can be dragged and placed anywhere on the screen by the user.
      The default value for this field is true
    The forcedAtStartup paramter
      This indicates whether the trigger needs to reset to the position mentioned above, even in cases where the user chose to drag it and place it elsewhere.
      The default value for this field is false
RetailAssistantSDK
TravelAssistantSDK
1
AssistantConfiguration config = new AssistantConfiguration.Builder()
2
3
RetailAssistantUIPosition retailAssistantUIPosition
4
= new RetailAssistantUIPosition.Builder()
5
.setBaseUIPosition(RetailAssistantUIPosition.UIPosition.BOTTOM_RIGHT)
6
.setOffsetXDp(-8)
7
.setOffsetYDp(-8)
8
.setIsDraggable(true)
9
.setIsForcedAtStartup(true)
10
.build();
11
12
config.setUIPosition(retailAssistantUIPosition)
13
Copied!
1
AssistantConfiguration config = new AssistantConfiguration.Builder()
2
3
TravelAssistantUIPosition travelAssistantUIPosition
4
= new TravelAssistantUIPosition.Builder()
5
.setBaseUIPosition(TravelAssistantUIPosition.UIPosition.TOP_CENTER)
6
.setOffsetXDp(8)
7
.setOffsetYDp(8)
8
.setIsDraggable(true)
9
.setIsForcedAtStartup(true)
10
.build();
11
12
config.setUIPosition(retailAssistantUIPosition)
Copied!
    setTriggerImageResource :
      This API sets the image for the trigger UI.
      It takes a resource identifier.
    setTriggerSize :
      This API sets the size of the trigger UI.
      It takes 2 parameters for width and height.
    enableCustomTrigger :
      This API lets you set your own trigger UI instead of using the Slang Global Trigger.
      It takes a boolean parameter and the default value is false.
      Note :
        If you set this parameter to true, you will need to invoke the assistant using the startConversation(<UserJourney>,<Activity>) API.
RetailAssistantSDK
TravelAssistantSDK
1
SlangRetailAssistant.getUI().setTriggerImageResource(R.drawable.trigger);
2
SlangRetailAssistant.getUI().setTriggerSize(50, 50);
3
//Numbers are represented in dp
4
5
AssistantConfiguration config = new AssistantConfiguration.Builder()
6
config.enableCustomTrigger(true)
7
8
//To start a new conversation programatically,
9
SlangRetailAssistant.startConversation(RetailUserJourney.SEARCH, this);
Copied!
1
SlangTravelAssistant.getUI().setTriggerImageResource(R.drawable.trigger);
2
SlangTravelAssistant.getUI().setTriggerSize(50, 50);
3
//Numbers are represented in dp
4
5
AssistantConfiguration config = new AssistantConfiguration.Builder()
6
config.enableCustomTrigger(true)
7
8
//To start a new conversation programatically,
9
SlangTravelAssistant.startConversation(TravelUserJourney.SEARCH, this);
Copied!

Customizing the Onboarding Experience

The onboarding experience offered by the assistant has the following customizations :
    setOnboardingInfoTitle :
      This method is used to configure the title text that is displayed on the onboarding info dialog.
      This takes a hashmap of [Locale: String] to make sure it uses the ideal title text based on the default locale specified during the initialization process.
    setOnboardingInfoDescription :
      This method is used to configure the description text that is displayed on the onboarding info dialog.
      This takes a hashmap of [Locale: String] to make sure it uses the ideal description text based on the default locale specified during the initialization process.
    setOnboardingInfoTitleSize :
      This method is used to configure the size of the title text size that is displayed on the onboarding info dialog.
      This takes a float value to indicate the size.
    setOnboardingInfoDescriptionSize:
      This method is used to configure the size of the description text that is displayed on the onboarding info dialog.
      This takes a float value to indicate the size.
    setOnboardingPrimaryTitle :
      This method is used to configure the title on the coach mark that gets shown on the trigger UI the very first time post the initialization process.
      This takes a hashmap of [Locale: String] to make sure it uses the ideal coach mark title based on the default locale specified during the initialization process.
    setOnboardingPrimaryDescription :
      This method is used to configure the description text on the coach mark that gets shown on the trigger UI the very first time post the initialization process.
      This takes a hashmap of [Locale: String] to make sure it uses the ideal coach mark description based on the default locale specified during the initialization process.
    disableOnboardingLocaleSelection :
      The onboarding flow allows the users to change the locale if they are not happy with the default locale that the SDK instantiated with. This parameter is to disable that locale selection process.
      This takes a boolean, and the default is false
    setInfoTextColor :
      This method is used to configure the color associated info title and description on the info dialog.
      This takes a String which describes the color in hex code.
    setAccentColor :
      This method is used to configure the color associated with the buttons that are available on the onboarding info dialog. It is also used to configure the color highlight color in the locale selection dialog which indicates the currently selected locale.
      This takes a String which describes the color in hex code.
Android Native
1
AssistantConfiguration config = new AssistantConfiguration.Builder()
2
3
.setOnboardingInfoTitle(new HashMap<Locale, String>() {
4
{
5
put(SlangLocale.LOCALE_ENGLISH_IN, "A word is worth a thousand clicks.");
6
put(SlangLocale.LOCALE_HINDI_IN, "एक शब्द एक हजार क्लिक के लायक है");
7
put(SlangLocale.LOCALE_KANNADA_IN, "ಒಂದು ಪದವು ಸಾವಿರ ಕ್ಲಿಕ್\u200Cಗಳಿಗೆ ಯೋಗ್ಯವಾಗಿದೆ.");
8
}
9
})
10
11
.setOnboardingInfoTitle(new HashMap<Locale, String>() {
12
{
13
put(SlangLocale.LOCALE_ENGLISH_IN, "Now you can use your voice to get things done.");
14
put(SlangLocale.LOCALE_HINDI_IN, "अब आप काम पूरा करने के लिए अपनी आवाज का इस्तेमाल कर सकते हैं");
15
put(SlangLocale.LOCALE_KANNADA_IN, "ಈಗ ನೀವು ಕೆಲಸಗಳನ್ನು ಮಾಡಲು ನಿಮ್ಮ ಧ್ವನಿಯನ್ನು ಬಳಸಬಹುದು.");
16
}
17
})
18
19
.setOnboardingPrimaryTitle(new HashMap<Locale, String>() {
20
{
21
put(SlangLocale.LOCALE_ENGLISH_IN, "You can now talk to your app!");
22
put(SlangLocale.LOCALE_HINDI_IN, "अब आप अपने ऐप के साथ बात कर सकते हैं!");
23
put(SlangLocale.LOCALE_KANNADA_IN, "ಈಗ ನೀವು ನಿಮ್ಮ ಅಪ್ ಜೊತೆ ಮಾತನಾಡಬಹುದು!");
24
}
25
})
26
27
.setOnboardingPrimaryDescription(new HashMap<Locale, String>() {
28
{
29
put(SlangLocale.LOCALE_ENGLISH_IN, "Click here to begin...");
30
put(SlangLocale.LOCALE_HINDI_IN, "शुरू करने के लिए यहां क्लिक करें...");
31
put(SlangLocale.LOCALE_KANNADA_IN, "ಪ್ರಾರಂಭಿಸಲು ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ...");
32
}
33
})
34
35
.setOnboardingInfoTitleSize(32.0f)
36
37
.setOnboardingInfoDescriptionSize(24.0f)
38
39
.disableOnboardingLocaleSelection(false)
40
41
.setInfoTextColor("#FF0000")
42
43
.setAccentColor("#FF0000")
Copied!

Customizing the Surface UI experience

The surface UI customization offered by the assistant are as follows :
    disableSurfaceLocaleSelection :
      The surface by default provides control to change the current locale. This can be done by clicking on the locale button on the surface.
      This method is used to disable the locale control on the surface.
      It takes a boolean and the default is false.
    setTypeface :
      This API sets the typeface of all the components on the surface.
      It takes a typeface parameter.
    setForegroundColorGradient :
      This API sets the wave's color and intermediate progress color on the surface.
      It takes an array of Strings, representing the color hex code.
      Ideally, this expects a dark color1 and a lighter color2 and we will build the wave UI accordingly.
    setBackgroundColorGradient :
      This API sets the background color gradient of the assistant surface.
      It takes an array of Strings, representing the color hex code.
      Ideally, this expects a higher alpha color1, medium alpha color2, and a transparent color color3.
    setWaveVelocity :
      This API sets the wave animation velocity that is shown on the assistant surface.
      It takes a float and the default value is 1.0
    setTextHightlightColor :
      This method is used to set the highlight color when the assistant is actively speaking
      It takes a String, representing the color hex code.
    setTextColor :
      This API sets the primary text color of the slang surface.
      This color is also used on the text that displays the user spoke text and slang spoken text until talkback starts speaking.
      It takes a String, representing the color hex code.
    setSecondaryTextColor :
      This API sets the color of the text that appears in the top row of the slang assistant surface.
      It takes a String, representing the color hex code.
    setSettingsButtonBackgroundColor :
      This API sets the background color for the mute and locale change buttons.
      It takes a String, representing the color hex code.
    setControlButtonBackgroundColor :
      This API sets the background color for the close and help buttons.
      It takes a String, representing the color hex code.
RetailAssistantSDK
TravelAssistantSDK
1
SlangRetailAssistant.getUI().setTextColor("#3e3e52");
2
SlangRetailAssistant.getUI().setSecondaryTextColor("#747f8d");
3
SlangRetailAssistant.getUI().setTextHighlightColor("#1034d9");
4
SlangRetailAssistant.getUI().setTypeface(ResourcesCompat.getFont(application, R.font.fontname));
5
SlangRetailAssistant.getUI().setSettingsButtonBackgroundColor("#a1162c");
6
SlangRetailAssistant.getUI().setControlButtonBackgroundColor("#3e3e52");
7
SlangRetailAssistant.getUI().setBackgroundColorGradient(arrayOf("#FFFBEEEF", "#E6FBEEEF", "#00FBEEEF"));
8
SlangRetailAssistant.getUI().setForegroundColorGradient(arrayOf("#d84e55", "#ff8081"));
9
SlangRetailAssistant.getUI().setWaveVelocity(0.5f);
Copied!
1
SlangTravelAssistant.getUI().setTextColor("#3e3e52");
2
SlangTravelAssistant.getUI().setSecondaryTextColor("#747f8d");
3
SlangTravelAssistant.getUI().setTextHighlightColor("#1034d9");
4
SlangTravelAssistant.getUI().setTypeface(ResourcesCompat.getFont(application, R.font.fontname));
5
SlangTravelAssistant.getUI().setSettingsButtonBackgroundColor("#a1162c");
6
SlangTravelAssistant.getUI().setControlButtonBackgroundColor("#3e3e52");
7
SlangTravelAssistant.getUI().setBackgroundColorGradient(arrayOf("#FFFBEEEF", "#E6FBEEEF", "#00FBEEEF"));
8
SlangTravelAssistant.getUI().setForegroundColorGradient(arrayOf("#d84e55", "#ff8081"));
9
SlangTravelAssistant.getUI().setWaveVelocity(0.5f);
Copied!
Last modified 1mo ago