チャットの吹き出し

Question

https://lohaco.jp/support/

上記のページを参考にチャットで質問するとポップアップで【こちらに質問してください】というような
矢印が出るのを参考にしたいのですが
弊社でも可能でしょうか。

ちなみ弊社のページはこちらです。

https://shop.marianaocean.com/

宜しくお願い致します。

Accepted Answer

ECマスターズの田中です。

> デザインをこのようなものに変更したい場合はどうすればいいでしょうか

「jquery.balloon.js」のcssオプションをご利用ください。
たとえば、背景色と文字サイズを変える場合は、先のソースの３行目に対して、

$(".wc-shellinput").balloon({contents : "こちらにご質問ください",position : "top", css: { "font-size": "16pt", "background": "#33cc99", } });

このようにcssオプションを追加していただく形になります。
cssオプションの中に、他のプロパティを加えることも可能です。

Answer

ECマスターズの田中です。

jQueryプラグイン「jquery.balloon.js」をご利用いただくと、
まさにご希望どおりの吹き出し表示が
実現可能であると思います。

簡単な使い方など、下記URLにて紹介がございますので
ご参照ください。
http://urin.github.io/posts/2014/jquery-balloon-js

Answer

ありがとうございます。

ただこちらをみてもうまく組み込めませんでした。。
手順を教えていただけると幸いです。

Answer

先ほどのものをこちらのページに反映したのですが
何もでません。
jQueryはIframeのチャットのほうに適応させました。

http://www.marianaocean.work/gokurakuyu/index.html

Answer

度々申し訳ございません
見れたんですが
位置関係がかなり難しいです。。
しかもスマホになると変になってしまいます。

この場合はどのように設定すればスマホでもきれいにみえますか？

http://www.marianaocean.work/gokurakuyu/index.html

Answer

ECマスターズの田中です。

実際に設置されたページ（chat.html）の様子を確認したところ、
旧バージョンの「jquery.balloon.js」が使われていることがわかりました。

新しいバージョンをご利用いただくことで
位置の調整が改善されるようですので、

現在のページに設置されている「balloon.js」を、
http://urin.github.io/jquery.balloon.js/
上記デモページの「Download」内にある
「Download compressed」を右クリックして
名前をつけて保存してダウンロードした「jquery.balloon.js」に
差し替えていただきますようお願いします。

その上で、吹き出しの設置部分を、たとえば
$(function(){
  $(".wc-console").showBalloon({contents : "こちらにご質問ください",position : "top"});
});
とすることで、入力欄の直上に設置することができます。
見た目の調整は「css」オプションにてご設定ください。

Answer

http://www.marianaocean.work/gokurakuyu/index.html

設置はできましたが
こちらに設置すると上にでてきてしまうのですが。。。

急ぎなので修正を教えてください。

Answer

ECマスターズの田中です。

chat.htmlを確認したところ、
吹き出しを設置する部分が

 
$("#bot").showBalloon({contents : "こちらにご質問してください",position : "bottom"});


のまま変わっておりませんでしたので、


$(function(){
$(".wc-console").showBalloon({contents : "こちらにご質問ください",position : "top"});
});


に差し替えた上で、表示をご確認ください。

Answer

ありがとうございます。

ちゃんとみれましたが
これを文字を打った段階で矢印が消えるにはどうすればいいでしょうか。

Answer

http://www.marianaocean.work/gokurakuyu/index_3.htm

度々申し訳ございません。
無事実装できたのですが
デザインをこのようなものに変更したい場合はどうすればいいでしょうか

https://www.tam-tam.co.jp/tipsnote/html_css/post9815.html