MOPO AI Agent settings allow you to customize the visual elements to align with your website's branding. You can modify elements like the icon, title, font, colors, and background image to align your MOPO AI Agent with your website's design.
Title Bar
You can personalize your MOPO AI Agent’s title bar by customizing the icon and title displayed in the conversation window, aligning them with your website’s branding.
| Setting |
Description |
| Title |
Set a custom title that will appear alongside the icon in the title bar. |
Conversation Window
Customize the look and feel of the conversation window where users interact with your MOPO AI Agent. In this section, you can adjust the font, text color, and various other elements to ensure the conversation window matches your website's design and is easy for users to read and engage with.
| Setting |
Description |
| Font |
The font used by your agent in the conversation window, supporting both standard system fonts and custom web fonts (e.g., Google Fonts). Ensure the font enhances readability and aligns with your design preferences. NOTE: Only a single font should be entered in the input field. |
| Font Color |
The color of the text in the conversation window, specified using RGB or hex values. Choose a color that provides good contrast against the background for easy readability. Black (rgb(0, 0, 0) or #000000) or dark gray (rgb(169, 169, 169) or #A9A9A9) on a light background is generally a safe choice. |
| Accent Color |
The RGB or hex value for the accent color used in the conversation window for icons and conversational shortcuts. |
| Border Color |
The RGB or hex value for the border color of the conversation window. |
| Background Color |
The RGB or hex value for the background color of the conversation window. |
| Background Image |
The URL to an image (500x740) if you prefer to have an image instead of a solid color as the conversation window background. |
Minimized Agent Image
These settings enable you to customize how your MOPO AI Agent appears when minimized on your website. You can use the default image or upload a custom one. You can also tweak the colors to ensure the minimized agent aligns with your overall site aesthetics.
| Setting |
Description |
| Use default image |
Toggle this option to use the default minimized agent image or your custom image. |
| Foreground |
The RGB or hex value for the foreground color of the minimized agent. |
| Background |
The RGB or hex value for the background color of the minimized agent. |
| Use my image |
Enter a URL for a custom minimized agent image. The recommended image size is 39x39 px. |
Avatar Images
This setting allows you to customize whether you want your agent to use the default avatar image or your custom image that you have uploaded. You can also set the foreground and background colors to ensure your agent's avatar aligns with your website's branding.
| Setting |
Description |
| Use default image |
Toggle this option to use the default avatar image or your custom avatar. |
| Foreground |
The RGB or hex value for the foreground color of the default avatar. |
| Background |
The RGB or hex value for the background color of the default avatar. |
| Use my image |
Enter a URL for a custom avatar image. The recommended image size is 22x22 px. |
User
This setting enables you to customize whether you want your agent to use the default user image or your custom user image that you have uploaded. You can also set the foreground and background colors to ensure your agent's user image aligns with your website's aesthetics.
| Setting |
Description |
| Use default image |
Toggle this option to use the default user image or your custom user image. |
| Foreground |
The RGB or hex value for the foreground color of the default user image. |
| Background |
The RGB or hex value for the background color of the default user image. |
| Use my image |
Enter a URL for a custom user image. The recommended image size is 22x22 px. |
Button Customization
This setting enables you to customize the looks of the buttons of the promoted skills, the deployed skills and, the conversation starters/continuers.
Promoted Skills
| Setting |
Description |
| Background |
The RGBA value for the background color of the promoted skill button. |
| Font Color |
The RGBA value for the font color of the promoted skill button. |
| Border Color |
The RGBA value for the border color of the promoted skill button. |
Deployed Skills
| Setting |
Description |
| Background |
The RGBA value for the background color of the deployed skills button. |
| Font Color |
The RGBA value for the font color of the deployed skills button. |
| Border Color |
The RGBA value for the border color of the deployed skills button. |
Conversation Starters/Continuers
| Setting |
Description |
| Background |
The RGBA value for the background color of the conversation starters/continuers button. |
| Font Color |
The RGBA value for the font color of the conversation starters/continuers button. |
| Border Color |
The RGBA value for the border color of the conversation starters/continuers button. |
Footer Bar
You can personalize your MOPO AI Agent’s footer text displayed at the bottom right of your agent by customizing text displayed in this area.
| Setting |
Description |
| Footer |
Set a custom text that will appear in the footer area of the agent. |
Admin Mode Background
You can personalize the background image in the admin mode of the agent.
| Setting |
Description |
| Use default image |
Set the background image to be a screenshot of your webpage |
| Use my image |
Set the background image using any URL you provide. For the best results, use images with a 16:9 ratio. |
AI Agent Docs