Customize the AI agent look and feel

Alan AI provides advanced customization options to let you align the AI agent appearance with your app design and branding. Using Alan AI Studio, you can customize:

  • AI agent button: change appearance of the AI agent button that triggers the Alan AI Chat.

  • Alan AI Chat: tailor the Alan AI Chat to fit your design preferences.

Use case

Using Alan AI Studio, you can customize the AI agent button to match the app branding colors and style. Additionally, you can adjust the chat window colors and fonts to reflect the app theme.

Prerequisites

To successfully follow this exercise, make sure you have signed up for Alan AI Studio and created a project for the AI agent. For details, see Sign up for Alan AI Studio.

Customize the AI agent button

To customize the AI agent button:

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

  2. To the right of Visual styles, click Configure.

  3. Use the Alan Button tab to set the button size, adjust colors and replace the default logo on top of the button with a custom one.

  4. To the right of the Button Style Name field, click Save to save the created style.

    ../../_images/button.png

Customize the Alan AI chat

To customize the Alan AI chat:

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

  2. To the right of Visual styles, click Configure.

  3. Click the Text Chat tab.

  4. Use the Text Chat view to adjust the visual styles of the chat UI.

  5. To the right of the Button Style Name field, click Save to save the created style.

    ../../_images/chat.png

Validation

Reload the running sample app and make sure the button and chat styles are applied.

../../_images/chat-updated.png