AgentX Support - AIエージェントのデプロイ
Webサイト、ヘルプセンター、モバイルアプリ、eコマースストアなど、さまざまなプラットフォームにAIエージェントをデプロイできます。 このガイドでは、各プラットフォームのセットアップ手順について説明します。
Webサイトデプロイメント
Webサイトに追加
AIエージェントをWebサイトに追加するには、次の手順を実行します。
AIエージェントを選択します。
Settings > Advanced Features > Deploymentに移動します。
AIエージェントのスニペットをコピーします。
バージョン
AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。
AIエージェントを表示するWebページの<head>タグまたは<body>タグにスクリプトを貼り付けます。
スクリプトを追加したWebページに移動します。 AIエージェントが表示されます。
デプロイ済みエージェント
Zendesk Help Centerに追加
AIエージェントをZendesk Help Centerに追加するには、次の手順を実行します。
AIエージェントを選択します。
Settings > Advanced Features > Deploymentに移動します。
AIエージェントのスニペットをコピーします。
バージョン
AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。
Zendeskアカウントにサインインします。
Knowledgeに移動し、Knowledge adminをクリックします。
サイドバーでCustomize design(目のアイコン)をクリックします。
テーマを変更するには、Customizeをクリックします。
テーマのカスタマイズ
Edit codeをクリックします。
テーマコードの編集
テーマのコードを編集することを確認するには、Access codeをクリックします。
編集済みコードは自動更新を停止します
テーマコードを編集すると、Zendeskの自動更新からリンク解除されます。 今後は新しいテーマ更新を手動で適用する必要があります。
document_head.hbsを選択し、AIエージェントのスクリプトスニペットを貼り付けます。
AIエージェントのスクリプトスニペットの貼り付け
変更を適用するには、Publishをクリックします。
ヘルプセンターに移動します。 AIエージェントが表示されます。
デプロイ済みエージェント
Zendesk Web Widgetがデフォルトで表示されないようにする方法については、Zendeskドキュメントを参照してください。
Shopifyに追加
AIエージェントをShopifyストアに追加するには、次の手順を実行します。
AIエージェントを選択します。
Settings > Advanced Features > Deploymentに移動します。
AIエージェントのスニペットをコピーします。
バージョン
AIエージェントの下書きバージョンと公開済みバージョンを切り替えることができます。 下書きバージョンを使用すると、URLに&draft=trueパラメータが含まれます。 これにより、公開する前に変更をテストしてデプロイできます。
accounts.shopify.comでShopifyアカウントにサインインします。
admin.shopify.comでストアの管理画面を開きます。
Online Store > Themesに移動します。
現在のテーマを見つけて、Customizeの横にある•••(3つのドット)をクリックし、Edit codeを選択します。
theme.liquidファイル(layoutフォルダ内)を開きます。
終了</head>タグの直前にスクリプトスニペットを貼り付けます。
保存をクリックします。
ストアをプレビューします。 ページにAIエージェントアイコンが表示されます。
任意です。 Shopifyプレビューバナーを閉じるには、Hide barをクリックします。
これでAIエージェントがインストールされました。 変更を本番環境に反映するには、テーマを公開します。
モバイルSDK
モバイルSDKとCustom Webviewへのアクセス
モバイルSDK(iOS、Android)とCustom Webviewは、Workato Environmentへの移行が完了するまで、既存のDeepConverse GitHub organizationを通じて利用できます。
iOS SDK
AgentX Supportは、AIエージェントをiOSモバイルアプリに統合するためのSDKを提供します。
インストール
次の内容をPodfileに追加して、CocoaPodsを使用してSDKをインストールします。
pod 'DeepConverse', :git => 'https://github.com/converselabs/ios-sdk.git', :branch => 'release'セットアップ
次のViewControllerの例は、ボタンがタップされたときにSDKを初期化してAIエージェントを読み込む方法を示しています。 セットアップ時にエージェントへメタデータを渡すこともできます。
<DOMAIN>と<BOT_NAME>をAgentX Supportの値に置き換えます。
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を提供します。
インストール
ルートbuild.gradleファイルを見つけ、allprojectsの下に次のJitPackリポジトリを追加します。
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}アプリレベルのbuild.gradleにSDK依存関係を追加します。
dependencies {
implementation 'com.github.converselabs:android-sdk:1.0.6'
}セットアップ
次のMainActivityの例は、ボタンがタップされたときにSDKを初期化してAIエージェントを読み込む方法を示しています。 実行時にエージェントへメタデータを渡すこともできます。
DOMAINとBOT_NAMEをAgentX Supportの値に置き換えます。
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エージェントを自動的に開くように事前設定されています。
https://cdn.deepconverse.com/v1/assets/widget/embedded-chatbot?hostname=<SUBDOMAIN>-<BOT_ID>.deepconverse.com<SUBDOMAIN>と<BOT_ID>をAgentX Supportの値に置き換えます。
Webviewはボタンのクリックまたは別のアクションに応答してURLを読み込み、Webviewで次のJavaScriptを呼び出します。
// 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エージェントを読み込む関数を使用する方法を示しています。
// 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ハンドラーを登録します。 open、minimize、closeで3つの主なアクションが返送されます。
// 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エージェントのトリガーイベントを設定します。
window.dispatchEvent(new CustomEvent('dc.bot.show'));カスタム初期化とメタデータの受け渡し
デフォルトでは、AIエージェントスクリプトはページ読み込み時にエージェントを表示します。 ただし、エージェントが表示されるタイミングをより細かく制御する必要がある場合や、カスタムメタデータを渡す予定がある場合は、トリガー関数をオーバーライドしてWebページ上でエージェントを手動で初期化できます。
AIエージェントの初期化
AIエージェントは、スクリプトを通じて渡されるイベントに基づいて動作します。 ボタンのクリック後や別のユーザーアクション後など、イベントが送信されるタイミングをカスタマイズできます。
カスタム初期化を設定するには、次の手順を実行します。
AIエージェントを選択します。
Settings > Features > Trigger Functionに移動します。
ユースケースに応じて、次のJavaScriptコードを編集します。
document.dispatchEvent(new CustomEvent("botWidgetInit", {"detail": {"origin": "support"}}));メタデータの受け渡し
カスタムメタデータをAIエージェントに渡して、ワークフロー内で判断を行うことができます。 このメタデータは会話コンテキスト内に存在し、ルーティング、API呼び出し、その他のアクションで使用できます。
メタデータを渡すには、次の手順を実行します。
AIエージェントを選択します。
Settings > Features > Trigger Functionに移動します。
ユースケースに応じて、次のJavaScriptコードを編集します。
let metadata = {
"origin": "support",
"tags": ["ios", "vip"]
}
document.dispatchEvent(new CustomEvent("botWidgetInit", {"detail": metadata}));Last updated: