-
新規でウィジェットを制作いただきたいです。
トピックス by
249 pt
2024年1月23日 11:57
455
PV
現在、診断風のアンケートを制作しております。
下記がイメージになります。
設問２の回答に応じて、診断結果を出し分けしていただきたいと思っております。
また、「診断結果を見る」というCTAボタンを押したあとに、ローディングするような仕様で表示され、その後診断結果がでてくる流れにしたいのですがこちらも可能でしょうか。
元のVersionはこちらになります。
https://app.squadbeyond.com/ab_tests/bks_enq_chat_001/articles#VfDWoLvVaiLlgHcNPjytQ
恐れ入りますが、ご確認のほどよろしくお願いいたします。
-
31 コメント
-
ご依頼ありがとうございます！
元のversionのプレビューを共有いただけますでしょうか？
今の形ですと確認できなくてですね・・・
よろしくお願いします！
<プレビュー取得方法>
https://knowledge.squadbeyond.com/edit-page/preview-page/what-difference
-
-
ありがとうございます！
確認します！
-
-
お待たせいたしました！
作成しましたが、既存修正になるので貴社アカウントに移させていただければと思います！
widgetをコピーしていただければお好きなbeyondページに貼り付けられます！
どのフォルダに移していいかご教授ください！
また、診断中のローディング画像は弊社で作成したものを使用しておりますので、
下記箇所の画像を入れ替えていただければと思います。
<!-- ↓ 診断中のローディングここから ↓ --> <div class="auto-chats-loading shindan-loading"> <div class="auto-chats-item"> <!-- 診断中のローディング画像はお好みのものにご変更下さい --> <img src="<a target="_blank" class="c-link" data-stringify-link="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" delay="150" data-sk="tooltip_parent" href="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" rel="noopener noreferrer" style="box-sizing: inherit; color: inherit; text-decoration: none;">https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif</a>" style="border-radius:50%;overflow: hidden;" height="169" width="169" draggable="false" class="lazyload"> </div> </div> <!-- ↑ 診断中のローディング ここまで ↑ -->また、設問２の回答に応じた診断結果の出しわけについては、
最終コンテンツを下記HTML構成にしております。
こちらの構成に基づいて設置いて下さいませ。<!-- ↓ 診断結果コンテンツここから ↓ --> <div class="auto-chats-contents"> <div class="auto-chats-item"> <!-- 診断結果前にメッセージがある場合 いらなければ削除して下さい --> <div class="message"> ...HTML省略... </div> <!-- ↑ 診断結果前にメッセージがある場合 ここまで ↑ --> <!-- ↓ 診断結果による各コンテンツの設定 ↓ --> <div class="shindan-results scroll-animation fadein-up"> <!-- ↓ 回答がA2-1の場合 ↓ --> <div class="shindan-result result-1"> ...HTML省略... </div> <!-- ↑ 回答がA2-1の場合 ここまで ↑ --> <!-- ↓ 回答がA2-2の場合 ↓ --> <div class="shindan-result result-2"> ...HTML省略... </div> <!-- ↑ 回答がA2-2の場合 ここまで ↑ --> <!-- ↓ 回答がA2-3の場合 ↓ --> <div class="shindan-result result-3"> ...HTML省略... </div> <!-- ↑ 回答がA2-3の場合 ここまで ↑ --> <!-- ↓ 回答がA2-4の場合 ↓ --> <div class="shindan-result result-4"> ...HTML省略... </div> <!-- ↑ 回答がA2-4の場合 ここまで ↑ --> </div> <!-- ↑ 診断結果による各コンテンツの設定 ここまで ↑ --> </div> </div> <!-- ↑ 診断結果コンテンツここまで ↑-->また下記 JavaScript body にあったコードの方は、
このたびの調整の兼ね合い上、コメントアウト（無効化）しております。<script> /* 以下コメントアウト //回答毎にメッセージ出し分け var inputBoxs = document.querySelectorAll(".choices-item [type='radio']"); for (var i = inputBoxs.length - 1; i>=0; i--) { inputBoxs[i].addEventListener('change', function() { console.log(i); let inputName = this.name; var val = $(this).val(); //アンケ1 if(inputName=='q1'){ //回答したメッセを表示 $('#q1-dashiwake').text(val); } }); } //# sourceURL=test.js */ </script> -
おお世話になっております。
ご確認ありがとうございます！
こちら、確認させていただきます。
また、お願いしたいフォルダは下記になります！
https://app.squadbeyond.com/ab_tests/bks_enq_chat_001/articles#VfDWoLvVaiLlgHcNPjytQ
-
-
ありがとうございます！
確認いたしました。
一点、お伺いしたいのですが、
診断結果を「カルーセル」で出したいと思っております。
▼下記イメージ
※添付いたします。また、診断後、
その他の銘柄についても、カルーセルで表示させたいと思っております。こちら、可能かどうかをお伺い出来ますと幸いです。
-
確認させていただきます💪
-
ありがとうございます！
よろしくお願いいたします！
-
早速ありがとうございます！
こちら確認させていただきます！
-
すみません！
こちら、どちらのVersionに反映していただきましたでしょうか！？
-
こちらで問題ないようでしたら反映しようと考えておりました！
反映しても問題ないでしょうか？？
-
-
あぁ、そういうことだったのですね…。
失礼しました。
確認したい点が、診断結果後の商品紹介カルーセル部分を
下記のウィジェットに変更できるかどうかだったのですが、
こちらへの変更は可能そうでしょうか…？
可能であれば、反映をお願いしたいです！
▼やりたいウィジェット
-
念のため確認させてください！画像赤枠部分(https://t.gyazo.com/teams/squadbeyond/f6c9f45bada5c3fff87dad408fe06b7f.png)を「https://sb-draft-preview.squadbeyond.com/articles/kZLIRfqkobrRlNghQ/draft?token=1a27d9cb18b44a11833bb0331c9b8b38」に変更したいということであっていますでしょうか！？
-
-
いただいた部分ではなく、下記になります！
-
-
かしこまりました💪
-
-
上記、赤枠部分を「「https://sb-draft-preview.squadbeyond.com/articles/kZLIRfqkobrRlNghQ/draft?token=1a27d9cb18b44a11833bb0331c9b8b38」」にご変更いただけますと幸いです。
-
ご制作ありがとうございます！
イメージ通りになりました！
こちらで反映をお願いしたいです！
恐れ入りますが、ご確認のほど何卒よろしくお願いいたします。
-
反映しました！
よろしくお願いいたします！
https://app.squadbeyond.com/ab_tests/HeMoqWvANRXJopjwg/articles#ItRDlpDeKwAXTbSKiw
-
お世話になっております！
確認させていただきました！
度々申し訳ないです…。
少しご確認させていただきたい内容がございまして、
以下ご確認いただくことは可能でございますでしょうか。
何度もご確認してしまい申し訳ございません。
恐れ入りますがご確認のほどよろしくお願いいたします。
