Branding BMC Helix Virtual Agent for your company

Customizable properties of BMC Helix Virtual Agent

You can customize the following properties of BMC Helix Virtual Agent:

Best practices for branding BMC Helix Virtual Agent

The following table lists the best practices and recommended size for each chatbot property:

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. 

1. Open the example animation file by using any SVG file editor.
2. 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.
3. 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, Header Border Color, Primary Color, Secondary Color, and Active Color.
6. To change the notification sound for when an agent joins the chat, in the Agent Notification Sound, upload the sound file. 
7. To change the company logo, in Brand Logo, upload the logo. 

8. Customize the avatars. 

   Important

   If you customize the chatbot avatar, the animation is disabled, but can be enabled again. 
   You can also disable the default values of the primary, secondary and active colors and customize them. 

   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:
   
   

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