Customization options

You can customize your AI agent to fit your app’s needs and color scheme. To access the customization options:

  1. In Alan AI Studio, at the top of the code editor, click Integrations.

  2. Click the Web, iOS or Android tab and use the options below to set up the necessary style and behavior for your AI agent.

../../../_images/customization_button_options.png

You can do the following:

Note

  • The AI agent settings are configured at the project level. If you have several projects, you need to define settings for them separately.

  • You can define different settings for every environment in the project: Development, Testing or Production, and for each platform or SDK: web, iOS or Android.

  • Some of the customization options are available on specific pricing plans. For details, see Plans & pricing.

Enabling or disabling the AI agent button

Use the Alan button is visible option to show or hide the AI agent button in the app.

Default

on/visible

Agent type

AI Chat/voice

Platforms

Web/iOS/Android

Enabling or disabling the Speech-to-Text panel

Use the Show Speech to text panel option to show or hide the speech-to-text panel for users of the app. The speech-to-text panel is active when the user gives voice commands to the AI a, showing the recognized input, and helps with visual feedback.

Note

The speech-to-text panel is not displayed in mobile web browsers on the Web platform.

Default

on/visible

Agent type

voice

Platforms

Web/iOS/Android

Recording intent audio

Use the Record intent audio option to record voice commands given by users. Audio recordings are available in the project logs and in the Analytics view.

Recording audio is a great way to debug user flows and adjust the dialog script. We have taken extra security measures to ensure all recordings are protected and available only to you as the project owner.

Default

off

Agent type

voice

Platforms

Web/iOS/Android

Playing the ready-to-listen sound

By default, when the user interacts with an AI agent, a special sound is played when Alan AI is ready to listen to the user’s utterances. If you do not want the sound to be played, disable the Play ready-to-listen sound option.

Default

on

Agent type

voice

Platforms

Web

Changing the button position

The AI agent button is draggable, so the user can change the button position in the app. If you do not want users to be able to drag the button around the page, disable the Allows changing the button position option.

Default

on

Agent type

AI Chat/voice

Platforms

Web

Saving the button position

Enable the Save the button position after drag-n-drop option to keep the latest button position after the page refresh.

The button position is kept during the current dialog session. When a new dialog session starts, the button is put in the default position.

Default

off

Agent type

AI Chat/voice

Platforms

Web

Sending the current page state

By default, Alan AI sends information about the state of the page currently active in the app to the Alan AI Cloud. This information is required to make the dialog more accurate and contextual. If you do not want to send information about the page state to Alan AI, disable the Send current page state to the server automatically option.

Default

on

Agent type

AI Chat/voice

Platforms

Web

Changing the button visual style

Use the Alan button visual style option to customize the visual style of the AI agent button to match your brand design and color scheme. You can:

Default

blue

Agent type

AI Chat/voice

Platforms

Web/iOS/Android

Changing the button styles

By default, the AI agent button is blue. If the default color does not fit the color scheme of your site or app, you can change it.

  1. In the Integrations view, to the right of the Visual styles field, click Configure.

  2. On the Alan Button tab, choose the necessary colors for every button state.

  3. To save the configured color scheme, in the Integrations view, to the right of the Button Code field, click Save and define the scheme name. You can switch between the default color scheme and saved color schemes at any time.

The button has the following states:

  • Idle State: the default state of the AI agent button

  • Listening State: Alan AI is listening and waiting for the user’s input

  • Processing State: Alan AI is analyzing the user’s input

  • Speaking Back State: Alan AI is speaking back to the user

  • Text Chat State: the state of the button for the text chat

  • Text Chat Avatar State: the icon for the AI agent in the full screen mode of the Alan AI Chat

../../../_images/customization_button_style.png

Changing the button size

The default size of the AI agent button displayed in the app is 64px. You can define the necessary button size directly in Alan AI Studio. In the Button Size section, drag the slider right or left to make the button larger or smaller.

../../../_images/button-size.png

Changing the voice type, accent, pitch and rate

Use the Alan voice option to change the AI agent voice:

  1. In the Integrations view, to the right of the Alan voice field, click Change.

  2. In the languages list, select the language for the AI agent, the regional accent and the voice type.

  3. To define the speaking rate (speed), use the upper slider. You can select a value in the range 0.3 to 2.5, where 1 is normal speed. For example, to set the speaking rate to half as fast, drag the slider to 0.5. To set the speaking rate to twice as fast, drag the slider to 2.

  4. To define the speaking pitch, use the lower slider. You can select a value in the range -20 to 20, where 20 means increase 20 semitones from the original pitch, -20 means decrease 20 semitones from the original pitch.

