The CreatorCon Call for Content is officially open! Get started here.

Proactive Triggers set Virtual Agent icon back to OOTB

LRhodes
Tera Guru

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

LRhodes_0-1730282454322.png

How we have it in PROD

LRhodes_1-1730282502221.png

 

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!

1 ACCEPTED SOLUTION

_ChrisHelming
Tera Guru

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

Screenshot 2024-10-30 at 7.44.16 AM.png


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

View solution in original post

3 REPLIES 3

_ChrisHelming
Tera Guru

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

Screenshot 2024-10-30 at 7.44.16 AM.png


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

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?

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.