---
sourceDocument: Yokohama 対話型インターフェース
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/yokohama/conversational-interfaces

 Release :

    - yokohama

ft:locale :

    - ja-JP

ft:publication_title :

    - Yokohama 対話型インターフェース

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# サードパーティ Web サイトへのポータブル 仮想エージェント チャットウィジェットの追加

# サードパーティ Web サイトへのポータブル 仮想エージェント チャットウィジェットの追加 {#ariaid-title1}

* リリースバージョン: Yokohama
* 
* 更新日 2025年01月30日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

サードパーティの Web ページで 仮想エージェント するためにポータブルチャットウィジェットを使用するには、必要なコードを Web ページに追加します。

## 始める前に

このトピックの手順を完了する前に、[ポータブル 仮想エージェント チャットウィジェットの構成](https://servicenow-prod.fluidtopics.net/M5aqWiEU_lV1dvGHy6udsQ "サードパーティの Web ページで仮想エージェントを実行するようにポータブル仮想エージェントチャットウィジェットを設定します。")を行ってください。

詳細については、 ServiceNow コミュニティ サイトの「[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)」の記事を確認してください。

必要なロール：virtual_agent_admin または admin

## 手順

このスクリプト参照をページヘッダーにインポートしてインスタンス化し、外部ページヘッダーに ServiceNow チャットインスタンスを作成します。  
注:  
このスクリプト参照例では、site1.example.com は ServiceNow インスタンスの URL を参照します。

    <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>

ヒント:  
組織でカスタムドメイン名を使用している場合は、ServiceNow ドメイン名ではなくカスタムドメイン名をインスタンスプロパティとして入力して、ブラウザーの結果が複数のブラウザー間で確実に一貫しているようにします。

構成の例
:

        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 構成スキーマ
:

        {
            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
        }