floatdock は、既存サイトに <script> 1行で フローティング / 下部固定 / 展開メニュー（FAB） の導線UIを追加する軽量ウィジェットです。 PCとスマホで表示方式を切り替え、スクロール時に隠す挙動も設定できます。
このページは「紹介ページ」用のサンプルです。右のプレビューは見た目のモックで、
実際の floatdock はこのページ末尾で読み込まれます（./floatdock.js）。
Hero section / content block
Long page… (scroll to see hide/show)
CTA should stay accessible
bottom-bar は店舗サイト、floating はLP、expand-fab は多機能向け。
既存サイトに <script> 1行で導入できます。設置の手間を最小限に。
PC/スマホで表示方式を切替。スマホは用途に合わせた3つのモードを搭載。
スクロール中は隠して、必要時だけ表示。ユーザー体験を妨げません。
依存ライブラリ無し。軽量で WordPress 等のCMSでも動作が安定します。
文言、色、リンク先はもちろん、表示位置やアニメーションも調整可能。
適切な aria-label を付与。最低限のアクセシビリティを確保。
※ スマホ判定は window.innerWidth < breakpoint で行われます。
<script src="https://path/to/floatdock.js" defer></script>
<script>
window.FLOATDOCK_CONFIG = {
lineUrl: "https://lin.ee/xxxxxx",
display: { mobile: "bottom-bar" },
hideOnScroll: { enabled: true }
};
</script>
本番運用は「設定を floatdock.js 内に内蔵」し、設置は <script> 1行だけにするのが最も安全・簡単です。
window.FLOATDOCK_CONFIG = {
breakpoint: 768,
lineUrl: "https://lin.ee/xxxxxx",
contactUrl: "/contact",
display: {
desktop: "floating",
mobile: "bottom-bar" // "bottom-bar" | "floating" | "expand-fab"
},
hideOnScroll: {
enabled: true,
hideDirection: "down",
hideAfter: 120
}
};tel:000-0000-0000 を contactUrl に指定可能サイト側で CSP が厳しい場合、外部JSの読み込みや動的な <style> 挿入が制限されることがあります。
DevTools → Network で Content-Security-Policy ヘッダを確認してください。
解決策： floatdock.js をサイトと同一ドメインに設置してください。
React/Vueなどでページ遷移時にDOMが再生成される場合、ウィジェットが消えることがあります。
// 遷移後に再初期化
window.LineWidget?.update?.();各フレームワークのルーター・フック内で上記を実行してください。
z-index との競合pointer-events: none の設定確認