サポートウィジェットの新しいタイプであるアンサーウィジェットの設定方法について説明します。
サイト上のつまずきが多い箇所にピンポイントでアンサーを提供することで、利用者の素早い自己解決を促すことができます。

アンサーウィジェットの設定方法

サポートウィジェットの設定が初めての方や共通の設定項目について知りたい方は先にサポートウィジェットを配信するの内容をご確認ください。

 

1. 基本情報のタイプの項目でアンサーウィジェットを選択

   
   

   今回は例としてここで選択した要素に本記事を紐づけたアンサーウィジェットを設定していきます。

2. 表示要素条件でウィジェットを設置する要素を指定する

   • CSSセレクタで指定する場合

     ウィジェットを設置するページにアクセスしKARTE Action Viewer等で表示したい要素のCSSセレクタを取得し設定します

     

   • 要素内のテキストで指定する場合

     表示したい要素内のテキストをそのまま設定します

     

3. 表示コンテンツの項目でウィジェット展開時に表示するアンサーを選択

   
   

   関連記事
   アンサーの登録

4. プレビューで確認しながらアイコンの配置とデザインを設定

   
   

   カスタムCSSの設定による基本設定や詳細設定にないカスタマイズも可能です。

5. テスト配信による実サイト上での検証

   テスト配信機能で実サイト上でのアイコンの配置や表示を本番配信前に確認しましょう。

   今回例として設定したアンサーウィジェットの表示は以下のようになります。

   • ボタン要素のCSSセレクタを指定したウィジェットアイコン

     

   • テキストで「アンサーウィジェット(β)」を指定したウィジェットアイコン

     

   • アイコンクリックしウィジェットが展開された状態