カレンダー要素を使用すると、動的な予約ウィジェットを目標到達プロセスページに埋め込むことができます。このウィジェットは、ClickFunnels ワークスペースの予定アプリから事前に作成されたイベント タイプとシームレスに統合されます。この要素を使用すると、ユーザーはファネル ページで直接希望の時間枠を簡単に予約でき、合理化された予約エクスペリエンスが保証されます。この記事では、Calendar 要素の使用方法を学習します。
必要条件
アクティブなClickFunnelsアカウント
目標到達プロセスページ
ワークスペースの予定アプリで作成されたEvent Type
イベント・タイプの作成
左側のメインメニューで、予定 アプリをクリックします 。
[イベントタイプ] を選択します 。
[イベントタイプ を追加] ボタンをクリックして、新しいイベントを作成します。
作成するイベントタイプ を選択します 。使用可能なオプションは次のとおりです。
1対1:1:1の面接、営業会議、カジュアルなコーヒーチャットに最適なイベントタイプです 。主催者1名と招待者1名が参加します。
グループ (近日公開): ウェビナーやオンライン クラスに適したこのイベント タイプには、1 人のホストと招待者のグループが参加します。
コレクティブ: グループ面接やグループ営業電話に最適なこのイベント タイプでは、複数の主催者が 1 人の招待者と会います。
ラウンドロビン: このイベントタイプは、着信した営業電話を均等に分散するのに理想的で、1 人の招待者と 1 人のローテーション ホスト ミーティングを特徴としています。
イベントの作成について
ファネルステップでの予定イベント種別の添付
予定イベントタイプを使用するファネルステップに移動します。
ファネルステップ(オプトインページなど)の 3つのドットの アイコンをクリックし、[ イベントタイプの管理]を選択します。
.png "image(335).png")
サイドバーで [イベントの添付] をクリックし、このファネル ステップにリンクするイベントを選択します。これが完了したら、[ 更新] をクリックします。
ページエディタでのカレンダー要素の追加
ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に 行 を追加します。
行内のオレンジ色の + プラスまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。
[その他] カテゴリから [カレンダー] 要素を選択します。
カレンダー要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
ヒント：
カレンダーは、イベントの詳細、カレンダー、お問い合わせフォームなどの主要な予約コンポーネントを表示する完全に統合されたウィジェットです。正しく表示され、コンテンツの歪みを回避するには、この要素を 1 列の行内に配置して適切なスペースを確保することを検討してください。
カレンダー要素のカスタマイズ
要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。
上マージン
「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。.png "image(47).png")
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (
🖥️ ) アイコン: コンテナはデスクトップ ビューでのみ表示されます。モバイル(
📱 )アイコン:コンテナはモバイルビューでのみ表示されます。目 (
👁️ ) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。
ごみ箱 (
🗑️ ) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
プレビュー
イベントタイプがファネルステップにアタッチされ、 カレンダー 要素が追加されると、エディターの プレビュー
このプレビューでは、カレンダーの表示方法を示します。
制限
ファネルページ限定: カレンダー要素は、 目標到達プロセスページ内でのみ機能するように設計されています。サイト、ランディングページ、ブログ、コース、またはワークスペースの他のページでは使用できません。
有料イベントの支払い処理なし: イベントタイプで支払いが必要な場合、 カレンダー 要素は予約中の支払い処理を処理しません。代わりに、次のいずれかの代替方法を使用できます。
オプション 2: 予約フォームをウェブページに直接埋め込みます。
オプション 3: シームレスにアクセスできるように、直接イベント リンクを視聴者と共有します。
これらの方法の詳細については、Appointments - How to Publish Your ClickFunnels Appointmentsの記事 を参照してください。
予約後の自動ファネルナビゲーション: 目標到達プロセスでカレンダー要素を使用すると、ユーザーは予約後に次の目標到達プロセスステップに自動的にリダイレクトされます。「イベントの種類」で定義した「予約後」の設定は優先されません。予約後に次の目標到達プロセスのステップを表示したくない場合は、オプション 2 またはオプション 3 を使用してイベントを公開することを検討してください。
ページごとに 1 つのスケジューラ: 1 つのページで正しく機能できる Calendar 要素は 1 つだけです。複数のスケジューラ要素を追加すると、表示や機能の問題が発生する可能性があります。