...
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
...
Tips(アイコンなし・下向きの吹き出し)
※イメージ
...
コード ブロック | ||
---|---|---|
| ||
#button_1 ._ChatButton_BalloonAvatar {/* アイコンを非表示 */
display: none;
}
#button_1 ._ChatButton_BalloonText > div:nth-child(3) {/* デフォルトの吹き出し三角部分を非表示 */
display: none;
}
#button_1 ._ChatButton_BalloonText > div:nth-child(2) {/* 吹き出し部分のサイズや色等を調整 */
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
letter-spacing : 6px;
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
display: block;
box-shadow: unset;
}
#button_1 ._ChatButton_BalloonText > div:nth-child(2)::before {/* 吹き出しの三角部分の位置や色などを調整 */
content: "";
position: absolute;
top: 100%;
left: 75%;
margin-left: -15px;
border: 10px solid transparent;
border-top: 10px solid #000000;
} |
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※吹き出しのサイズや吹き出しの色等の値は、ご希望のサイズに適宜ご変更ください。
パネル | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
吹き出し(右向き) |
...