Webflow チュートリアル
このガイドに従って、WebflowのウェブページにCozyCal を追加し、すぐに予約を受け付けましょう
Webflow は、レスポンシブなウェブサイトを構築するための強力なウェブベースのドラッグ＆ドロップツールです。CozyCal もWebflowを使ってウェブサイトを制作しており、大変気に入っています！
このチュートリアルでは、CozyCal のフローティングボタンのインストールと編集、独自ボタンの使用方法、およびWebflowウェブサイトへのインフレームエンベッドの追加方法を学びます。
1. WebflowにCozyCal をインストールする
WebflowのウェブサイトにCozyCal をインストールするのは簡単です。短いコードを貼り付けるだけで完了します。以下の手順で始めましょう：
1. アカウントを作成 するか、CozyCal アカウントに ログイン してください。
2. 設定 & チーム → ウェブサイト設定 → CozyCal をインストール に移動します。
3. 自分でインストールする → Javascript → コードをコピー
をクリックします。
4. Webflowダッシュボードにログイン し、左側のナビゲーションバーにある 設定（Settings） をクリックします。
5. カスタムコード（Custom Code）
をクリックします。
6. 下にスクロールして、 フッターコード（Footer Code） にコードを貼り付け、 変更を保存（Save Changes） をクリックします。
注意：以下の画像に表示されているコードはサンプルコードです。必ずご自身の固有のコードを貼り付けてください。
7. CozyCal のインストールページに戻り、 次へ：インストールを確認（Next: Verify Install）→インストールを確認（Verify Install） をクリックして、インストールが正しく完了していることを確認します。
これで、CozyCal のボタンがサイトに表示されるようになりました！ 🙌
2. CozyCal のフローティングボタンを編集する
ウェブサイト上のCozyCal ボタンの色、テキスト、位置をカスタマイズできます。
設定 & チーム → ウェブサイト設定 → フローティングボタンを編集 に移動し、お好みに合わせて設定を変更するだけです。
これで、CozyCal のボタンがサイトに表示されるようになりました！ 🙌
3. 独自のボタンを使用する
WebflowウェブサイトでカスタムボタンをE使いたい場合も、簡単に設定できます。CozyCal はウェブサイト上の予約ページのリンクを検出し、自動的にモーダルで開きます。
注意：予約ページのモーダルをウェブサイト上で直接開くようにするには、まずCozyCal プラグインをインストールする必要があります。
1. 設定 → ウェブサイト設定 → フローティングボタンを編集
に移動します。 2. ウェブサイトにフローティングボタンを表示する
のチェックを外します。
3. 予約ページ（Booking Page） で 共有（Share） ボタンをクリックし、 リンクをコピー（Copy Link） します。
4. 予約ページのURL（例： https://cozycal.com/kat ）を、ウェブサイト上の任意のカスタムボタン、画像、またはテキストに追加します。
これで、予約ページがモーダルとしてポップアップ表示されます。
これで、CozyCal のボタンがサイトに表示されるようになりました！ 🙌
4. インフレームエンベッドを追加する
ウェブサイトにインフレームエンベッドオプションを追加することで、ゲストがウェブサイト上で直接予約できるようになり、スケジューリングの流れがよりスムーズになります。
1. 予約ページに移動します。
2. 共有（Share） をクリックし、「ウェブサイトに追加（Add to website）」を選択します。
3. インフレームエンベッドの下にある コードをコピー（Copy code） をクリックします。
4. Webflowで、カスタムHTMLを追加したい場所を選択します。 要素を追加（Add Elements） をクリックし、 エンベッド（Embed） を選択します。
5. CozyCal からコピーしたHTMLコードを貼り付け、変更を公開します。
6. これで、WebflowウェブサイトにCozyCal の予約ページがインフレームエンベッドとして表示されます。
ご不明な点がございましたら、お気軽にお問い合わせください。 ページ右下のピンク色のチャットバブルからメッセージをお送りください。できる限り早くご返答いたします。 😃