../../../_images/language-type.png

Default

English, US, Alan voice, normal speed (1), normal pitch (0)

Agent type

AI Chat/voice

Platforms

Web/iOS/Android

Setting the microphone timeout

Use this option to set the period after which the AI agent button is automatically deactivated. This option helps users save on battery/traffic and avoid unwanted commands. The microphone timeout functionality pairs great with using the wake word.

Default

10 seconds

Agent type

AI Chat/voice

Platforms

Web/iOS/Android

Enabling the Alan AI Chat

Use the Text chat option to display a chat UI for the AI agent in the app. The Alan AI Chat allows users to interact with the AI agent through text or use two input channels - voice and text - at the same time.

For details, see Enabling the Alan AI Chat.

Default

on/visible

Agent type

AI Chat

Platforms

Web

Getting the app code for the Alan AI Plugin

Use the Browser plugin option to copy the code for the Alan AI Plugin and display the AI agent in any web app.

For details, see Alan AI Plugin.

Default

off

Agent type

AI Chat

Platforms

Web

Taking screenshots

Use the Allows taking screenshots from devices option to take screenshots of the app with every voice command given by users. Screenshots are available in the Alan AI Studio logs and in the *Analytics view. Taking screenshots is a great way to debug user flows and adjust your dialog script accordingly. We have taken extra security measures to ensure that all screenshots are protected and available only to you as the project owner.

Default

off

Agent type

voice

Platforms

iOS/Android

Keeping the session active

Use the Keep active while the app is in the background option to keep the dialog session active even when the user puts the app in background mode. If this option is enabled, the user will be able to continue the conversation with the AI agent even while actively using other apps.

Default

off

Agent type

voice

Platforms

iOS/Android

Using the wake word

Use the Wake word option to allows users to activate the AI agent in the app with a special word or phrase.

The default wake words are Hey, Alan or OK, Alan. However, you can replace the default wake words with custom ones.

To enable the wake word:

  1. In the Integrations view, to the right of the Wake word field, click Change.

  2. To let users activate the AI agent with a wake word, turn on the Enable wake word option.

  3. To allow using the wake word even if the app is put in the background mode, enable the Use wake word in background option.

    Mind the following:

    • Together with this option, you must turn on the Enable wake word and Keep active while the app is in the background options. Otherwise, users will not be able to activate the AI agent with a wake word when the app is in the background mode.

    • (For iOS) To allow the background mode for an iOS app, in your XCode project, go to the Signing and Capabilities tab. In the top left corner, click + Capability and in the capabilities list, double-click Background Modes. In the Modes list, select the Audio, AirPlay, and Picture in Picture check box.

    • The app running in the background mode will remain collapsed. To bring the app to the foreground, the user will need to tap the microphone bar at the top of the device screen or the app icon itself.

    • VoIP apps having a higher priority such as Skype or telephone can interrupt dialog sessions. If this happens, the wake word will not work until the user re-opens the app.

Using a custom wake word

At present, custom wake word setup involves the Alan AI team.

To use a custom wake word:

  1. Contact the Alan AI team to obtain correct config data for the wake word you want to use.

  2. In the Integrations view, select the iOS or Android platform.

  3. To the right of Wake word field, click Change.

  4. Switch the Enable wake word toggle to the On position.

  5. To the right of the Wake word field, click Create custom wake word.

  6. In the Wake word name field, enter the name for the wake word you create.

  7. From the Acoustic model list, select the necessary acoustic model.

  8. In the Wake word model field, insert the JSON object obtained from the Alan AI team.

  9. Click Create wake word.

../../../_images/wake-word.png

Note

The custom wake word (version 3.0) requires specific versions of Alan AI SDK. You can get the latest version here:

Default

off

Agent type

voice

Platforms

iOS/Android

Enabling the QR code reader

Use the Enable QR Code reader option to enable the QR code reader and test how an AI agent works in the app.

With this option enabled, you can tap the Alan AI button in the app, hold it for 8 seconds and scan the QR code in Alan AI Studio with the device camera to connect to the AI project and evaluate the conversational experience.

Default

off

Agent type

voice

Platforms

iOS/Android