---
sourceDocument: Australia Conversational Interfaces
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/conversational-interfaces

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Conversational Interfaces

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# Add the portable Virtual Agent chat widget to a third-party website

# Add the portable Virtual Agent chat widget to a third-party website {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

To use the portable chat widget for Virtual Agent on third-party web pages, add the necessary code to your web page.

## Antes de Iniciar

[Configure the portable Virtual Agent chat widget](https://servicenow-prod.fluidtopics.net/a2IdPHd5bzy2BMhgCkRksg "Configure the portable Virtual Agent chat widget to run Virtual Agent on third-party web pages.") prior to completing this topic's steps.

For additional information, review the [How to embed Virtual Agent in an external site](https://www.servicenow.com/community/virtual-agent-nlu-articles/how-to-embed-virtual-agent-in-an-external-site-updated-for-tokyo/ta-p/2308092) article on the ServiceNow Community site.

Role required: virtual_agent_admin or admin

## Procedimento

Import and instantiate this script reference to the page header to create a ServiceNow chat instance on your external page header:  
Nota:  
In the script reference example, site1.example.com refers to the URL for your ServiceNow instance.

    <script type="module" >
          import ServiceNowChat from "https://site1.example.com/uxasset/externals/now-requestor-chat-popover-app/index.jsdbx?sysparm_substitute=false";
          var chat = new ServiceNowChat({ instance: "https://site1.example.com/", });
        </script>

Dica:  
If your organization uses a custom domain name, input the custom domain name as the instance property, rather than the ServiceNow domain name, to ensure that browser results are consistent among multiple browsers.

Example with configuration
:

        const chat = new ServiceNowChat({
        	instance: 'https://site1.example.com',
        	context: {
        		skip_load_history: 1
        	},
        	branding: {
        		bgColor: '#333',
        		primaryColor: '#000',
        		hoverColor: '#EFEFEF',
        		activeColor: '#AAA',
        		openIcon: 'custom-open.svg',
        		closeIcon: 'custom-close.svg',
        		sizeMultiplier: 1.6
        	},
        	offsetX: 50,
        	offsetY: 50,
        	position: 'left',
        	translations: {
        		'Open dialog': 'Open chat',
        		'Open Chat. {0} unread message(s)': 'Click to open',
        		'Close chat.': 'Click to close',
        	},
        });

JSON configuration schema
:

        {
            instance: <string> - url to your instance, must be of the same domain (sub-domain)
            context: <object> - sys_parm variables to pass into the iframe
            branding: <object> - branding settings
                  bgColor: <rgb|hex> - can take an rgb tuple, ie: '56,56,56' or a 3 or 6 hex color code, ie: #333 or #efefef.  background color of button
           	primaryColor: <rgb|hex> - font color
           	hoverColor: <rgb|hex> - hover background color of button
           	activeColor: <rgb|hex> - click / active background color of button
           	openIcon: <string> - name of the uploaded custom icon in settings
           	closeIcon: <string> - name of the uploaded custom icon in settings
           offsetX: <integer> - distance in pixels the button moves along the x-axis
           offsetY: <integer> - distance in pixels the button moves along the y-axis
           position: <enum: left|right> - position left or right side of screen
           translations: <object> - contains label mappings for translations or label changes
           	'Open dialog': <string> - replacement text for accessibility
           	'Open Chat. {0} unread messages(s)': <string> - replacement text for tooltip
           	'Close chat.': <string> - replacement text for tooltip
        }