ゼロからオリジナルのボタンをデザインし、X要素をクリックしたときに非表示になるセクション（バブル）を含めたい場合は、以下のシンプルな例をベースに拡張してください：

<div style="bottom: 30px; left: 10%; z-index: 999997; position: fixed;">
    <div style="background:red; padding:30px; position:relative;">
        This is bubble with close button.
        <div onclick="(event.target || event.srcElement).parentNode.parentNode.style.display = 'none'; if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;} if (event.preventDefault) {event.preventDefault();} LiveAgentTracker.closeBubbleButton('{$buttonid}');" style="position:absolute; top:10px; right:10px;">
            X
        </div>
    </div>
</div>
<div style="bottom: 0; left: 10%; z-index: 999997; position: fixed;">
    <div style="background:gray;">
        This is chat button bottom, which stay displayed.
    </div>
</div>

カスタムHTMLボタンを作成するには、エージェントパネルで Configuration（設定）→ Chat（チャット）→ Chat buttons（チャットボタン）→ Create（作成）の順に移動し、画面上部の Custom（カスタム）セクションで By writing your own HTML code（HTMLコードを直接記述する）オプションを選択します。