Branding BMC Helix Virtual Agent for your company
As an application business analyst or an administrator, you can change the branding of BMC Helix Virtual Agent by customizing various properties. If you have multiple chatbots, you can customize the properties of each chatbot.
The branding applies only to the chatbot web UI and not to other chatbot channels such as Microsoft Teams, Skype for Business on-premises, Slack, and Twilio.
Customizable properties of BMC Helix Virtual Agent
You can customize the following properties of BMC Helix Virtual Agent:
Property | Example |
|---|---|
Company logo |
|
Chatbot header background color | |
Chatbot header border color | |
Chatbot header text color | |
Chatbot avatar | |
Agent avatar | |
Chatbot animation |
Best practices for branding BMC Helix Virtual Agent
The following table lists the best practices and recommended size for each chatbot property:
Customizable property | Allowed file extensions | Recommended file extension and file pixels | Maximum file size |
|---|---|---|---|
Company logo | PNG, JPG, SVG | SVG file with 300x72 pixels | 1 MB |
Chatbot avatar | PNG, JPG, SVG | SVG file with 150x150 pixels | 1MB |
Agent avatar | PNG, JPG, SVG | SVG file with 150x150 pixels | 1 MB |
Chatbot animation | SVG | The SVG animation file viewbox should be defined as viewBox="0 0 333 333" Important: The animation type and animation speed cannot be customized. | - |
Chatbot header background color | Not applicable | Not applicable | - |
Chatbot header border color | Not applicable | Not applicable | - |
Chatbot header text | Not applicable | Not applicable | - |
Before you begin
Make sure that you have created the chatbot for which you want to change the branding. For more information, see Setting-up-chatbots-for-your-line-of-business.
(Optional) To leverage the example file to customize the chatbot animation
You can leverage the chatbot animation example (SVG file) to customize the animation. The example SVG animation file viewbox is defined as viewBox="0 0 333 333".The animation speed and type of animation cannot be customized.
- Download the animation example file.
- Open the example animation file by using any SVG file editor.
- Use the animation inside the canvas and modify it as required.
For modifying the chatbot avatar and animation, see the Best practices for BMC Helix Virtual Agent section. - Save the file.
Task 1: To enable SVG attachments
As an administrator, you must enable SVG attachments to avoid the following error:
ERROR (525): File is not allowed to be uploaded. Chabot Configuration: Brand Logo: filename.svg
- Log in to Action Request System.
- Navigate to AR System Administration Console > System > General > Server Information.
- Click the Attachment Security tab.
- In the Limit attachments allowed based on file extensions section, from the Comma separated list of limit extensions, remove SVG.
Click Apply.
You are not required to restart the server to apply the changes.
The following image shows the Server Information page:
Task 2: To change the branding of a chatbot
- Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
- Select the application for which you created a chatbot.
- On the Chatbots tab, select the newly created chatbot and then click the Skinning and Branding tab.
Customize the chatbot animation.
- If you do not want the chatbot animation, disable it by using the
toggle button. - If you want to use a customized animation file, in the Animation section, click Choose File to upload the customized SVG file.
The chatbot is animated when it loads for the first time.
- If you do not want the chatbot animation, disable it by using the
- To change the header, update the values in the Header Background Color, Header Text Color, and Header Border Color.
- To change the company logo, in Brand Logo, upload the logo.
Customize the avatars.
- To change the chatbot avatar, in Chatbot Avatar, upload the avatar image.
- To change the agent avatar, in Agent Avatar, upload the avatar image.
The following example shows the Skinning and Branding tab:
- Click Save.
- (Optional) If you want to remove all the configured skinning and branding values, click Clear Configuration and then click Save.