AgentX Support - AIエージェントのデプロイ

このページは機械翻訳により提供されています。翻訳内容と英語版に相違がある場合は、英語版が優先されます。

Webサイト、ヘルプセンター、モバイルアプリ、eコマースストアなど、さまざまなプラットフォームにAIエージェントをデプロイできます。 このガイドでは、各プラットフォームのセットアップ手順について説明します。

Webサイトデプロイメント

Webサイトに追加

AIエージェントをWebサイトに追加するには、次の手順を実行します。

1

AIエージェントを選択します。

2

Settings > Advanced Features > Deploymentに移動します。

3

AIエージェントのスニペットをコピーします。

バージョン

AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。

4

AIエージェントを表示するWebページの<head>タグまたは<body>タグにスクリプトを貼り付けます。

5

スクリプトを追加したWebページに移動します。 AIエージェントが表示されます。

デプロイ済みエージェントデプロイ済みエージェント

Zendesk Help Centerに追加

AIエージェントをZendesk Help Centerに追加するには、次の手順を実行します。

1

AIエージェントを選択します。

2

Settings > Advanced Features > Deploymentに移動します。

3

AIエージェントのスニペットをコピーします。

バージョン

AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。

4

Zendeskアカウントにサインインします。

5

Knowledgeに移動し、Knowledge adminをクリックします。

6

サイドバーでCustomize design(目のアイコン)をクリックします。

7

テーマを変更するには、Customizeをクリックします。

テーマのカスタマイズテーマのカスタマイズ

8

Edit codeをクリックします。

テーマコードの編集テーマコードの編集

9

テーマのコードを編集することを確認するには、Access codeをクリックします。

編集済みコードは自動更新を停止します

テーマコードを編集すると、Zendeskの自動更新からリンク解除されます。 今後は新しいテーマ更新を手動で適用する必要があります。

10

document_head.hbsを選択し、AIエージェントのスクリプトスニペットを貼り付けます。

AIエージェントのスクリプトスニペットの貼り付けAIエージェントのスクリプトスニペットの貼り付け

11

変更を適用するには、Publishをクリックします。

12

ヘルプセンターに移動します。 AIエージェントが表示されます。

デプロイ済みエージェントデプロイ済みエージェント

Zendesk Web Widgetがデフォルトで表示されないようにする方法については、Zendeskドキュメントを参照してください。

Shopifyに追加

AIエージェントをShopifyストアに追加するには、次の手順を実行します。

1

AIエージェントを選択します。

2

Settings > Advanced Features > Deploymentに移動します。

3

AIエージェントのスニペットをコピーします。

バージョン

AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。

4

accounts.shopify.comでShopifyアカウントにサインインします。

5

admin.shopify.comでストアの管理画面を開きます。

6

Online Store > Themesに移動します。

7

現在のテーマを見つけて、Customizeの横にある•••(3つのドット)をクリックし、Edit codeを選択します。

8

theme.liquidファイル(layoutフォルダ内)を開きます。

9

終了</head>タグの直前にスクリプトスニペットを貼り付けます。

10

保存をクリックします。

11

ストアをプレビューします。 ページにAIエージェントアイコンが表示されます。

12

任意です。 Shopifyプレビューバナーを閉じるには、Hide barをクリックします。

これでAIエージェントがインストールされました。 変更を本番環境に反映するには、テーマを公開します。

モバイルSDK

モバイルSDKとCustom Webviewへのアクセス

モバイルSDK(iOSAndroid)とCustom Webviewは、Workato Environmentへの移行が完了するまで、既存のDeepConverse GitHub organizationを通じて利用できます。

iOS SDK

AgentX Supportは、AIエージェントをiOSモバイルアプリに統合するためのSDKを提供します。

インストール

次の内容をPodfileに追加して、CocoaPodsを使用してSDKをインストールします。

ruby
pod 'DeepConverse', :git => 'https://github.com/converselabs/ios-sdk.git', :branch => 'release'

セットアップ

次のViewControllerの例は、ボタンがタップされたときにSDKを初期化してAIエージェントを読み込む方法を示しています。 セットアップ時にエージェントへメタデータを渡すこともできます。

<DOMAIN><BOT_NAME>をAgentX Supportの値に置き換えます。

swift
import UIKit

import DeepConverse

class ViewController: UIViewController {

    private var sdk : DeepConverseSDK? = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        var metadata = [String:String]()
        metadata["draft"] = "true"

        let session = DeepConverseSDKSession.init(
            subDomain: <DOMAIN>,
            botName: <BOT_NAME>,
            metadata: metadata,
            webViewTimeout: 60.0
        )

        sdk = DeepConverseSDK(delegate: self, session: session)
    }

    

    @IBAction func Click(_ sender: Any) {
        sdk?.openBot(viewController: self)
    }
}

extension ViewController: DeepConverseDelegate {

    func didWebViewFail(withError: DeepConverseWebHostError) {
        print("Did fail with error")
    }

