タグを張り付けるだけで、WordPressでもチャットウィンドウが表示できます。
直感的なツリー表示で、分岐する複雑なシナリオを管理できます。
質問には質問文と、メッセージと画像が表示できます。
回答には選択肢のボタンと、テキストボックスおよび複数回答可能なチェックボックスの3種類が設定できます。
複雑な質問と回答の連なりを、管理ページで樹形図のようにツリー表示でき、管理しやすくなっています。
既存の質問・回答のコピーや接続ができ、シナリオ作成の手間が軽減できます。
ユーザーが回答した際、管理者へ回答をメールで自動送信できます。
チャットページの基本色やヘッダー文章を管理ページで設定できます。
タグを張り付けるだけで、WordPressでも使用できるチャットウインドウが設置できます。
次のタグを張り付けるだけで、この画面右下のようなチャットウインドウが設置できます。
どうぞお試しください。
<!-- ▼▼▼チャットウィンドウ▼▼▼ -->
<!-- 最初に右下に表示されるスタートアイコン -->
<div id="js_chatbox_show_btn_area" style="z-index: 10;position: fixed;bottom: 30px;left: auto;right: 30px;cursor: pointer;">
<img src="https://mitsuba-studio.com/app_scenario/iframe_chat/img/chat_icon.svg?v=145581515">
</div>
<!-- PC用チャットボックス -->
<div id="js_chatbox_area_for_pc" style="display:none;height: 550px;width: 400px;z-index: 20;position: fixed;bottom: 50px;border: 0;border-radius: 10px;background: none;left: auto;right: 50px;">
<div style="height: 76px;color:white;background-color: #85bd40;border-radius: 10px 10px 0 0;
display:flex; justify-content: space-between;align-items: center; padding-left: 20px;padding-right: 10px">
<div style="font-size:initial">
シナリオ型チャットボットデモ </div>
<div>
<img width="40" class="js_chatbox_reload_btn" style="cursor: pointer;" src="https://mitsuba-studio.com/app_scenario/iframe_chat/img/home_icon.svg?v=2067059266">
<img width="40" class="js_chatbox_hide_btn" style="cursor: pointer;" src="https://mitsuba-studio.com/app_scenario/iframe_chat/img/batu_icon.svg?v=434713290">
</div>
</div>
<iframe src="https://mitsuba-studio.com/app_scenario/chats/?mode=iframe" class="js_chatbot_iframe" style="height: 474px;width: 400px;" frameborder="0" ></iframe>
</div>
<!-- スマホ用チャットボックス -->
<div id="js_chatbox_area_for_sp" style="display: none;position: fixed;top: 0;right: 0;z-index: 20;width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;padding-top: 50px;background: #555;transform: translateX(100vw);transition: all .3s linear;">
<div style="height: 550px;max-height:90%;width:400px;max-width: 95%;position:relative;border: 0;border-radius: 10px;background: none;">
<div style="height: 76px;color:white;background-color: #85bd40;border-radius: 10px 10px 0 0;
display:flex; justify-content: space-between;align-items: center; padding-left: 20px;padding-right: 10px">
<div style="font-size:initial">
シナリオ型チャットボットデモ </div>
<div>
<img width="40" class="js_chatbox_reload_btn" style="cursor: pointer;" src="https://mitsuba-studio.com/app_scenario/iframe_chat/img/home_icon.svg?v=515911668">
<img width="40" class="js_chatbox_hide_btn" style="cursor: pointer;" src="https://mitsuba-studio.com/app_scenario/iframe_chat/img/batu_icon.svg?v=607602839">
</div>
</div>
<iframe src="https://mitsuba-studio.com/app_scenario/chats/?mode=iframe" class="js_chatbot_iframe" style="height: 474px;max-height:80%;width: 400px;max-width: 100%;" frameborder="0" ></iframe>
</div>
</div>
<script src="https://mitsuba-studio.com/app_scenario/iframe_chat/js/my_function.js?v=631554103"></script>
<!-- ▲▲▲チャットウィンドウ▲▲▲ -->
サーバーへの設置費用込! 動く形で納品いたします。
御社のご要望に沿ってカスタマイズいたします。
質問と回答選択肢などの本アプリへの設定を承ります。