Customizing the Visual nature of the Assistant

The Assistant has a bunch of visual elements that can be customized. This section details the visual elements and the ones that can be controlled

• Slang Trigger

• Slang Surface

• Onboarding flow

• Coachmarks

Assistant Trigger

Slang Trigger is the microphone icon that is the entry point for end-users to invoke the Assistant.

There are two types of triggers that are supported by Slang -

• Global Trigger

• Inline Trigger

Global Trigger

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

AssistantConfiguration config = new AssistantConfiguration.Builder()

RetailAssistantUIPosition retailAssistantUIPosition
    = new RetailAssistantUIPosition.Builder()
    .setBaseUIPosition(RetailAssistantUIPosition.UIPosition.BOTTOM_RIGHT)
    .setOffsetXDp(-8)
    .setOffsetYDp(-8)
    .setIsDraggable(true)
    .setIsForcedAtStartup(true)
    .build();
    
config.setUIPosition(retailAssistantUIPosition)    
            

AssistantConfiguration config = new AssistantConfiguration.Builder()

TravelAssistantUIPosition travelAssistantUIPosition
    = new TravelAssistantUIPosition.Builder()
    .setBaseUIPosition(TravelAssistantUIPosition.UIPosition.TOP_CENTER)
    .setOffsetXDp(8)
    .setOffsetYDp(8)
    .setIsDraggable(true)
    .setIsForcedAtStartup(true)
    .build();
    
config.setUIPosition(retailAssistantUIPosition) 

Other trigger related customizations

• 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.

SlangRetailAssistant.getUI().setTriggerImageResource(R.drawable.trigger);
SlangRetailAssistant.getUI().setTriggerSize(50, 50); 
//Numbers are represented in dp

AssistantConfiguration config = new AssistantConfiguration.Builder()
config.enableCustomTrigger(true)

//To start a new conversation programatically,
SlangRetailAssistant.startConversation(RetailUserJourney.SEARCH, this);

SlangTravelAssistant.getUI().setTriggerImageResource(R.drawable.trigger);
SlangTravelAssistant.getUI().setTriggerSize(50, 50); 
//Numbers are represented in dp

AssistantConfiguration config = new AssistantConfiguration.Builder()
config.enableCustomTrigger(true)

//To start a new conversation programatically,
SlangTravelAssistant.startConversation(TravelUserJourney.SEARCH, this);

Inline Trigger

The Assistant Trigger can also be placed inline into the app, which is useful for apps which have either enabled Slang only for specific use-cases or there is a dominant use-case (eg Search inside e-commerce apps).

There are two types of inline triggers

• App Managed Triggers

• Slang Managed Triggers

Slang Surface

Slang Surface is the primary interface that interacts with the end-user whenever the user is ready to speak or when the Assistants wants to inform the user about something

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.

SlangRetailAssistant.getUI().setTextColor("#3e3e52");
SlangRetailAssistant.getUI().setSecondaryTextColor("#747f8d");
SlangRetailAssistant.getUI().setTextHighlightColor("#1034d9");
SlangRetailAssistant.getUI().setTypeface(ResourcesCompat.getFont(application, R.font.fontname));
SlangRetailAssistant.getUI().setSettingsButtonBackgroundColor("#a1162c");
SlangRetailAssistant.getUI().setControlButtonBackgroundColor("#3e3e52");
SlangRetailAssistant.getUI().setBackgroundColorGradient(arrayOf("#FFFBEEEF", "#E6FBEEEF", "#00FBEEEF"));
SlangRetailAssistant.getUI().setForegroundColorGradient(arrayOf("#d84e55", "#ff8081"));
SlangRetailAssistant.getUI().setWaveVelocity(0.5f);

Onboarding Flow

When the user invokes the Assistant for the very first time, the Assistant does a few extra steps to successfully onboard the user to start using the Assistant.

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.

AssistantConfiguration config = new AssistantConfiguration.Builder()

   .setOnboardingInfoTitle(new HashMap<Locale, String>() {
       {
          put(SlangLocale.LOCALE_ENGLISH_IN, "A word is worth a thousand clicks.");
          put(SlangLocale.LOCALE_HINDI_IN, "एक शब्द एक हजार क्लिक के लायक है");
          put(SlangLocale.LOCALE_KANNADA_IN, "ಒಂದು ಪದವು ಸಾವಿರ ಕ್ಲಿಕ್\u200Cಗಳಿಗೆ ಯೋಗ್ಯವಾಗಿದೆ.");
        }
    })
    
   .setOnboardingInfoTitle(new HashMap<Locale, String>() {
       {
          put(SlangLocale.LOCALE_ENGLISH_IN, "Now you can use your voice to get things done.");
          put(SlangLocale.LOCALE_HINDI_IN, "अब आप काम पूरा करने के लिए अपनी आवाज का इस्तेमाल कर सकते हैं");
          put(SlangLocale.LOCALE_KANNADA_IN, "ಈಗ ನೀವು ಕೆಲಸಗಳನ್ನು ಮಾಡಲು ನಿಮ್ಮ ಧ್ವನಿಯನ್ನು ಬಳಸಬಹುದು.");
        }
    })
    
    .setOnboardingPrimaryTitle(new HashMap<Locale, String>() {
       {
          put(SlangLocale.LOCALE_ENGLISH_IN, "You can now talk to your app!");
          put(SlangLocale.LOCALE_HINDI_IN, "अब आप अपने ऐप के साथ बात कर सकते हैं!");
          put(SlangLocale.LOCALE_KANNADA_IN, "ಈಗ ನೀವು ನಿಮ್ಮ ಅಪ್ ಜೊತೆ ಮಾತನಾಡಬಹುದು!");
        }
    })
    
    .setOnboardingPrimaryDescription(new HashMap<Locale, String>() {
       {
          put(SlangLocale.LOCALE_ENGLISH_IN, "Click here to begin...");
          put(SlangLocale.LOCALE_HINDI_IN, "शुरू करने के लिए यहां क्लिक करें...");
          put(SlangLocale.LOCALE_KANNADA_IN, "ಪ್ರಾರಂಭಿಸಲು ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ...");
        }
    })
    
    .setOnboardingInfoTitleSize(32.0f)
    
    .setOnboardingInfoDescriptionSize(24.0f)
    
    .disableOnboardingLocaleSelection(false)
    
    .setInfoTextColor("#FF0000")
    
    .setAccentColor("#FF0000")

Coachmarks

The visual nudges that are shown on the screen to inform the user about the presence of the Assistant inside the app.

There are two types of coachmarks that are supported

Onboarding Coachmark

The coachmark that is shown to introduce the user to the Assistant, usually on the home screen of the app

This is controlled as part of the onboarding experience described above

Contextual Coachmark

The coachmark that is shown when the user does something via touch which could have been done via voice also (eg searching by typing into the search bar)