    func didReceiveEvent(event: [String : Any]) {

    }

    func didCloseBot() {
        print("Did Close")
    }

    func didOpenBot() {
        print("Did Open")
    }
}

Android SDK

AgentX Supportは、AIエージェントをAndroidモバイルアプリに統合するためのSDKを提供します。

インストール

1

ルートbuild.gradleファイルを見つけ、allprojectsの下に次のJitPackリポジトリを追加します。

groovy
allprojects {
 repositories {
  ...
  maven { url 'https://jitpack.io' }
 }
}
2

アプリレベルのbuild.gradleにSDK依存関係を追加します。

groovy
dependencies {
  implementation 'com.github.converselabs:android-sdk:1.0.6'
}

セットアップ

次のMainActivityの例は、ボタンがタップされたときにSDKを初期化してAIエージェントを読み込む方法を示しています。 実行時にエージェントへメタデータを渡すこともできます。

DOMAINBOT_NAMEをAgentX Supportの値に置き換えます。

java
package com.sample.webviewapp;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;

import com.deepconverse.android_sdk.DeepConverseSDK;
import com.deepconverse.webviewapp.R;

import java.util.HashMap;
import java.util.Map;




public class MainActivity extends AppCompatActivity implements DeepConverseSDK.WebViewCallback {

    private Button openWebViewButton;
    private LinearLayout webUrlContainer;
    private DeepConverseSDK deepConverseSDK;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        openWebViewButton = findViewById(R.id.openWebViewButton);
        webUrlContainer = findViewById(R.id.webUrlContainer);

        openWebViewButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (deepConverseSDK != null) {
                    // Remove the existing WebUrlView if present
                    webUrlContainer.removeView(deepConverseSDK);
                    deepConverseSDK.destroyView();
                }

                // Create a new instance of WebUrlView
                Map<String, String> metadata = new HashMap<>();
                metadata.put("draft", "true");
                deepConverseSDK = new DeepConverseSDK(MainActivity.this, DOMAIN,
                        BOT_NAME, metadata);
                deepConverseSDK.setLayoutParams(new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.MATCH_PARENT,
                        LinearLayout.LayoutParams.MATCH_PARENT));
                deepConverseSDK.setWebViewCallback(MainActivity.this);
                deepConverseSDK.load();
                webUrlContainer.addView(deepConverseSDK);

                // Show the webUrlContainer and trigger a layout pass
                webUrlContainer.setVisibility(View.VISIBLE);
                webUrlContainer.requestLayout();
            }
        });
    }

    @Override
    public void onViewClosed() {
        // Remove the WebUrlView from the container
        if (deepConverseSDK != null) {
            webUrlContainer.removeView(deepConverseSDK);
            deepConverseSDK.destroyView();
            deepConverseSDK = null;
            webUrlContainer.setVisibility(View.GONE);
        }
    }
}

カスタムWebview

AIエージェントをカスタマイズされたユーザーインターフェイス内に埋め込む必要がある場合、または特定のアプリ要素との統合が必要な場合は、カスタムWebviewを使用できます。

SDKリポジトリ

リファレンス実装としてオープンソースSDKを提供しており、GitHubリポジトリで入手できます。 このリポジトリは現在、AgentX Supportの以前の組織名であるDeepConverseの下でホストされています。 これは将来の更新で変更される可能性があります。

次のURLを使用して、WebviewでAIエージェントを読み込むことができます。 トリガーイベントを受信するとAIエージェントを自動的に開くように事前設定されています。

url
https://cdn.deepconverse.com/v1/assets/widget/embedded-chatbot?hostname=<SUBDOMAIN>-<BOT_ID>.deepconverse.com

<SUBDOMAIN><BOT_ID>をAgentX Supportの値に置き換えます。

Webviewはボタンのクリックまたは別のアクションに応答してURLを読み込み、Webviewで次のJavaScriptを呼び出します。

swift
// Load the AI agent with Metadata
private func actionButtonJs() -> String {
    do {
        var metadataJSON = json(from: self.session.metadata)
        print("[DeepConverseSDK] Metadata:", metadataJSON)
        let s = """
    setTimeout(function () {var evt = new CustomEvent('botWidgetInit', { detail: (metadataJSON!) });document.dispatchEvent(evt);}, 100)

    document.addEventListener('dc.bot', function(e) {
      let payload = { action: e.detail.action };
      window.webkit.messageHandlers.actionTapped.postMessage(payload);
    });
    """
        return s;
    } catch {
        print("[DeepConverseSDK] Error in Metadata" + error.localizedDescription);

        // Fallback to load without metadata

        let s = """
        setTimeout(function () {var evt = new CustomEvent('botWidgetInit', { detail: {} });document.dispatchEvent(evt);}, 100)

        document.addEventListener('dc.bot', function(e) {
          let payload = { action: e.detail.action };
          window.webkit.messageHandlers.actionTapped.postMessage(payload);
        });
        """
        return s;
    }


}

