【WhatYa】EC-CUBEでチャットを設定したい

WHTAYAV2

質問

EC-CUBEでのチャットを設定するにはどうしたらいいですか？

解決策

EC-CUBEのブロック管理を利用したタグの埋め込み方法をご紹介いたします。

留意事項

WhatYa埋め込みタグの設置方法のみの説明となります。
WhatYaをPCとスマートフォン両方に表示させる場合は、PCとスマートフォンどちらも設定を行っていただく必要があります。

①ブロックの追加

EC-CUBE管理画面にログインし、ブロックを追加します。

管理画面メニュー > コンテンツ管理 > PCもしくはスマートフォン > ブロック管理をクリック
ブロック管理画面の「ブロックを新規入力」をクリック
ブロック名・ファイル名は任意で入力し、入力欄に空色からお渡ししたWhatYa埋め込みタグを貼り付ける
「登録する」ボタンをクリックし、ブロックの追加が完了

②ページレイアウト編集

管理画面メニュー > コンテンツ管理 > PCもしくはスマートフォン > ブロック管理をクリック
編集可能ページ一覧から、WhatYaを表示させるページのレイアウト「編集」をクリック
①ブロックの追加で追加したWhatYa埋め込みタグのブロックを<head></head>以外の位置に設置
「プレビュー」ボタンをクリックし、WhatYaのチャットボタンが表示されるか確認
「登録する」ボタンをクリックし、EC-CUBEへのWhatYaの導入設定が完了

参考）EC-CUBEでのデザイン適用

EC-CUBEの規定のCSSではid,classの重複により、WhatYaで指定したCSSがずれる場合があります。

ずれた場合には、以下のCSSを適応いただくことにより、解消できるケースがございます。

※EC-CUBE 3.0系 4.0系に現れる現象です。

#_ChatHeader h6 { /* ヘッダのフォントサイズ */
  font-size: 1.5rem;
}
#_ChatMenuRoot span { /* メニューのフォントサイズ */
  font-size: 1.6rem;
}
#_ChatWindow { /*スクロールバー非表示の回避*/
  width: 330px;
}
input[type=file] {/*ファイル選択ボタンが勝手に表示されることの回避*/
    display: none;
}
#_ChatWindowUserInput {/*userinputのフォントサイズ*/
    font-size: 1.6rem;
}
#_ChatButton svg {/*chatbutton中のアイコンサイズ*/
    font-size: 3rem;
}
#_ChatWindowUserInputSendButton svg {/*送信ボタンのアイコンサイズ*/
    font-size: 2.5rem;
}
#_ChatHeader_CloseIcon svg {/*閉じるボタンのアイコンサイズ*/
    font-size: 2.5rem;
}
#_ChatHeader_MenuIcon svg {/*ハンバーガーメニューボタンのアイコンサイズ*/
    font-size: 2.5rem;
}

※動作保証についてはいたしておりません。

質問

解決策

参考）EC-CUBEでのデザイン適用

Related articles