{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":4842,"path":"conversational-interfaces/virtual-agent/configure-portable-va-web-client.md","title":"Configure the portable Virtual Agent chat widget","bundle":null,"doc_type":null,"release":"australia","body":"\n# Configure the portable Virtual Agent chat widget\n\nConfigure the portable Virtual Agent chat widget to run Virtual Agent on third-party web pages.\n\n## Before you begin\n\n**Note:**\n\nFor the enhanced chat Virtual Agent display experience, the assistant's **Allow public access for this assistant** check box must be selected to instantiate correctly, regardless if you want guest sessions. Go to **Conversational Interfaces** &gt; **Assistant Designer** &gt; **\\[Assistant name\\]** and select **Edit**. While editing the assistant, go to **Settings** &gt; **Display experiences**, and then select the **Allow public access for this assistant** check box and **Save**. For more information about this check box, see [Display your assistant on a portal, channel, or mobile app](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/now-assist-in-virtual-agent/display-assistant-portal-channel.md).\n\nFor the standard chat Virtual Agent display experience, the chat widget is only accessible to authenticated users by default. To allow unauthenticated users to access the chat widget, you must enable the sn\\_va\\_web\\_client\\_app\\_embed page for public access. For more information, see [Make UI pages public or private](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-security/t_MakeAPagePublic.md) and [Enable public access to the chat widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/enable-public-access-web-client.md).\n\nRole required: admin\n\n## About this task\n\nServiceNow only supports the portable Virtual Agent when the top-level domain and domain name match the site that is loading the chat widget. SSO is only supported through the service-now.com URL. Anything beyond that will require custom solution and implementation.\n\n## Procedure\n\n1.  Navigate to **All**, and then enter `sys_properties.list` in the filter.\n\n2.  In the System Properties \\[sys\\_properties\\] table, search for the **com.glide.cs.embed.csp\\_frame\\_ancestors** property by name.\n\n3.  Select the property name to open the form and specify the directive values.\n\n<table id=\"table_mny_mrp_ktb\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nType\n\n</td><td>\n\n**string** This is the default value.\n\n</td></tr><tr><td>\n\nValue\n\n</td><td>\n\nSource value of the HTTP header directive: `Content-Security-Policy:frame-ancestors<source>`This property applies to most major browsers, except for Internet Explorer. Specify one or more sources, including the following:\n\n-   **'self'**: Indicates that the origin is the same as the page being served. For example, if the value is **'self' http://mywebsite.com**, then the iframe is embedded within the parent domain and mywebsite.com. This is the default value.\n-   **host-source**: The domains in which the external web page can be embedded. Specify the Internet host site by name, IP address, or optional URL or port number. Site address can start with a wildcard \\(asterisk\\) character. Example value: **http://\\*.example.com**\n-   **scheme-source**: A schema. For example: **http:** or **https:**\n-   **none**: No matching URLs.\n\n\n</td></tr></tbody>\n</table>4.  Return to the System Properties \\[sys\\_properties\\] table to search for the **com.glide.cs.embed.xframe\\_options** property by name.\n\n5.  Select the property name to open the form and specify the directive values.\n\n<table id=\"table_mrd_5v5_4qbxxxxx\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nType\n\n</td><td>\n\n**string** This is the default value.\n\n</td></tr><tr><td>\n\nValue\n\n</td><td>\n\nValue of the of the X-Frame-Options header directive, to indicate whether the browser can render an external web page in a frame. Specify one of the following values:\n\n-   **sameorigin**: Displays the page in a frame that has the same origin as the page itself. This is the default value. This property applies to older browsers, such as Internet Explorer 11. Example value: **allow from https://example.com**\n-   **deny**: Does not display the page in a frame.\n-   **allow-from uri**: Displays the page only in a frame on the specified origin.\n\n**Note:** This value no longer works in browsers.\n\n</td></tr></tbody>\n</table>6.  For enhanced chat, return to the System Properties \\[sys\\_properties\\] table, and then select **New**.\n\n7.  For enhanced chat, complete the following fields to create the **glide.uxf.cors.allowed\\_assets** property, and then **Submit**.\n\n<table id=\"table_rf3_b5s_jkc\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nName\n\n</td><td>\n\nEnter `glide.uxf.cors.allowed_assets`.\n\n</td></tr><tr><td>\n\nType\n\n</td><td>\n\nSelect **string**. This is the default value.\n\n</td></tr><tr><td>\n\nValue\n\n</td><td>\n\nEnter `embedded-enhanced-chat/index`.\n\n</td></tr></tbody>\n</table>8.  Configure CORS Rules for the REST API to give access across domains.\n\n    This rule gives the web domain you specify the rights to call the API that gives it access to the chat widget on the web page without a security restraint. All domains must share a common parent domain. Also, you must create a CORS Rule for each subdomain that you want to support.\n\n    1.  Navigate to **All** &gt; **System Web Services** &gt; **REST** &gt; **CORS Rules**.\n\n    2.  Click **New**.\n\n    3.  On the form, fill in the fields.\n\n<table id=\"table_cvf_c5p_ktb\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nName\n\n</td><td>\n\nUnique name for the rule.\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nScope of the application. **Global** is the default value.\n\n</td></tr><tr><td>\n\nREST API\n\n</td><td>\n\nName of the REST API. Select **Conversation Consumer Account \\[now/cs\\]**.\n\n</td></tr><tr><td>\n\nDomain\n\n</td><td>\n\nThe domain for your website. For example: **https://mycompany.com** If you have multiple subdomains for your website, you must create a CORS Rule for each. For example, **support.mycompany.com** and **products.mycompany.com** would require two separate CORS Rules.\n\n **Note:** Wildcards are not allowed.\n\n</td></tr><tr><td>\n\nMax age\n\n</td><td>\n\nThe number of seconds to cache the client session. After an initial CORS request, further requests from the same client within the specified time do not require a preflight message.If you do not specify a value, the default value of **0** indicates that all requests require a preflight message.\n\n</td></tr></tbody>\n</table>    4.  On the **HTTP Methods** tab, select **GET**.\n\n        The portable chat widget will only receive requests.\n\n    5.  Select **Submit**.\n\n    6.  Repeat these steps if you want to add the portable chat widget to another subdomain on your website.\n\n9.  **Note:** This step is only applicable if your users must be logged in and authenticated with ServiceNow.\n\n    Standard chat only: Create a JavaScript script that uses the `window.postMessage()` method \\(Web API\\) to define event conditions that trigger SSO authentication in a user interface page and returns users to a chat widget page that you specify.\n\n    To redirect users to a chat widget page, use this string: `\"https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=’ + encodeURIComponent(<your-page>)`\n\n    **Note:** Before you run the script, use the **com.glide.cs.web\\_client\\_login\\_redirect\\_urls** system property to specify the URLs that can be passed in the script. The redirection works only when you specify one or more allowed URLs in the property value. Specify the full redirect URLs or the host part of the URL, such as `https://example.com` .\n\n    Example script:\n\n    ```\n    <script>\n        window.addEventListener(\"message\", function(e) {\n           // redirect to SSO login if the chat widget logs in but is logged in as a guest user(unauthenticated)\n          if(e.data.type===\"SESSION_CREATED\" && e.data.authenticated === false)\n            window.location.href = \"https://<your-instance>.service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=\"+ encodeURIComponent(location.href);\n          \n          // redirect to SSO login if the ServiceNow platform logs out from underneath the chat widget\n          if(e.data.type===\"SESSION_LOGGED_OUT\")\n            window.location.href = \"https://<your-instance>service-now.com/sn_va_web_client_login.do?sysparm_redirect_uri=\" + encodeURIComponent(location.href);\n        });\n      </script>\n    ```\n\n    In this example, authentication is triggered in the specified instance when the SESSION\\_CREATED or SESSION\\_LOGGED\\_OUT events occur. After authentication \\(when the SSO credentials for users are accepted\\), users are redirected to the embedded chat widget page that you specified in `sn_va-web_client_login.do?sysparm_redirect_uri=’ + encodeURIComponent(<your-page>)`, as long as you also specified the page URL in the **com.glide.cs.web\\_client\\_login\\_redirect\\_urls** property.\n\n\n## What to do next\n\n[Add the portable Virtual Agent chat widget to a third-party website](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/add-portable-va-client-website.md).\n\n**Parent Topic:**[Use the portable chat widget to add Virtual Agent to your web page](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/use-portable-va-web-client.md)\n\n"}}