How to change Now Assist Virtual Agent Icon?

[Kapil Khedkar]

Hi Everyone,

I have enabled Now Assist in Virtual Agent on my portal, and I want to customize the icon  that appears for the Virtual Agent (chat launcher). Currently, it shows the default Now Assist icon, but I would like to change it to a custom one.

Any help would be appreciated.

[Chris D]

$now-sp-nass-FAB-icon-size-factor

"Handles size of Image within the chat icon." It defaults to 1. From Theming for Now Assist in Virtual Agent enhanced chat • Australia Conversational Interfaces • Docs |...

+ @prerna_sh fyi

[Rachel55]

You probably got your image resized by now.  I have discovered you can use $now-sp-nass-FAB-icon-size-factor, but when I set mine to $now-sp-nass-FAB-icon-size-factor:5; it is just large enough to cover the green button behind it, but when the VA chat is opened and then closed again, the icon becomes even larger, spilling over the edge of the page.  I have not been able to get the color of the button behind to change to white, or to shrink.  Anyone else figure this out?

[elayaraja_karup]

This worked for me on the enhanced chat (Now Assist / Otto) launcher. If your custom icon shows square corners or doesn’t fill the button, convert the image to a circular PNG with a transparent background and use the documented theme variables. No widget cloning or scripts are needed on the portal.

Steps

• Convert your image to a circular PNG. Scripts for Windows & MAC are below.
• Upload it: System UI > Images → New → Name logo_circle.png → attach the file → Submit.
• In your portal theme’s CSS variables, add:

 $now-sp-nass-FAB-icon: url('/logo_circle.png');
 $now-sp-nass-FAB-icon-size-factor: 5;

• Adjust the size factor to suit your image.
• Save, clear the cache (/cache.do) and refresh the portal. Your logo should replace the default launcher icon.
• If you see a coloured background, for example green on hover, also add these variables. Replace the focus ring colour with your own brand colour.

$now-sp-nass-FAB-gradient-color-1: #ffffff;
$now-sp-nass-FAB-gradient-color-2: #ffffff;
$now-sp-nass-FAB-hover-bg-color: #ffffff;
$now-sp-nass-FAB-active-bg-color: #ffffff;
$now-sp-nass-FAB-focus-ring-color: #191D64;

PowerShell script to make a circular PNG

Windows

• Open PowerShell, update $in (your image) and $out (the output file), then run:

Add-Type -AssemblyName System.Drawing

$in   = "C:\temp\logo.jpeg"
$out  = "C:\temp\logo_circle.png"
$size = 512

$src=[System.Drawing.Image]::FromFile($in)
$side = [Math]::Min($src.Width, $src.Height)
$srcRect = New-Object System.Drawing.Rectangle (($src.Width - $side) / 2), (($src.Height - $side) / 2), $side, $side

$bmp = New-Object System.Drawing.Bitmap $size, $size, ([System.Drawing.Imaging.PixelFormat]::Format32bppArgb)
$g   = [System.Drawing.Graphics]::FromImage($bmp)
$g.SmoothingMode     = [System.Drawing.Drawing2D.SmoothingMode]::AntiAlias
$g.InterpolationMode = [System.Drawing.Drawing2D.InterpolationMode]::HighQualityBicubic
$g.Clear([System.Drawing.Color]::Transparent)

$path = New-Object System.Drawing.Drawing2D.GraphicsPath
$path.AddEllipse(0, 0, $size, $size)
$g.SetClip($path)
$g.DrawImage($src, (New-Object System.Drawing.Rectangle 0, 0, $size, $size), $srcRect, [System.Drawing.GraphicsUnit]::Pixel)

$bmp.Save($out, [System.Drawing.Imaging.ImageFormat]::Png)
$g.Dispose(); $bmp.Dispose(); $src.Dispose(); $path.Dispose()
Write-Host "Saved $out"

MAC

• Open Terminal, update inPath (your image) and outPath (the output file), then run:

cat > /tmp/circle.js << 'EOF'
ObjC.import('AppKit');

var home    = $.NSHomeDirectory().js;
var inPath  = home + '/Desktop/logo.jpeg';
var outPath = home + '/Desktop/logo_circle.png';
var size    = 512;

var src=$.NSImage.alloc.initWithContentsOfFile(inPath);
if (src.isNil()) { throw new Error('Cannot open ' + inPath); }

var sz   = src.size;
var side = Math.min(sz.width, sz.height);
var fromRect = $.NSMakeRect((sz.width - side) / 2, (sz.height - side) / 2, side, side);
var toRect   = $.NSMakeRect(0, 0, size, size);

var out = $.NSImage.alloc.initWithSize($.NSMakeSize(size, size));
out.lockFocus;
$.NSGraphicsContext.currentContext.imageInterpolation = $.NSImageInterpolationHigh;
$.NSBezierPath.bezierPathWithOvalInRect(toRect).addClip;
src.drawInRectFromRectOperationFraction(toRect, fromRect, $.NSCompositingOperationSourceOver, 1.0);
var rep = $.NSBitmapImageRep.alloc.initWithFocusedViewRect(toRect);
out.unlockFocus;

var png = rep.representationUsingTypeProperties($.NSBitmapImageFileTypePNG, $({}));
png.writeToFileAtomically(outPath, true);
'Saved ' + outPath;
EOF
osascript -l JavaScript /tmp/circle.js

The script crops the centre square of your image, so it works best with a square, centred logo.