Support. Connect with us!

IT Emergency

Call: 425-655-3468 , Option 2
IT Support 24/7
Office Hours: 8am – 5pm PST

Ticket by Email

Ticket in Our Portal

Current clients can submit a
new ticket or check the status of an existing ticket through your support portal.

Sparta Assist

#webchat { height: calc(100% - 50px); overflow: hidden; position: fixed; top: 50px; width: 100%; }

(async function () { // Specifies style options to customize the Web Chat canvas. // Please visit https://microsoft.github.io/BotFramework-WebChat for customization samples. // Specifies the token endpoint URL. // To get this value, visit Copilot Studio > Settings > Channels > Mobile app page. const tokenEndpointURL = new URL('https://735c285c86c6e215bf710cfb1978a6.11.environment.api.powerplatform.com/powervirtualagents/botsbyschema/ss_website_copilot/directline/token?api-version=2022-03-01-preview'); // Specifies the language the copilot and Web Chat should display in: // - (Recommended) To match the page language, set it to document.documentElement.lang // - To use current user language, set it to navigator.language with a fallback language // - To use another language, set it to supported Unicode locale // Setting page language is highly recommended. // When page language is set, browsers will use native font for the respective language. const locale = document.documentElement.lang || 'en'; // Uses language specified in element and fallback to English (United States). // const locale = navigator.language || 'ja-JP'; // Uses user preferred language and fallback to Japanese. // const locale = 'zh-HAnt'; // Always use Chinese (Traditional). const apiVersion = tokenEndpointURL.searchParams.get('api-version'); const [directLineURL, token] = await Promise.all([ fetch(new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL)) .then(response => { if (!response.ok) { throw new Error('Failed to retrieve regional channel settings.'); } return response.json(); }) .then(({ channelUrlsById: { directline } }) => directline), fetch(tokenEndpointURL) .then(response => { if (!response.ok) { throw new Error('Failed to retrieve Direct Line token.'); } return response.json(); }) .then(({ token }) => token) ]); // The "token" variable is the credentials for accessing the current conversation. // To maintain conversation across page navigation, save and reuse the token. // The token could have access to sensitive information about the user. // It must be treated like user password. const styleSet = window.WebChat.createStyleSet({ bubbleBackground: '#ECEFF1', bubbleFromUserBackground: '#091359', bubbleTextColor: 'black', bubbleFromUserTextColor: 'white', bubbleBorderRadius: 10, bubbleFromUserBorderRadius: 10, buttonBackground: '#000000', buttonTextColor: '#FFFFFF', buttonBorderColor: '#FFFFFF', buttonBorderRadius: 5, buttonPadding: '10px 15px', buttonHoverBackground: '#333333', buttonHoverTextColor: '#FFFFFF', suggestedActionBackground: '#FFFFFF', suggestedActionBorderColor: '#8C8C8C', suggestedActionTextColor: '#091359', // Set Suggested Action button font color to #091359 suggestedActionBorderRadius: '5px', suggestedActionPadding: '10px 15px', primaryFont: 'Poppins, sans-serif', monospaceFont: "'Poppins', monospace", }); const styleOptions = { botAvatarImage: 'https://dev-spartaservportal.azurewebsites.net/img/sparta-icon.png', botAvatarInitials: 'Sparta', hideUploadButton: true, }; const adaptiveCardHostConfig = { "hostCapabilities": { "capabilities": null }, "choiceSetInputValueSeparator": ",", "supportsInteractivity": true, "fontTypes": { "default": { "fontFamily": "Poppins, sans-serif", "fontSizes": { "small": 12, "default": 13, "medium": 17, "large": 18, "extraLarge": 26 }, "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 } }, "monospace": { "fontFamily": "Poppins, sans-serif", "fontSizes": { "small": 10, "default": 11, "medium": 15, "large": 18, "extraLarge": 21 }, "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 } } }, "spacing": { "small": 3, "default": 8, "medium": 20, "large": 30, "extraLarge": 40, "padding": 10 }, "separator": { "lineThickness": 1, "lineColor": "#EEEEEE" }, "imageSizes": { "small": 40, "medium": 80, "large": 160 }, "containerStyles": { "default": { "foregroundColors": { "default": { "default": "#000000", "subtle": "#767676", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "dark": { "default": "#000000", "subtle": "#66000000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "light": { "default": "#FFFFFF", "subtle": "#33000000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "accent": { "default": "#0063B1", "subtle": "#0063B1", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "good": { "default": "#54a254", "subtle": "#DD54a254", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "warning": { "default": "#c3ab23", "subtle": "#DDc3ab23", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "attention": { "default": "#FF0000", "subtle": "#DDFF0000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } } }, "backgroundColor": "#FFFFFF" }, "emphasis": { "foregroundColors": { "default": { "default": "#000000", "subtle": "#767676", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "dark": { "default": "#000000", "subtle": "#66000000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "light": { "default": "#FFFFFF", "subtle": "#33000000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "accent": { "default": "#2E89FC", "subtle": "#882E89FC", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "good": { "default": "#54a254", "subtle": "#DD54a254", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "warning": { "default": "#c3ab23", "subtle": "#DDc3ab23", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } }, "attention": { "default": "#FF0000", "subtle": "#DDFF0000", "highlightColors": { "default": "#22000000", "subtle": "#11000000" } } }, "backgroundColor": "#F0F0F0" } }, "actions": { "maxActions": 100, "spacing": "Default", "buttonSpacing": 8, "showCard": { "actionMode": "Inline", "inlineTopMargin": 8, "style": "emphasis" }, "preExpandSingleShowCardAction": false, "actionsOrientation": "horizontal", "actionAlignment": "Stretch", "wrap": true, "buttonStyles": { "positive": { "backgroundColor": "#091359", "foregroundColors": { "default": { "color": "#FFFFFF" } } } } }, "adaptiveCard": { "allowCustomStyle": false }, "imageSet": { "maxImageHeight": 100 }, "media": { "allowInlinePlayback": true }, "factSet": { "title": { "size": "Default", "color": "Default", "isSubtle": false, "weight": "Bolder", "wrap": true }, "value": { "size": "Default", "color": "Default", "isSubtle": false, "weight": "Default", "wrap": true }, "spacing": 8 }, "cssClassNamePrefix": null, "_legacyFontType": { "fontFamily": "Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif", "fontSizes": { "small": 12, "default": 14, "medium": 17, "large": 21, "extraLarge": 26 }, "fontWeights": { "lighter": 200, "default": 400, "bolder": 600 } } }; const directLine = WebChat.createDirectLine({ domain: new URL('v3/directline', directLineURL), token }); // Sends "startConversation" event when the connection is established. const subscription = directLine.connectionStatus$.subscribe({ next(value) { if (value === 2) { directLine .postActivity({ localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone, locale, name: 'startConversation', type: 'event' }) .subscribe(); // Only send the event once, unsubscribe after the event is sent. subscription.unsubscribe(); } } }); WebChat.renderWebChat({ adaptiveCardHostConfig,styleSet ,directLine, locale, styleOptions }, document.getElementById('webchat')); })();

Support. Connect with us!

IT Emergency

Ticket by Email

Ticket in Our Portal

/ STAY IN TOUCH

General

Services

Solutions