ヘルプセンター検索を外部フォームに連動させる(JavaScript版)
React などのフレームワークで作成した外部フォームとヘルプセンター検索を連動させる方法を説明します。
フォームの入力内容に応じて、関連するヘルプ記事がリアルタイムで表示される機能を実装できます。
実装例
STEP1:検索連携を挿入したい箇所にdivを置く
id属性などを用いて、判別可能な div を用意してください。
<div id="{targetId}" />
STEP2:スクリプトを読み込む
引数を指定し、Helpdog関数を実行してください。
必要な引数は以下の3つです。
siteId: ヘルプドッグの埋め込みサイトID(管理画面で確認)
target: 検索結果を表示するdivのセレクタ
queryFields: 検索対象のフォームフィールドのセレクター(カンマ区切り)
<script>
(function(){var w=window,d=document;if(!w.Helpdog){var h=function(){h.c(arguments)};h.q=[],h.c=function(e){h.q.push(e)},w.Helpdog=h;var l=function(){var s=d.createElement("script");s.type="text/javascript",s.async=!0,s.src="https://sdk.helpdog.ai/v1/script.js";var x=d.getElementsByTagName("script")[0];x.parentNode.insertBefore(s,x)};"loading"===d.readyState?d.addEventListener("DOMContentLoaded",l):l()}})();
Helpdog('site.instantSearch', {
siteId: '{埋め込みサイトID}',
target: '#{targetId}',
queryFields: '{セレクター}',
})
</script>