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.

You can do the following:

• Enable or disable the AI agent button in the app

• Enable or disable the Speech-to-Text panel

• Record intent audio

• (Web) Play the ready-to-listen sound

• (Web) Change the button position

• (Web) Save the button position after drag-n-drop

• (Web) Send current page state to the server

• Change the button visual style

• Change the voice type, accent, pitch and rate

• Set the microphone timeout

• (Web) Enable the Alan AI Chat

• (Web) Get the app code for the Alan AI Plugin

• (iOS/Android) Take screenshots

• (iOS/Android) Keep the session active

• (iOS/Android) Use the wake word

• (iOS/Android) Use a custom wake word

• (iOS/Android) Enable the QR code reader

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:

• Change the button colors

• Change the button size

• Replace the Alan AI logo with a custom icon

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

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.

Replacing the Alan AI logo

To customize the look and feel of the AI agent button, you can replace the Alan AI logo on top of it with a custom icon or your company logo.

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

2. In the Logos settings section, click Add custom logos and select one or more image files.

3. Use the right and left controls below each button state to assign the image to this state.

For best results, the images you select must meet the following requirements:

• The image must be square.

• The recommended image size is 400x400 pixels.

• The images must be in the PNG, GIF or SVG format.

• The images should have transparent areas around the icon or logo.

Note

The SVG format is currently supported only on the Web platform.

To switch back to the default logo, select the initial image for the necessary button state.

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.

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.

Note

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

• Alan AI SDK for iOS (version 3.7.0 or later)

• Alan AI SDK for Android (version 4.21.0 or later)

• Alan AI SDK for Flutter (version 4.1.0 or later)

• Alan AI SDK for React Native (version 2.1.0 or later)

• Alan AI SDK for Ionic (version 3.0.0 or later)

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