【WhatYa】CSSで指定可能なid,classについて

WhatYa V2

現時点(2024/12/5)でCSSで指定可能なid,classです。
どこ(id,class)を、どのように(大きさ、背景色変更等)変更できるかのイメージです。

 

メッセージタイプ

 

CSSで指定可能なidおよびclass一覧

2024年12月5日 現在 チャットウィンドウの構成要素には以下のidまたはclassを付与しております。

idリスト(指定時は # をつけてご利用ください。)

No

id名

説明

No

id名

説明

1

_ChatWindow

チャットウィンドウ全体を構成するdiv要素

2

_ChatHeader

チャットウィンドウ最上部の枠を構成するdiv要素

3

_ChatHeaderIcon

チャットウィンドウ上部の、アイコンを包含するdiv要素

4

_ChatContent

チャットウィンドウ中央に表示される、会話内容を保持するdiv要素

5

_ChatWindowUserInputRoot

チャットウィンドウ下部に表示される、ユーザ入力領域を構成するdiv要素

6

_ChatWindowUserInput

ユーザ入力領域中のテキストボックスを囲むdiv要素

7

_ChatMenuRoot

チャットメニュー全体を包含するdiv要素

8

_ChatMenuItemsRoot

チャットメニューのアイテムリストを包含するdiv要素

9

_ChatButton

チャットボタンのdiv要素

10

_ChatHeader_MenuIcon

チャットヘッダーのハンバーガーメニューのbutton要素

11

_ChatHeader_CloseIcon

チャットヘッダーの閉じるボタンのbutton要素

12

_ChatWindowUserInputAttachFileButton

OPモードで出現するファイル添付マークのbutton要素

13

_ChatWindowUserInputSendButton

入力フィールドの送信button要素

14

_chatsubpage_root

サブページ用dev要素(現状OP接続時の画像アップロード確認画面用)

15

_ChatSubpage_ImgPreview-ROOT

OP接続時の画像アップロード確認画面のルートdiv要素

16

_ChatSubpage_ImgPreview-IMAGE

OP接続時の画像アップロード確認画面のimg要素の親div要素

17

_ChatSubpage_ImgPreview-BUTTONS

OP接続時の画像アップロード確認画面のボタングループの親div要素

18

_ChatSubpage_ImgPreview-BUTTONGROUP

OP接続時の画像アップロード確認画面のキャンセルボタンとアップロードボタンの親div要素

19

_ChatSubpage_ImgPreview-CANCEL

OP接続時の画像アップロード確認画面のキャンセルボタン

20

_ChatSubpage_ImgPreview-UPLOAD

OP接続時の画像アップロード確認画面のアップロードボタン

21

_ChatMenuItem_ModeSwitch

チャットメニューのモードスイッチ(ボット⇔オペレーター)するdiv要素

22

_ChatHeader_BackIcon

※スペシャルタグ表示時のみ出現
ヘッダー左側の戻るボタン

classリスト(指定時は . をつけてご利用ください)

No

class名

説明

No

class名

説明

1

_WhatYa_Message_PreLatest

2番目に新しい発話のdiv要素

2

_WhatYa_Message_Latest

最新の発話のdiv要素

3

_ChatMenuItem

チャットメニューのアイテムリスト内のリストのdiv要素

4

_ChatWindow_Mobile

モバイル画面時のチャットウィンドウ全体を構成するdiv要素(ID:_ChatWindowと同時に指定される)

5

_ChatWindow_PC

PC画面時のチャットウィンドウ全体を構成するdiv要素(ID:_ChatWindowと同時に指定される)

6

_ChatWindowContent_BOT_CONTENT

botからのメッセージを含むdiv要素(メッセージ送信時刻を含まない)

7

_ChatWindowContent_BOT_AVATAR

botからのメッセージ内に表示されているアバターを包含するdiv要素

8

_ChatWindowContent_BOT_TEXT

botからのテキストメッセージを含むdiv要素

9

_ChatWindowContent_OP_CONTENT

オペレータからのメッセージを含むdiv要素(メッセージ送信時刻を含まない)

10

_ChatWindowContent_OP_AVATAR

オペレータからのメッセージ内に表示されているアバターを包含するdiv要素

11

_ChatWindowContent_OP_TEXT

オペレータからのテキストメッセージを含むdiv要素

12

_ChatWindowContent_CS_CONTENT

カスタマーからのメッセージを含むdiv要素(メッセージ送信時刻を含まない)

13

_ChatWindowContent_CS_TEXT

カスタマーからのテキストメッセージを含むdiv要素

14

_ChatWindowContent_CHIP_SPAN

メッセージタイプ:chipsのテキストを包含するspan要素

15

_ChatWindowImageRoot

メッセージタイプ:imageを包含するdiv要素

16

_ChatWindowImage

メッセージタイプ:image内の画像のimg要素

17

_ChatWindowLinkImageSliderTile

メッセージタイプ:link_image_sliderを包含するdiv要素

18

_ChatWindowLinkImageSliderTileImage

メッセージタイプ:link_image_slider内の画像のimg要素

19

_ChatWindowList

メッセージタイプ:listを包含するdiv要素

20

_ChatWindowContent_DATE_TIME

(BOT/OP/customerに関わらず)メッセージの下部の名前と日時を包含するdiv要素

21

_ChatWindowContent_POST_USER

(BOT/OP/customerに関わらず)メッセージの下部の名前のspan要素

22

_ChatWindowContent_POST_DATE_TIME

(BOT/OP/customerに関わらず)メッセージの下部の日時のspan要素

23

_ChatWindowUserInputContainer

#_ChatWindowUserInputを包含するdiv要素

24

_ChatWindowOpConnecting

オペレーター接続中文言のdiv要素

25

_ChatWindowOpConnected

オペレーター接続成功文言のdiv要素

26

_ChatWindowContent_SYSTEM

システムエラー発生時文言のdiv要素(*OPへ短時間で同じ文言を送信した場合などに発生)

27

_ChatWindowContent_CS_IMG

オペレータ接続時、カスタマーからアップロードされた画像(img要素)の親のdiv要素

28

_ChatWindowMode_BOT

ボットモード時のチャットウィンドウ全体を構成するdiv要素(ID:_ChatWindowと同時に指定される)

29

_ChatWindowMode_OP

OP時のチャットウィンドウ全体を構成するdiv要素(ID:_ChatWindowと同時に指定される)

30

_ChatWindowListItem

メッセージタイプ:listのメッセージボックスのdiv要素

31

_ChatWindowListItemText

メッセージタイプ:listのメッセージボックス内テキストのdiv要素

32

_ChatWindowCard_Root

メッセージタイプ:image cardのメッセージ全体のdiv要素

33

_ChatWindowCard_Image

メッセージタイプ:image cardの画像部分のdiv要素

34

_ChatWindowCard_Text

メッセージタイプ:image cardのテキスト部分のdiv要素

35

_ChatWindowCard_Link

メッセージタイプ:image cardのリンク部分のdiv要素

36

_ChatWindowContent_CHIP_ROOT

メッセージタイプ:string chipの要素全体のdiv要素

37

_ChatWindowContent_CHIP_ITEM 

メッセージタイプ:string chipのボタン部分のdiv要素

38

_ChatWindowSlider_Root

メッセージタイプ:item image sliderのメッセージ全体のdiv要素

39

_ChatWindowSlider_Image

メッセージタイプ:item image sliderの画像部分のdiv要素

40

_ChatWindowSlider_TileBar

メッセージタイプ:item image sliderのテキスト部分のdiv要素

41

_ChatWindowContent_Markdown

メッセージタイプ:mark downのテキスト部分のdiv要素

42

_ChatWindowABar_Root

メッセージタイプ:スペシャルタグの要素全体のdvi要素

43

_ChatWindowABar_Content

メッセージタイプ:スペシャルタグ

44

_ChatAtchBg

メッセージタイプ:スペシャルタグの背景全体のdiv要素

45

_ChatAtchItemDetailRoot

メッセージタイプ:スペシャルタグの商品詳細全体のdiv要素

46

_ChatAtchItemDetailImage

メッセージタイプ:スペシャルタグの商品詳細画像部分のdiv要素

47

_ChatButton_PopupClose

チャットボタンの種類:ポップアップの閉じるボタン部分のdiv要素