-
吹き出しを削除する方法を知りたいです！
トピックス by
1792 pt
2023年9月6日 17:25
150
PV
【Widget名】
自動応答チャット形式アンケート（選択肢による回答・単一/複数選択・繰り返しの質問コンテンツ付き）※要javascript
【修正したいこと】
- 最初に出てくる吹き出しの数を5個から3個に削除したいです
- １問目の解答後に出てくる吹き出しは、最初の１つだけ残してあとの２つを削除したいです
- 質問数を計４問から５問に増やしたいです
【参考画像】
https://drive.google.com/file/d/1-2z56V_ViDYQ-GpGm7xg_SA36MftpT3p/view
【参考ページ】
-
1 コメント
-
基本的には指定したHTMLを元に表示をコントロールしておりますので、思い通りの表示にするにはHTMLの編集は必須のウィジェットとなっております。
表示のルールさえわかれば思い通りに表示内容をコントロール可能でございますが、HTMLに不慣れですとやや手順が複雑に感じるかもしれません。。
少々ご説明が長くなり恐れ入りますが、回答させていただきます。
最初に出てくる吹き出しの数を5個から3個に削除する方法
会話の中で 出てくる吹き出しは .auto-chat-item の数だけ表示しますので、最初の会話の中の.auto-chat-itemを 5 つから 3つにする事で吹き出しの数のコントロールが可能となります。
[修正例]
<div class="auto-chat-greeting">
<div class="auto-chat-item">
<div class="icon">...省略...</div>
<div class="talk-box">
<div class="text">...吹き出し1</div>
</div>
</div>
<div class="auto-chat-item">
<div class="talk-box">
<div class="text">...吹き出し2</div>
</div>
</div>
<div class="auto-chat-item">
<div class="talk-box">
<div class="text">...吹き出し3</div>
</div>
</div>
</div>１問目の解答後に出てくる吹き出しを最初の１つだけ残す方法
こちらの方も同様に、回答後の .auto-chat-item の数を 1つにする事で 回答後の吹き出しを 1つにする事が可能でございます。
[修正例]
<div class="auto-chat-answer">
<div class="auto-chat-item">
<div class="icon">...省略...</div>
<div class="talk-box">
1つ目のアンケートを答えた後の吹き出しです。
吹き出しは1つに調整しております。
</div>
</div>
</div>質問数を計４問から５問に増やす方法
現在のHTMLの構成が、下記となっております。
・最初のあいさつのコンテンツ
・設問1のコンテンツ
・設問1の回答コンテンツ
・Q2へのボタン
・設問2のコンテンツ
・設問2の回答コンテンツ
・Q3へのボタン
・設問3のコンテンツ
・設問3の回答コンテンツ
・Q4へのボタン
・設問4のコンテンツ
・設問4の回答コンテンツ
・繰り返す質問コンテンツへのボタン
・繰り返す質問コンテンツ修正としては冒頭にもお伝えしているように、指定したHTMLを元に表示をコントロールしておりますので、この場合は 下記手順にて実施いたします。
・繰り返す質問コンテンツへのボタン と 繰り返す質問コンテンツ を削除
・Q4へのボタンをコピーしてQ5と書き換えた上、設問4の回答コンテンツの後に設置
・設問4のコンテンツ、設問4の回答コンテンツ をそれぞれコピーし、Q5へのボタンの後に設置し内容を編集具体的にには HTMLの構成が下記となります。
<div class="auto-chat-greeting"> ...最初のコンテンツ... </div>
<div class="auto-chat-contents"> ...設問1コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問1回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q2へのボタン... </div>
<div class="auto-chat-contents"> ...設問2コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問2回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q3へのボタン... </div>
<div class="auto-chat-contents"> ...設問3コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問3回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q4へのボタン... </div>
<div class="auto-chat-contents"> ...設問4コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問4回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q5へのボタン... </div>
<div class="auto-chat-contents"> ...設問5コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問5回答コンテンツ（最終コンテンツ）...</div>また上記基本ルールの方はウィジェットの吹き出しコメントにもございますので、確認くださいませ。