Phased rollout

 

This version of the software is currently available only to early adopter SaaS customers as the first step in our phased rollout. Click here to view an earlier version.

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:

PropertyExample
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 propertyAllowed file extensionsRecommended file extension and file pixelsMaximum file size
Company logoPNG, JPG, SVG

SVG file with 300x72 pixels

1 MB
Chatbot avatarPNG, JPG, SVG

SVG file with 150x150 pixels

1MB
Agent avatarPNG, JPG, SVG

SVG file with 150x150 pixels

1 MB
Chatbot animationSVG

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 colorNot applicableNot applicable-
Chatbot header border colorNot applicableNot applicable-
Chatbot header textNot applicableNot 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. 

  1. Download the animation example file. 
  2. Open the example animation file by using any SVG file editor such as 
  3. Use the animation inside the canvas and modify it as required. 
    For modifying the chatbot avatar and animation, see the Best practices for branding BMC Helix Chatbot section.
  4. 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

  1. Log in to Action Request System. 

  2. Navigate to AR System Administration Console System General > Server Information

  3. Click the Attachment Security tab. 

  4. In the Limit attachments allowed based on file extensions section, from the Comma separated list of limit extensions, remove SVG. 

  5. 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

  1. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
  2. Select the application for which you created a chatbot.
  3. On the Chatbots tab, select the newly created chatbot and then click the Skinning and Branding tab.
  4. Customize the chatbot animation.
    1. If you do not want the chatbot animation, disable it by using the   toggle button. 
    2. 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.
  5. To change the header, update the values in the Header Background Color, Header Text Color, and Header Border Color

  6. To change the company logo, in Brand Logo, upload the logo. 

  7. Customize the avatars. 

    Important

    If you customize the chatbot avatar, the animation is disabled, but can be enabled again.

    1. To change the chatbot avatar, in Chatbot Avatar, upload the avatar image. 

    2. To change the agent avatar, in Agent Avatar, upload the avatar image.

    The following example shows the Skinning and Branding tab:




  8. Click Save.

  9. (Optional) If you want to remove all the configured skinning and branding values, click Clear Configuration and then click Save.


Related topics

Setting up chatbots for your line of business

Administering

Branding Live Chat for your company

Was this page helpful? Yes No Submitting... Thank you

Comments