チャットの吹き出し

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を確認したところ、吹き出しを設置する部分がのまま変わっておりませんでしたので、に差し替えた上で、表示をご確認ください。

Answer

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

Answer

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

チャットの吹き出し

カテゴリーから探す