How do I change an agent's page design and avatar?
On the Design tab, set the logo, colors, page layout, video call mode, the avatar and its size.
Where is it?
Open the “Design” tab in the flow editor. It has two sections: “Page design” (the logo, colors and layout of the page visitors see in this agent) and “Avatar” (the character who talks in the agent).
On a published agent, “Save” keeps your changes in the draft; they reach the live page when you click “Publish”. A draft agent stays closed to visitors. “Preview” saves first and opens the draft, so you see the result on the page visitors will see before they do.
Logo and colors
- “Logo”: paste a link or click “Upload file” to upload a PNG, JPEG, WebP or SVG file (up to 2 MB). The dominant color of an uploaded logo becomes the primary color. If left empty, the Agenola logo is shown. Remove it with “Remove logo”.
- “Primary color”: the page's main color; blue by default.
- “Action and confirm buttons”, “File upload buttons”, “Microphone and text input”: these use the primary color by default. To give a group its own color, uncheck “Use primary color”.
- “Page background” and “Avatar background”.
For each color you can use the color picker or a hex code.
When you add the agent to your website, its button there uses the “Action and confirm buttons” color, or the primary color if that isn't set.
The “Powered by Agenola” line at the bottom of the page isn't shown on the Growth and Pro plans.
Page layout and avatar size
“Page layout” has four options; the default is “Avatar on top, form below”:
- “Form left, avatar right”
- “Avatar left, form right”
- “Avatar on top, form below”
- “Video call”: the avatar opens like a video call. Choose the “Opening view”: “Full screen”, “Half screen” or “Floating avatar”. The “Floating avatar corner” is set for every opening view: visitors can shrink and enlarge the call, and when they turn it into a floating avatar, it sits in this corner.
“Avatar size” goes from 50% to 140%; the default is 100%. A smaller avatar leaves more room for the chat; on narrow screens the avatar also shrinks on its own.
Choosing the avatar
The “Avatar” section lists the built-in avatars and your workspace's avatars. Click a card to choose the agent's avatar.
From a card's menu you can edit or delete your own avatars; built-in avatars can't be changed.
Duplicating an avatar (for example with another background) and adding your own avatar with “Import rig” or “Import GLB” are Pro plan features; they're also available during the free trial. Without the plan, these options don't appear. See Avatar library and Uploading your own avatar.
Restoring the defaults
“Restore default design” asks you to confirm first, then resets the logo, colors, avatar size and page layout; an uploaded logo file is removed too. The default design is the “Avatar on top, form below” layout, a blue primary color and a 100% avatar size. The live page doesn't change until you save and publish, so you can leave without saving if you change your mind.
Only the Owner and Admins can change the design.
Related articles
- Avatar library: getting to know, trying and copying avatarsGet to know the ready-made avatars, try them by making them speak, copy them with a background that fits your brand and assign them to your agent.
- Uploading your own avatar (GLB or Spine)What the file must contain and the steps to add your own 3D (GLB) or 2D (Spine) avatar.
- How do I publish an agent and share it with customers?Put an agent live as a new version with “Publish”, and go back to an earlier one if needed. Share the link or add it to your site.