フローティングボタンを希望する案件が多く、Xwriteのウイジェット機能で対応してもらえると嬉しいです。

今はHTMLをウィジェット、CSSと組み合わせて実装しています。

特にLPタイプではフローティングボタンはCV率を高めるため「あるのが当然」という感覚のクライアントも増えて来た印象です。

是非、フローティングボタンのウィジェットなどでの追加をお願いします。

◆参考

HTML側（ウィジェットやフッターエリアに追記）

<div class="floating-bottom-nav">
<a href="/">
<span class="nav-icon">🏠</span>
ホーム
</a>
<a href="tel:0X0-XXXX-XXXX">
<span class="nav-icon">📱</span>
TEL
</a>
<a href="mailto:info@example.com">
<span class="nav-icon">✉️</span>
MAIL
</a>
</div>

CSS側

/* スマホのみ表示（768px以下） */
@media (max-width: 768px) {

.floating-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
z-index: 9999;
background: #f5a800; /* 黄色背景 */
border-top: 2px solid #e09000;
}

.floating-bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 0;
color: #fff;
font-size: 12px;
text-decoration: none;
border-right: 1px solid rgba(255,255,255,0.3);
}

.floating-bottom-nav a:last-child {
border-right: none;
}

.floating-bottom-nav .nav-icon {
font-size: 22px;
margin-bottom: 4px;
}

/* フローティングナビの高さ分、コンテンツが隠れないように余白を追加 */
body {
padding-bottom: 70px;
}

}