/* * Name : agentforceScript.js * Author : Deeksha Shetty * Created Date : Nov 7,2025 * Description : The style contains orgcs embedded agent styles. Change History *************************************************************************************************************************** Modified By | Date | Jira No. Description Tag *************************************************************************************************************************** NA | NA | NA Initial version. N/A Sathish R | 17/11/2025 | I2RT-13819 Agent widget - Analytics T01 *************************************************************************************************************************** */ /* This file contains CSS styles that need to be added to the '' tag of INFA page for the help agent UX. */ :root { --xsf-miaw-loading-background-image: url(https://c1.sfdcstatic.com/content/dam/web/en_us/www/images/live-agent/astro-waiting-snap-ins-wave.gif); --xsf-miaw-agent-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iYSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTIiIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA1MiA1MiI+CiAgICA8cGF0aCBkPSJNMzEuNDksMjcuNjJoLjAyYy0uODIuMDctMS41NS4yMS0yLjE4LjQxLDAsMC0uOTIuMjktMi4zMy40OS0uMzMuMDUtLjc1LjA1LS45OC4wNWgtLjE3Yy0uMjMsMC0uNjYtLjAyLS45OC0uMDctMS40MS0uMjMtMi4zMi0uNTUtMi4zMi0uNTUtLjYzLS4yLTEuMzYtLjM1LTIuMTgtLjQ0LTQuNDktLjQ2LTYuNDMsMS4yNS02LjU0LDEuNTctLjExLjMyLjM4LDQuNDguNzQsNS4xNC4zNS42NS44OSwxLjAzLDEuMzgsMS4yNC41LjIxLDQuNjEuNjIsNS45OC40MywxLjM3LS4xOSwxLjU4LS42NSwxLjk1LTEuMzUuMjYtLjUuOTMtMi43NiwxLjMtNC4wOS4wOS0uMjYuMS0uNzguNzMtLjgyLjYzLjA1LjY0LjU4LjcyLjg0LjM2LDEuMzMuOTksMy42MSwxLjI0LDQuMTEuMzUuNzEuNTYsMS4xNywxLjkzLDEuMzksMS4zNi4yMSw1LjQ4LS4xMiw1Ljk4LS4zMi41LS4yLDEuMDQtLjU3LDEuNC0xLjIyLjM2LS42NS45Mi00LjguODItNS4xMi0uMS0uMzMtMi4wMS0yLjA3LTYuNTEtMS42OVoiIGZpbGw9IiNmZmYiLz4KICAgIDxwYXRoIGQ9Ik00NS41MiwxNC41NWguMDFjLTEuMjUtMS41OS0yLjczLTMtNC4zNy00LjIxLDEuNy0uMywyLjk5LTEuNzgsMi45OS0zLjU2LDAtMi0xLjYyLTMuNjMtMy42My0zLjYzcy0zLjYzLDEuNjItMy42MywzLjYzYzAsLjQuMDguNzguMiwxLjE0LTIuNTgtMS4yMi01LjQtMi4wMi04LjM1LTIuMzMtNC45NC0uNTItOS43MS4zNi0xMy44MiwyLjMuMTEtLjM1LjE5LS43Mi4xOS0xLjExLDAtMi0xLjYyLTMuNjMtMy42My0zLjYzcy0zLjYzLDEuNjItMy42Myw3LjYzYzAsMS43OCwxLjI4LDMuMjUsMi45NiwzLjU2LTQuNjYsMy40NC03LjkxLDguNDUtOC42NSwxNC4yNi0uNjksNS4zNy44NCwxMC43NSw0LjMyLDE1LjE1LDMuOTQsNC45OCwxMC4wNiw4LjI1LDE2Ljc4LDguOTYuOTQuMSwxLjg3LjE1LDIuNzkuMTUsMTEuOTksMCwyMi4zNy04LjE0LDIzLjc5LTE5LjE2LjY5LTUuMzctLjg0LTEwLjc1LTQuMzItMTUuMTVaTTI2LjAyLDQyLjY2aC0uMDFjLTkuMDItLjAxLTE2LjM2LTYuMDMtMTYuMzYtMTMuNDMsMC0yLjIzLjY4LTQuMzcsMS45MS02LjI3LjExLjY4LjMxLDEuMjcuNTMsMS43MS4zLjYuOS45NSwxLjUzLjk1LjI1LDAsLjUxLS4wNS43NS0uMTcuODUtLjQxLDEuMi0xLjQzLjgxLTIuMjgtLjIxLS40NS0uNzUtMS45NC41Ni0zLjA4LDEuMjcsMS4xNSwzLjA5LDIuNSw1LjE0LDMuMTYsMy44MiwxLjIxLDYuNzEuNSw2LjgzLjQ3LjU4LS4xNSwxLjAzLS41OCwxLjIxLTEuMTUuMTgtLjU3LjA1LTEuMTktLjM0LTEuNjMtMS45My0yLjIyLTIuODUtMy44NC0zLjI1LTQuODIsNy44MiwxLjA2LDkuMzIsNy4yOSw5LjM4LDcuNTcuMTcuOC44OCwxLjM1LDEuNjcsMS4zNS4xMiwwLC4yMy0uMDEuMzUtLjA0LjkzLS4xOSwxLjUyLTEuMSwxLjMzLTIuMDMtLjI0LTEuMTYtLjg3LTIuNzMtMS45OS00LjMsMy44MywyLjQ2LDYuMzEsNi4yOCw2LjMxLDEwLjU3LDAsNy40LTcuMzQsMTMuNDItMTYuMzYsMTMuNDJaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo='); --xsf-miaw-bottom: 40px; --xsf-miaw-bottom-mobile: 40px; --xsf-miaw-invite-bottom: 20px; --xsf-miaw-frame-bottom: 0; --xsf-miaw-chat-text: 'Ask Agentforce'; --hgf-g-blue-vibrant-50: rgba(1, 118, 211, 1); --eswButtonColor: #007a8a; } @font-face { font-family: 'Roboto'; src: url('https://orgcs.my.site.com/ESWHCASAAgentforceServ1728696718782/sfsites/c/resource/InformaticaAgentCustomFonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: 'Roboto'; src: url('https://orgcs.my.site.com/ESWHCASAAgentforceServ1728696718782/sfsites/c/resource/InformaticaAgentCustomFonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; } @font-face { font-family: 'Roboto'; src: url('https://orgcs.my.site.com/ESWHCASAAgentforceServ1728696718782/sfsites/c/resource/InformaticaAgentCustomFonts/Roboto-Light.ttf') format('truetype'); font-weight: 300; } .animation { transition: bottom 0.5s ease; transition-delay: 0.5s; } /* Start of Invitation */ /* Remove link styling from Safari */ .embeddedServiceInvitationBody { pointer-events: none; } .embeddedServiceInvitationBody a { text-decoration: none; color: inherit; } .zindexup { position: relative; z-index: 5000; } #xsf_miaw_invite { background-color: var(--hgf-g-blue-vibrant-50); font-family: var(--hgf-g-font-display); overflow: visible; border-radius: 10px; visibility: hidden; position: fixed !important; /* since Chat Product JS sets element style */ margin-left: -343px !important; /* since Chat Product JS sets element style */ margin-top: -274px !important; /* since Chat Product JS sets element style */ -webkit-font-smoothing: antialiased; /* reduces the thickness of the font */ } #xsf_miaw_invite.embeddedServiceInvitation { background-color: var(--hgf-g-blue-vibrant-50); width: 317px; -webkit-box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12), 0 2px 10px rgba(0, 22, 57, 0.04); -moz-box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12), 0 2px 10px rgba(0, 22, 57, 0.04); box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12), 0 2px 10px rgba(0, 22, 57, 0.04); } /* allows mobile users to close the chat window */ /* body .embeddedServiceSidebar.layout-docked .dockableContainer { height: calc(100% - 130px); margin-top: 120px; } */ #xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationHeader { width: inherit; color: var(--hgf-g-brand-default-color-background); overflow: initial; justify-content: space-between; align-items: stretch; text-align: center; font-style: normal; font-weight: 500; font-size: 24px; line-height: 28px; } #xsf_miaw_invite > .embeddedServiceInvitationHeader #customAvatar { margin-top: 24px; width: 37px; height: 37px; } #xsf_miaw_invite > .embeddedServiceInvitationHeader .embeddedServiceTitleText { color: var(--hgf-g-brand-default-color-background); overflow: hidden; align-self: stretch; flex-grow: 1; max-width: 100%; margin: 16px 24px 0 24px; font-size: 24px; font-weight: 500; font-style: normal; overflow-wrap: break-word; } #xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationBody { font-family: var(--hgf-g-font-sans); background-color: var(--hgf-g-blue-vibrant-50); color: var(--hgf-g-brand-default-color-background); max-height: 110px; min-width: 243px; margin: 12px 37px 18px; overflow: auto; text-align: center; } #xsf_miaw_invite > .embeddedServiceInvitationBody p { margin-top: 0; margin-bottom: 0; font-size: 14px; line-height: 18px; color: var(--hgf-g-brand-default-color-background); } #xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationFooter { width: inherit; color: var(--hgf-g-brand-default-color-background); background-color: var(--hgf-g-blue-vibrant-50); max-height: 50px; margin-bottom: 24px; display: flex; justify-content: space-evenly; } #xsf_miaw_invite > .embeddedServiceInvitationFooter > .embeddedServiceActionButton { font-size: 14px; font-weight: 500; border: none; border-radius: 4px; line-height: 20px; letter-spacing: -0.002em; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; } #xsf_miaw_invite > .embeddedServiceInvitationFooter > #acceptInvite { top: calc(50% - 20px / 2 + 2px); background-color: var(--hgf-g-brand-default-color-background); color: var(--hgf-g-blue-vibrant-50); flex: none; order: 0; flex-grow: 0; align-items: center; padding: 16px 24px 12px; margin: 0 2.5px 0 10px; } #xsf_miaw_invite > .embeddedServiceInvitationFooter > #rejectInvite { background-color: var(--hgf-g-blue-vibrant-50); color: var(--hgf-g-brand-default-color-background); text-decoration-line: underline; mix-blend-mode: normal; padding: 16px 0 12px 0; margin: 0 10px 0 2.5px; } /* End of Invitations */ /* Start of button overrides */ /* match the size of existing chat (and phone) icon in mobile */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton { height: 44px; width: 44px; box-sizing: border-box; background-image: var(--xsf-miaw-agent-image); background-size: 20px; border-radius: 4px; background-repeat: no-repeat; background-position: center; } body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div.embeddedMessagingIconContainer { display: none; } body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoading div.embeddedMessagingIconContainer { display: block; } /* miaw reduces opacity when hovering, override to match our existing style */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not(.no-hover):hover { opacity: 1; } /* overrides to match the positioning, color and drop shadow styling */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton, body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoaded { /* background-color: var(--hgf-g-blue-vibrant-50, rgba(1, 118, 211, 1)); */ bottom: var(--xsf-miaw-bottom-mobile, 30px); right: 30px; box-shadow: 0px 12px 48px rgba(0, 22, 57, 0.12), 0px 2px 10px rgba(0, 22, 57, 0.04); } /* override the positioning of the iframe as well, since some of the button variations are inside the iframe */ #embeddedMessagingFrame.embeddedMessagingFrame[class~='isMinimized'] { bottom: var(--xsf-miaw-bottom-mobile, 30px); border-radius: 4px; } /* in mobile, positioning of the spinner is off, so adjust that */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton .embeddedMessagingLoadingSpinner { padding: unset; margin: unset; margin: auto; padding: 1px; } body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[class~='embeddedMessagingConversationButtonLoading'] { background-image: none; } embeddedmessaging-chat-header .chatHeader button.headerButton { cursor: pointer; } .embedded-messaging > .embeddedMessagingFrame[class~='isMinimized'] { border-radius: 4px 4px 4px 4px !important; } /* End of button overrides */ /* Desktop Styles */ @media only screen and (min-width: 768px) { #xsf_miaw_invite.xsf_miaw_invite_show { bottom: var(--xsf-miaw-invite-bottom, 20px); left: 100%; z-index: 10000; visibility: visible; } /* in desktop, match the sizing of the circle buttons with the iframe contained variations */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton { height: 44px; width: 44px; } /* in desktop, apply our current chat button styling on the miaw initiate chat button (keep loading and loaded variations the unchanged, aside from bg color) */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not( .embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading ) { bottom: var(--xsf-miaw-bottom, 40px); right: 40px; border-radius: 4px; height: 44px; min-width: 146px; max-width: 317px; width: fit-content; cursor: pointer; display: block; line-height: normal; padding: 0; margin: 0; font-size: var(--eswIconFontSize, 16px); box-sizing: border-box; } /* chat window box */ #embeddedMessagingFrame.embeddedMessagingFrame[class~='isMaximized'] { bottom: var(--xsf-miaw-frame-bottom, 0); } /* in desktop, add agent image to the miaw chat button (again, don't add the agent image to the loading and loaded variations) */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not( .embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading ) .embeddedMessagingIconContainer { width: 100%; height: 100%; background: var(--xsf-miaw-agent-image); background-repeat: no-repeat; background-size: 20px; background-position: left; margin-left: 24px; margin-right: 24px; display: flex; align-items: center; } /* Before pseudo element is used for the label because the MIAW library resets the button after chat ends removing any custom labels inside the button. Currently, there is no event for us to listen (to indicate when chat ends), so that we can reinsert the labels. */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not( .embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading ) .embeddedMessagingIconContainer::before { content: var(--xsf-miaw-chat-text); font-style: normal; font-family: 'Roboto'; font-weight: 400; font-size: 18px; color: white; padding: 0px 0px 0px 30px; -webkit-font-smoothing: antialiased; } /* for accessibility, when miaw chat button is focused, the text should underline */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:focus .embeddedMessagingIconContainer::before { color: white; } /* in desktop, hide the chat icon from the initiate miaw chat button */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton .embeddedMessagingIconChat { display: none; } /* in desktop, the loading spinner was slightly off, so adjusting that */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton .embeddedMessagingLoadingSpinner { padding: 4px; } body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton { background-image: none; } body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div.embeddedMessagingIconContainer { display: block; } } /* End of Desktop Styles */ /* Start of small and mid-size devices styles */ @media only screen and (max-width: 767px) { /* setting spinner position */ body .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class='embeddedMessagingIconContainer'] > div.embeddedMessagingIconLoading { height: 34px; width: 34px; } } /* End of small and mid-size devices styles */ /* Start Mobile Styles */ @media only screen and (max-width: 480px) { div.embeddedMessagingConversationButtonWrapper > button.embeddedMessagingConversationButtonLoaded { height: 0; width: 0; } .embedded-messaging > .embeddedMessagingFrame[class~='isMaximized'][class~='experienceSite'] { max-height: calc( 100vh - 10em - 125px - env(safe-area-inset-bottom) - env(safe-area-inset-top) ) !important; } } .c-helpcenter-agentforce { text-align: center; font-family: 'Roboto'; background: #fff; border: 1px solid #c9c9c9; border-radius: 24px; padding: 10px 12px; font-size: 18px; font-weight: 400; display: block; position: fixed; bottom: 90px; right: 40px; margin-left: 10px; } .c-helpcenter-agentforce .close-icon { position: absolute; top: -20px; right: -14px; } .embeddedMessagingIconProgressIndicator { position: absolute !important; width: 25px !important; height: 25px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .embedded-messaging > .embeddedMessagingFrame[class~='isMaximized'] { height: var(--eswHeight) !important; } @media only screen and (min-width: 15em) and (max-width: 47.9375em) { .embedded-messaging > .embeddedMessagingFrame[class~='isMaximized'] { height: var(--eswHeight) !important; } }