次の例は、Webviewを設定し、AIエージェントを読み込む関数を使用する方法を示しています。

swift
// Some code
private func configureWebview() {

    let webConfiguration = WKWebViewConfiguration()
    let contentController = WKUserContentController()
    let js: String = actionButtonJs();
    let userScript = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
    contentController.removeAllUserScripts()
    contentController.addUserScript(userScript)
    contentController.add(
                self,
                name: "actionTapped"
            )
    webConfiguration.userContentController = contentController

    self.webview = WKWebView(frame: self.view.frame, configuration: webConfiguration)
    self.webview.navigationDelegate = self
    self.view.addSubview(self.webview)

    self.webview.scrollView.isScrollEnabled = false
    let webRequest = URLRequest(url: url,
                                cachePolicy: .useProtocolCachePolicy,
                                timeoutInterval: timeout)

    let layoutGuide = self.view.safeAreaLayoutGuide
    self.webview.translatesAutoresizingMaskIntoConstraints = false
    self.webview.leadingAnchor.constraint(
          equalTo: layoutGuide.leadingAnchor).isActive = true
    self.webview.trailingAnchor.constraint(
          equalTo: layoutGuide.trailingAnchor).isActive = true
    self.webview.topAnchor.constraint(
          equalTo: layoutGuide.topAnchor).isActive = true
    self.webview.bottomAnchor.constraint(
          equalTo: layoutGuide.bottomAnchor).isActive = true

    self.webview.load(webRequest)

    DispatchQueue.main.asyncAfter(deadline: .() + timeout) {
        if (self.webview.isLoading) {
            self.webview.stopLoading()
            self.delegate.didWebViewFail(withError: DeepConverseWebHostError.WebViewTimeout)
        }
    }
}

Webviewの終了を支援するコールバックも提供しています。

前述のコードスニペットは、コールバックをリッスンするためにactionTappedハンドラーを登録します。 openminimizecloseで3つの主なアクションが返送されます。

swift
// Some code
extension DeepConverseHostViewController : WKScriptMessageHandler {
    public func userContentController (
        _ userContentController: WKUserContentController,
        didReceive message: WKScriptMessage
    ) {
        do {
            print("[DeepConverseSDK] message:", message.body);
            guard let payload = message.body as? [String: String] else { return }
            print("struct:", payload["action"])

            switch (payload["action"]) {
            case "open":
                print("[DeepConverseSDK] open action");
                break;
            case "minimize":
                print("[DeepConverseSDK] minimize action")
                self.dismiss(animated: true, completion: nil);
                break;
           case "close":
                print("[DeepConverseSDK] close action");
                break;
            default:
                print("[DeepConverseSDK] unkn action")
            }

            delegate.didReceiveEvent(event: payload)
        } catch {
            print("[DeepConverseSDK] Event error")
        }
    }
}

設定済みのWebviewを使用すると、アプリ内でカスタムビューコントローラーを子コンテナまたはトップレベルコンテナとして設定できます。

JavaScriptでAIエージェントを開く

ボタンのクリックまたは別の外部イベントでAIエージェントを開くようにトリガーできます。 次のJavaScriptコードを使用して、AIエージェントのトリガーイベントを設定します。

javascript
window.dispatchEvent(new CustomEvent('dc.bot.show'));

カスタム初期化とメタデータの受け渡し

デフォルトでは、AIエージェントスクリプトはページ読み込み時にエージェントを表示します。 ただし、エージェントが表示されるタイミングをより細かく制御する必要がある場合や、カスタムメタデータを渡す予定がある場合は、トリガー関数をオーバーライドしてWebページ上でエージェントを手動で初期化できます。

AIエージェントの初期化

AIエージェントは、スクリプトを通じて渡されるイベントに基づいて動作します。 ボタンのクリック後や別のユーザーアクション後など、イベントが送信されるタイミングをカスタマイズできます。

カスタム初期化を設定するには、次の手順を実行します。

1

AIエージェントを選択します。

2

Settings > Features > Trigger Functionに移動します。

3

ユースケースに応じて、次のJavaScriptコードを編集します。

javascript
document.dispatchEvent(new CustomEvent("botWidgetInit", {"detail": {"origin": "support"}}));

メタデータの受け渡し

カスタムメタデータをAIエージェントに渡して、ワークフロー内で判断を行うことができます。 このメタデータは会話コンテキスト内に存在し、ルーティング、API呼び出し、その他のアクションで使用できます。

メタデータを渡すには、次の手順を実行します。

1

AIエージェントを選択します。

2

Settings > Features > Trigger Functionに移動します。

3

ユースケースに応じて、次のJavaScriptコードを編集します。

javascript
let metadata = {
    "origin": "support",
    "tags": ["ios", "vip"]
}
document.dispatchEvent(new CustomEvent("botWidgetInit", {"detail": metadata}));

Last updated: