Proactive Triggers set Virtual Agent icon back to OOTB

[LRhodes]

Hi all,

I've just installed the Proactive Triggers plugin on our DEV instance. It works perfectly fine, however I have noticed that its reverted our Virtual Agent icon back to as it was OOTB. I set the icon using a style sheet attached to the Portal Theme but it seems to be getting ignored now.

In DEV

How we have it in PROD

The first question I guess is are we able to use Proactive Triggers with a custom icon or is it only compatible with the OOTB settings.

Second question is where could this be getting overwritten? My style sheet is as below.

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(sp-agent-chat-icon.svg) !important;
  background-position: center 0px;
  background-size: 90px 90px;
  /*background-color: white;*/
  
  height: 90px;
  width: 90px;
  right: 30px;
  bottom: 30px;
}

I have also tried updating the CSS directly on the Virtual Agent widget (.conversation-button-container .help-button .sn-va-widget-icon) but again its just being ignored/overwritten.

$color-darker: #485563;
$color-white: #ffffff;

$window-width: 375px;
$window-height: 600px;
$button-height: 60px;
$bottom-margin: 15px;

$sn-chatbot-animation-speed: 300ms;

// OVERRIDE TO DISPLAY RECORD CARDS
.sn-card-component_records {
  display: block !important;
}

.conversation-button-container {
  position: fixed;
  right: 120px;
  bottom: 60px;
  z-index: 20;

  .conversation-region {
    position: relative;
    opacity: 0;
    visibility: hidden;

    &.open {
      transition: $sn-chatbot-animation-speed ease-in opacity;
      opacity: 1;
      visibility: visible;
    }
  }

  .help-button {
    position: relative;
    width: 60px;
    color: #fff;
    float: right;
    border: none;
    height: $button-height;
    border-radius: 60px;
    box-shadow: 0px 2px 11px #ababab;
    -moz-box-shadow: 0px 2px 11px #ababab;
    -o-box-shadow: 0px 2px 11px #ababab;
    padding: 0;
    background-color: #8D8DE0;

    &::before {
      content: "";
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }

    &:hover::before {
      background-color: rgba(0,0,0,0.2);
    }

    &:focus {
      outline: thin dotted;
      outline-color: gray;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: 2px;
    }

    &.state-unread {
      & > span:after {
        content: ' ';
        position: absolute;
        top: -17px;
        right: -14px;
        width: 16px;
        height: 16px;
        background-color: #ed6e5c;
        border-radius: 25px;
      }
    }

    .help-icon {
      pointer-events: none;
      position: relative;
    }

   .conversation-button-container .help-button .sn-va-widget-icon {
      background-image: url(sp-agent-chat-icon.svg) !important;
      background-size: cover;
      height: 32px;
      width: 36px;
      display: block;
      position: absolute;
      top: 14px; /* Adjust vertical positioning */
      left: 12px; /* Adjust horizontal positioning */
    }

    .icon-close {
      font-size: 20px;
    }
  }
}

// window sizing
.sn-connect-floating {
  position: relative;
  bottom: 15px;
  right: 0;
  display: none;

  .sn-connect-floating-wrapper {
    width: $window-width; 
    transition: border-bottom 1px solid #bdc0c4;
    margin-right: 0;
    right: 0;
    box-shadow: 0px 2px 11px #ababab !important;
    -moz-box-shadow: 0px 2px 11px #ababab !important;
    -o-box-shadow: 0px 2px 11px #ababab !important;
    transition: max-height 0s $sn-chatbot-animation-speed;
    display: none;
    border-radius: 10px;
    overflow: hidden;

    .conversation-container {
      height: 100%;
      display: none;

      .chat-frame {
        max-height: $window-height;
        height: calc(100vh - $button-height - ($bottom-margin * 3));
        width: $window-width;
        margin-bottom: -5px;
        border: none;
        overflow: hidden;
        background-color: #fff;
      }

      // Immediate div is autogenerated from serviceportal
      & > div {
        height: 100%;
      }
    }
  }
}

// Mobile SCSS
@media (max-width: 425px) {  
  .sn-connect-floating {
    .sn-connect-floating-wrapper {
      position: fixed;
      max-height: 100%;
      width: 100%;
      left: 0;
      right: 0;
      bottom: calc($button-height + 20px);
      top: 0;
      border-radius: 0px !important;

      .conversation-container {
        position: absolute;
        max-height: 100%;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        .chat-frame {
          max-height: initial !important;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
    }
  }
}

Any assistance with this would be greatly appreciated as we'd like to progress with the proactive triggers but not without a custom icon. Thanks!

[_ChrisHelming · Accepted solution]

I followed the docs in my PDI and it worked for me 🤷.  My guess is that proactive triggers is requiring the scss variable and you don't seem to be using that. All I did to get it to work was add $sp-agent-chat-btn-close: url("/tiger1.png"); to my portal theme

https://docs.servicenow.com/bundle/xanadu-conversational-interfaces/page/administer/conversational-i...
https://docs.servicenow.com/bundle/xanadu-platform-user-interface/page/build/service-portal/task/con...

[LRhodes]

Ahh brilliant, yeah that's worked for me now. Only issue remaining is that the icon is huge. In my style sheet I had the below which helped position it and ensure its the right size.

.sp-ac-root button.sp-ac-btn.closed {
  background-image: url(/sp-agent-chat-icon.svg) !important;
  background-position: center 0px;
  background-size: 90px 90px;
  /*background-color: white;*/
  
  height: 90px;
  width: 90px;
  right: 30px;
  bottom: 30px;
}

But this doesn't seem to work the same when I put it into the CSS variables. Do you have any examples as to how I should format this within here?

[_ChrisHelming]

Honestly, I just resized my icon png down to 50x50 px and left a little extra on the sides. I didn't look at what it'd take to resize using css.