-
<script>
-
window.ZOHOIM = window.ZOHOIM || {};
-
function closeWidget() {
-
const { triggerEvent } = window.ZOHOIM;
-
triggerEvent('closeWidget');
-
}
-
function openWidget() {
-
const { triggerEvent } = window.ZOHOIM;
-
triggerEvent('openWidget');
-
}
-
function toggleWidget() {
-
const { triggerEvent } = window.ZOHOIM;
-
triggerEvent('toggleWidget');
-
}
-
</script>
-
-
<button type="button" onclick="openWidget()">Open</button>
-
<button type="button" onclick="closeWidget()">Close</button>
-
<button type="button" onclick="toggleWidget()">Toggle</button>
ビジネスメッセンジャーのウィジェットでのJavaScript APIの利用
こちらのヘルプ記事では、JavaScript APIを利用してビジネスメッセンジャーのウィジェットをカスタマイズする方法について説明します。インスタントメッセージの経路の設定、ZOHOIMのグローバルオブジェクトの作成、ウィジェットのレイアウトと外観のカスタマイズについて紹介します。
JavaScript APIの概要
ビジネスメッセンジャーでは、JavaScript APIを利用できます。JavaScript APIを利用すると、データを事前に入力したり、連絡先の詳細を取得したりできます。また、ウィジェットの外観をカスタマイズすることも可能です。
JavaScript APIの利用
JavaScript APIを利用するには、ビジネスメッセンジャーの埋め込みコードをコピーして、自社のWebサイトのHTMLコード内に貼り付ける必要があります。コードを貼り付ける前に、コード内でJavaScript APIの各情報が適切に設定されていることをご確認ください。
ビジネスメッセンジャーのウィジェットの設定
ビジネスメッセンジャーのウィジェットを設定するには：
- インスタントメッセージの設定画面で、ビジネスメッセンジャーの経路を作成します。
- 経路の埋め込み用のコードをコピーします。
- 埋め込み用のコードをビジネスメッセンジャーの設置先のWebページに挿入します。
- コードを挿入する前にZOHOIMオブジェクトを初期化します。
- window.ZOHOIM = window.ZOHOIM || {};
- ビジネスメッセンジャーのウィジェットのレンダリングに必要な情報をwindow.ZOHOIM変数内に設定します。
ビジネスメッセンジャーの埋め込み用コードのサンプル
-
<script type="text/javascript" nonce="{place_your_nonce_value_here}" src="https://im.zoho.com/api/v1/public/channel/435798000000140015/widget" defer> var _d=document;_d.prefilledMessage=</script>
APIの設定
window.ZOHOIMで以下の情報を設定します。
|
属性名
|
型
|
説明
|
|
widgetContainerId
|
文字列
|
ビジネスメッセンジャーがレンダリングされる要素のIDです。
|
|
widgetLayout
|
オブジェクト
|
ビジネスメッセンジャーのウィジェットのレイアウトのカスタマイズに必要な設定について記述します。
|
|
widgetLayout.showWidget
|
真偽値
|
ビジネスメッセンジャーのウィジェットを表示するかどうかを設定します。
|
|
widgetLayout.needWidgetBubble
|
真偽値
|
ビジネスメッセンジャーのウィジェットを吹き出しアイコンとして表示するかどうかを設定します。
|
|
widgetLayout.needCloseIcon
|
真偽値
|
ビジネスメッセンジャーのウィジェットの上部に終了アイコンを表示するかどうかを設定します。
|
|
widgetProps.sessionVariableValues
|
配列
|
自動ガイドボットのセッション変数を設定します。
詳細はこちら |
|
**customStyles
|
文字列
|
ビジネスメッセンジャーのウィジェットのスタイルをカスタマイズするために必要な設定について記述します。
|
|
customStyles.mode
|
文字列
|
ビジネスメッセンジャーのテーマを設定します。例："light"（ライト）、"dark"（ダーク）。
|
|
customStyles.theme
|
文字列
|
ビジネスメッセンジャーのウィジェットのテーマについて記述します。 例：16進数カラーコード
|
|
customStyles.actionTheme
|
文字列
|
ビジネスメッセンジャーのウィジェットのアクションテーマについて記述します。例：16進数カラーコード
|
|
customStyles.wallpaper
|
オブジェクト
|
ビジネスメッセンジャーのウィジェットの壁紙の設定について記述します。
|
|
customStyles.wallpaper.src
|
オブジェクト
|
モード別のビジネスメッセンジャーのウィジェットの壁紙の設定について記述します。
|
|
customStyles.wallpaper.src.light
|
文字列
|
ライトモードの壁紙を設定します（画像URL）。
|
|
customStyles.wallpaper.src.dark
|
文字列
|
ダークモードの壁紙を設定します（画像URL）。
|
|
poweredByTag
|
オブジェクト
|
ビジネスメッセンジャーのウィジェットのフッターにおける「powered by」タグの表示設定について記述します。
|
|
poweredByTag.isChecked
|
真偽値
|
ビジネスメッセンジャーのフッターに「powered by」タグを表示するかどうかを設定します。
|
|
customHandlers
|
オブジェクト
|
ビジネスメッセンジャーのウィジェットの機能に必要な設定について記述します。
|
|
customHandlers.closeButtonHandler
|
関数
|
完了アイコンがクリックされたときに実行する処理を設定します。
|
|
customHandlers.backButtonHandler
|
関数
|
戻るアイコンがクリックされたときに実行する処理を設定します。
|
|
customHandlers.openArticle
|
関数
|
記事のリンクがクリックされたときに実行する処理を設定します。
詳細はこちら |
APIの実行
以下のメソッドを利用すると、ビジネスメッセンジャーのウィジェットとWebアプリ間でデータをやりとりできます。
|
メソッド名
|
説明
|
引数
|
戻り値
|
|
triggerEvent
|
特定のイベントを実行し、実行されたイベントを購読しているすべてのメソッドを実行します。
|
ZOHOIM.triggerEvent('eventName',...args)
|
NIL
|
|
subscribeToEvent
|
メソッドが特定のイベントを購読するように設定します。
|
ZOHOIM.subscribeToEvent( 'eventName', method)
|
NIL
|
以下は、ビジネスメッセンジャーのウィジェットのレンダリング方法について示したサンプルコードです。
<html>
<head>
<title>Page Title</title>
<script>
window.ZOHOIM = window.ZOHOIM || {};
window.ZOHOIM.widgetContainerId = "test";
window.ZOHOIM.widgetLayout = { needWidgetWithBubble : false, needCloseIcon : true};
window.ZOHOIM.customStyles = '{ "mode": "light", "theme": "#71198c","actionTheme":"#1a7063", "wallpaper": {"src": {"light":"https://fastly.picsum.photos/id/703/536/354.jpg?hmac=1NZ7SzrTrnA-1O2S18kJC-IFIOZyYeHt8x98Iqdd5kM"}},"poweredByTag": { "isChecked": false } }';
customCloseButtonHandler = ()=>{alert('clicked the close button');}
customBackButtonHandler = ()=>{
if(a===1){
a=0;
window.ZOHOIM.triggerEvent('showCloseIcon',true);
}else{
a=1;
window.ZOHOIM.triggerEvent('showCloseIcon',false);
}
}
window.ZOHOIM.customHandlers = {
closeButtonHandler : customCloseButtonHandler,
backButtonHandler : customBackButtonHandler
}
</script>
<script type="text/javascript" nonce="{place_your_nonce_value_here}" src="https://implus.localzoho.com/api/v1/public/channel/c572beb392335194a3f8e528fb092408/widget" defer> var _d=document;_d.prefilledMessage= </script>
</head>
<body>
<div id="test" style="height: 500px; width: 400px; border: 1px solid black;"></div>
</body>
</html>
連絡先情報の取得用のAPI
widgetPropsを使用して連絡先情報を提供できます。
|
属性名
|
型
|
説明
|
|
ContactInfo
|
オブジェクト
|
連絡先の詳細を記述します。
|
サンプル
-
window.ZOHOIM.widgetProps = { 'contactInfo': {'name':'Manoj','phone': '+91203354', 'email': 'abc@gmail.com'}};
認証用API
以下では、ビジネスメッセンジャーで認証プロセスを処理するための設定を紹介します。
Csrfcookieを設定するためのメソッド：
-
window.ZOHOIM.setCsrfParamName(csrfParamName);
-
window.ZOHOIM.setCsrfToken(csrfToken);
OAuthを設定するためのメソッド（JWT認証の場合）：
-
window.ZOHOIM.setAuthtoken(token);
ドメインを設定するためのメソッド：
-
window.ZOHOIM.setCustomDomainUrl(DomainURL);
ビジネスメッセンジャーにZohoAccountIdを追加するためのメソッド：
-
window.ZOHOIM.setZaid(zaid);
レンダリング前の処理の設定：
ウィジェットをレンダリングする前に実行する処理を設定できます。
-
window.ZOHOIM.beforeRenderCallback= () => {
-
//todo
-
}
ビジネスメッセンジャーのウィジェットの表示変更
ビジネスメッセンジャーの利用者がウィジェットの表示を管理できるようにするための公開メソッドが導入されました。メソッドを利用することにより、利用者がウィジェットを操作して、表示を管理できるようになります。
利用可能なイベント
|
イベント名
|
説明 |
|
openWidget
|
ビジネスメッセンジャーのウィジェットを開きます。 |
|
closeWidget
|
ビジネスメッセンジャーのウィジェットを閉じます。
|
|
toggleWidget
|
ウィジェットの開閉状態を切り替えます。
|
|
showBubble
|
ウィジェットの吹き出しアイコンを表示します。
|
|
hideBubble
|
ウィジェットの吹き出しアイコンを非表示にします。
|
サンプル
以下のコードは、ウィジェット管理用の新しいメソッドの利用例を示したサンプルです。
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho Campaigns Resources
Zoho WorkDrive Resources
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
APIダッシュボードの利用
APIダッシュボード Zoho Deskには、他のサービスと連携するためのAPI（Application Programming Interface）の機能が用意されています。APIの利用状況については、ダッシュボードで確認できます。具体的には、対象期間におけるAPIの実行回数、処理内容、アクセス元などの詳細を、表やグラフで見やすく確認することが可能です。管理者は、ダッシュボードを通じてAPIの利用状況が適切かどうかを確認し、必要に応じて利用方法を最適化するなどの対応をとることができます。 ...BotFatherを使用してTelegramのAPIトークンを取得する方法
Telegram連携 Telegramはクラウドベースのチャット（インスタントメッセージ）サービスです。Zoho Deskと連携することで、顧客とチャットでやりとりできます。 Telegramボットとは？ Telegramボット は、Telegramでのチャット対応の自動化や効率化に役立つボット（チャットロボット）です。Telegramボットを利用することで、自社のサポート部門で専用の電話番号を用意しなくても、問い合わせ対応を行うことが可能になります。 TelegramボットのAPI ...Google 翻訳を使用した問い合わせのやりとりの翻訳
Google Translator（翻訳）の拡張機能を使用すると、Zoho Deskのユーザーが、問い合わせのやりとりを必要な言語に翻訳することができます。担当者が自身の母国語や、選択した言語で問い合わせのやりとりを表示するのに役立ちます。地理的、または言語的な障壁を取り除くことで、柔軟に顧客に対応することができます。 Google Translator拡張機能のインストール 管理者権限を持つユーザーアカウントで、Zoho Deskにログインします。 ...Radarアプリのダッシュボードの概要（その他のダッシュボード）
ダッシュボード機能を利用すると、必要なデータを見やすくひと目で確認できます。グラフや表など、データ内容に適した形で概要や傾向を確認することが可能です。Zoho Deskのモバイルアプリ「Radar」には、さまざまなダッシュボードが用意されています。 この記事では、以下のダッシュボードについて説明します。 ナレッジベースのダッシュボード：ナレッジベースが効果的に活用されているかどうかを分析できます。 ...