service portal virtual agent chat static choice appearance customization

[tarun43]

Hello everyone,

I have a requirement to change the background color for these buttons and apply a custom red border to it.

Changing background color , I have done it via sys_cs_branding_setup and I am looking for a solution to apply a red border.

Thanks in advance.

[Rafael Batistot]

Hi @tarun43 

This might help you 

https://www.servicenow.com/docs/r/conversational-interfaces/ac-configure-chat-branding.html

[s_p_naidu]

Hi @tarun43,
I think , changing border color using sys_cs_branding_setup is not possible.
I tried DOM manipulation to change border color of virtual agent button and it worked.

For Out of the box virtual agent(greeting topic) 'show me everything' button I applied red border. As shown in the below image.

In portal, Theme 'header & footer' record I added the following client script code to apply the red border:

api.controller = function($scope, $interval) {

    // Configurable border color

    var BORDER_COLOR = 'red';

    function styleVAButtons(doc) {

        if (!doc) return;

        // Recursive helper to traverse DOM and Shadow DOM trees

        (function traverse(root) {

            if (!root) return;

            // Target Virtual Agent Topic Picker host components

            root.querySelectorAll('sn-chat-control-topic-picker-message').forEach(function(picker) {

                // Apply Next Experience CSS Variable overrides

                picker.style.setProperty('--now-button--secondary--border-color', BORDER_COLOR, 'important');

                picker.style.setProperty('--now-button--primary--border-color', BORDER_COLOR, 'important');

                if (picker.shadowRoot) {

                    // Style outer button host inside picker shadow root

                    picker.shadowRoot.querySelectorAll('button, now-button, .sn-cs-button-message-control').forEach(function(btn) {

                        btn.style.setProperty('border', '2px solid ' + BORDER_COLOR, 'important');

                        // Pierce inner <now-button> shadow DOM

                        if (btn.shadowRoot) {

                            btn.shadowRoot.querySelectorAll('button, .now-button').forEach(function(innerBtn) {

                                innerBtn.style.setProperty('border', '2px solid ' + BORDER_COLOR, 'important');

                            });

                        }

                    });

                }

            });

            // Recurse into nested shadow DOM roots

            root.querySelectorAll('*').forEach(function(node) {

                if (node.shadowRoot) traverse(node.shadowRoot);

            });

        })(doc);

    }

    // Polling loop to catch dynamic chat message rendering

    var vaInterval = $interval(function() {

        styleVAButtons(document);

        // Pierce iframe boundary if Virtual Agent is embedded in a frame

        document.querySelectorAll('iframe').forEach(function(iframe) {

            try {

                var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

                if (iframeDoc) styleVAButtons(iframeDoc);

            } catch (e) { /* Catch cross-origin boundary restrictions */ }

        });

    }, 500);

    // Clean up interval when scope is destroyed

    $scope.$on('$destroy', function() {

        if (vaInterval) $interval.cancel(vaInterval);

    });

};

[SohamTipnis]

Hi @tarun43,

You can set this using the Branding option in Conversational Interface -> Home -> VA Branding. In that, select Default (or your custom VA), and you can achieve this requirement.

Select your color using its code and set it:

If you find my answer useful, please mark it as helpful and correct. ‌‌😊

Regards,
Soham Tipnis
ServiceNow Developer || Technical Consultant
LinkedIn: www.linkedin.com/in/sohamtipnis10