Styling the Aisera Webchat
Customizing the Webchat Channel to fit your Brand
Overview
The Aisera Platform offers a customizable Webchat channel that allows users to interact with bots. This default webchat includes various components that can be tailored using CSS to match your brand's style seamlessly.
For more information about setting up a web channel, see also: Add a Web Channel and Customize Your AiseraGPT.
Webchat Components
The following diagram breaks down the visual components of the Aisera Webchat interface. use thee numbered legend below to identify specific elements of the webchat.
Header
Channel Logo
Chatbot Name
More
Resize and Collapse Controls
Message Banner
Bot Icon
Initial Greeting Message
Initial Action Recommendations
Footer Aisera Logo
Opener Icon Image
Opener Message
Opener Message Placement
Customizing the Webchat
To customize the look of your webchat navigate to Channels > Your Channel to edit the appearance of your webchat channel. There are two modes or editing the webchat channel:
Standard: This mode simplifies customization by offering a guided experience. You can effortlessly personalize their webchat by filling in standard fields for each component, ensuring a quick setup.
CSS Mode: This mode enables you to edit the webchat's CSS directly, offering customization flexibility but possibly resulting in a less cohesive appearance.
Standard Mode Fields
Opener Icon
This is the imaged displayed for the opener of the webchat. Ensure this image is at least 50x50 pixels for clear visibility.
Opener Background Color
This changes the background of the chat opener container.
Opener Size
This sets the size of the opener in pixels. The opener adjusts content to fit its size. Larger images will shrink, and smaller ones will enlarge, possibly causing blurriness.
Opener Placement
Determines which corner of the viewport the opener use as the origin.
The opener is placed on your webpage relative to the viewport. It is best practice to ensure that the opener does not obscure content or interfere with other actions on your webpage.
Opener Right/Left
This value sets how far the opener is offset from the edge of the viewport horizontally.
Opener Bottom
This value sets how far the opener is offset from the edge of the viewport vertically.
Allow Removal
This enables a button in the header of the webchat that allows users to hide both the webchat and the opener from the webpage. If this button is pressed, the webchat and opener will be hidden for 24 hours at which point the opener will automatically begin showing again.
If this configuration is enabled, the host webpage should then provide a way to show the opener or webchat at the user's request. This can be done using either the aisera.webchat.show message, or the aisera.webchat.open message.
The following is an example of a button which would show the webchat again:
Opener Message Time
Sets the time before the Opener Message is displayed if the webchat has not been opened during that time. This must contain a value is there is an Opener Message.
Opener Message
The message displayed to a user after as set amount of time, nudging the user to interact with your bot. This message only appears if the webchat has not been opened before the set amount of time has passed, and will not display more than once if the page is not reloaded.
Opener Message Closing Time
This sets the amount of time to hide the Opener Message if the Opener Message is closed by a user. After the period of time has elapsed the opener message will begin displaying again.
Hide Webchat Resize
This configuration hides the webchat resize button.
Minimized Window Size
This sets the size of the Webchat window while the Webchat is minimized. The Width is set in pixels. The Height is set as a percentage of the total vertical space within the viewport minus the offset in Opener Bottom.
Maximized Window Size
This sets the size of the Webchat window while the Webchat is minimized. The Width is set in pixels. The Height is set as a percentage of the total vertical space within the viewport minus the offset in Opener Bottom.
Chatbot Name
This field changes the name of the bot displayed in the header of the Webchat.
Logo
This allows you to change the logo displayed next to the Chatbot Name in the header. This image will be scaled to to have a maximum height of 26 pixels while maintaining the aspect ratio of the original image.
If you provide a logo image but no Chatbot Name only the logo will appear. This allows you to supply an image containing both your logo and brand name with your desired typography.
Logo Alt Text
This field defined the alternative text for the brand logo image. This string is read by screen readers and is displayed if the image fails to load.
Avoid using "Logo of..." or "Image of..." in the alt text. Screen readers will announce the element as a graphic. Simply use "<your_company>" for this text.
Header Background Color
This field sets the hex code for the header background color.
Ensure the header background has a contrast ratio of at least 4.5:1 against the header text color for accessibility compliance.
Header Text Color
This fields sets the hex code for the text color in the header. This will also affect the color of the default Icons within the header.
Ensure the text color has a contrast ratio of at least 4.5:1 against the header background color for accessibility compliance.
Border Color
Sets the border color between the header, message list, and chat box areas.
Icon Fields
The icon fields allow you to change the default icons for each operation. This can be done by uploading an image file to be used in place of the default icon. Icons will be scaled to a fixed size so it is recommended that the image input is of a similar size to avoid images becoming blurry or losing find detail.
Maximize Icon
Minimize Icon
Collapse Icon
More Menu
Refresh Session Icon
Sound Off Icon
Sound On Icon
Email Transcript Icon
Logout Icon
Link Color
This field sets the hex code for all hyperlinks served to a user by the chatbot.
Ensure the link color has a contrast ratio of at least 4.5:1 against the chat bubble background for accessibility compliance.
Required Asterisk
Determines the visibility of the asterisk, used as a "required" indicator, on input labels when filling out forms within the chat bot.
Bot Icon
This field sets the image displayed next to your bot's messages in the chat message list. This image has a fixed width of 36px. Uploaded images should have a 1:1 aspect ratio to avoid distortion. To prevent detail loss when scaling down small images, it's advisable to use a simplified logo or mascot.
User Background Color
This field sets the hex code for the background of the user chat messages in the message list.
Ensure the user background color has a contrast ratio of at least 4.5:1 against the user text color for accessibility compliance.
User Text Color
This field sets the hex color code for the text contained in the user chat messages in the message list.
Ensure the user background color has a contrast ratio of at least 4.5:1 against the user background color for accessibility compliance.
Live Agent Icon
This field sets avatar image displayed when a live agent joins the conversation or takes over for the bot. This image has a fixed width of 36px. Uploaded images should have a 1:1 aspect ratio to avoid distortion. To prevent detail loss when scaling down small images, it's advisable to use a simplified graphics.
Show Input Filed
This field determines the visibility of the text input allowing users to enter arbitrary requests.
This affects the HTML element's visibility only and does not prevent arbitrary requests from being submitted to the webchat.
Show Aisera Logo
This field determines the visibility of the "Powered by Aisera" logo in the footer of the chat window.
Footer Message
This field allows you to add a supplementary message to the footer. This field allows a maximum of 200 characters and supports bold, italic, and hyperlink formatting.
Send Icon
This field allows you to replace the default paper airplane send icon used to submit text to the bot. The image dimensions will be set to 20x20px.
Best Practices
Here are best practices for styling your webchat. Adhering to these will enhance the appearance and functionality of your webchat.
Use of Color Hues
To maintain a professional and cohesive interface, limit your color palette to three to four color hues. Over-complicating the color scheme can become distracting an decrease readability within the webchat.
Text Contrast and Accessibility
To ensure your chat interface is accessible for everyone, including individuals with visual impairments or those in high-glare environments, maintain a contrast ratio of 4.5:1 between text and the background of the text container. Learn more about this from the Web Content Accessibility Guidelines (WCAG).
Font Size and Legibility
Maintain a minimum body font size of 15px to ensure the conversation remains readable for all users across mobile and desktop devices.
Opener Icon Size
For optimal clarity and visibility, ensure that the image designated for the opener icon is no smaller than 50x50 pixels in size. This will enhance the visual quality and ensure that the icon remains distinct and easily recognizable to users.
Last updated
Was this helpful?