カレンダー: アポイントメント予約カレンダーをページに追加する
公開日: 更新日:
カレンダー要素を使用すると、動的な予約ウィジェットをファネルページに埋め込むことができます。このウィジェットは、ClickFunnels ワークスペースの アポイントメント アプリで事前に作成したイベントタイプとシームレスに統合されます。この要素を使用すると、ユーザーはファネルページで直接希望の時間枠を簡単に予約でき、スムーズな予約体験を提供できます。この記事では、カレンダー要素の使用方法を説明します。
-
アクティブなClickFunnelsアカウント
-
ファネルページ
-
ワークスペースのアポイントメントアプリで作成されたイベントタイプ
イベント・タイプの作成
Section titled “イベント・タイプの作成”-
左側のメインメニューで、アポイントメント アプリをクリックします。
-
イベントタイプ を選択します。
-
イベントタイプを追加 ボタンをクリックして、新しいイベントを作成します。
-
作成する イベントタイプ を選択します。使用可能なオプションは次のとおりです。
-
1対1: 1対1の面接、営業会議、カジュアルなコーヒーチャットに最適なイベントタイプです。主催者1名と招待者1名が参加します。
-
コレクティブ: グループ面接やグループ営業電話に最適なこのイベント タイプでは、複数の主催者が 1 人の招待者と会います。
-
ラウンドロビン: このイベントタイプは、着信した営業電話を均等に分散するのに理想的で、1 人の招待者と 1 人のローテーション ホスト ミーティングを特徴としています。
-
💡 イベントの作成について詳しくは、次の記事をご覧ください: アポイントメント - イベントタイプを作成および管理する方法
ファネルステップへのアポイントメントイベントタイプの添付
Section titled “ファネルステップへのアポイントメントイベントタイプの添付”-
アポイントメントのイベントタイプを使用するファネルステップに移動します。
-
ファネルステップ(オプトインページなど)の 3つのドット アイコンをクリックし、イベントタイプを管理 を選択します。
-
サイドバーで イベントを添付 をクリックし、このファネルステップにリンクするイベントタイプを選択します。完了したら、Save をクリックします。
ページエディタでのカレンダー要素の追加
Section titled “ページエディタでのカレンダー要素の追加”-
ページエディタ内で、要素を 配置するセクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の +（プラス）または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
その他 カテゴリから カレンダー 要素を選択します。
カレンダー要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
カレンダー要素のカスタマイズ
Section titled “カレンダー要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコン をクリックするか、要素を直接クリックします。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
テキスト
テキスト パネルでは、予約ウィジェットに表示される文言を変更できます。たとえば、予約を取る、日付と時間を選択:、+ ゲストを追加、電話番号 などです。このパネルを表示するには、要素の設定を開き、上マージン の下にある テキスト を展開します。各フィールドにはデフォルトのテキストがラベルとして表示されます。独自の文言を入力して置き換えてください。編集した内容は、公開したページのライブ予約ウィジェットに反映されます。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
-
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
イベントタイプがファネルステップにアタッチされ、 カレンダー 要素が追加されると、エディターの プレビュー 👁️ アイコンを使用して、予約ウィジェットがどのように表示されるかを表示できます。ウィジェットには、イベント名、主催者情報、会議の時間と場所、タイムゾーン、利用可能なスロットを示すカレンダーなど、イベントタイプから必要なすべての詳細が動的に表示されます。イベントタイプの設定に応じて、ユーザーには時間枠と予約フォームを選択するオプションも表示されます。
このプレビューでは、カレンダーの表示方法を示します。
