Calendlyを使用してスケジュールをウェブサイトに統合する

Calendly を使用して、Webflow サイトから直接会議をスケジュールします。

Calendly には、6 つのカレンダーに接続して空き状況を自動的に確認する機能があり、主要な連絡先、リード、顧客とのつながりを促進します。

このチュートリアルの内容:

  1. Calendlyリンクを複製する
  2. Calendlyをレイアウトに統合する
  3. ポップアップウィジェットのコードを再現する
  4. ポップアップコンテンツ

Calendlyリンクを複製する

まだ作成していない場合は、Calendly アカウントを登録してください。これは主に 2 つの理由で重要です。

  1. カレンダーアカウントとの同期を有効にします(例:Googleカレンダー)
  2. Calendlyを通じてスケジュールされた予定の調整を容易にします
開始するには、メールアドレスを入力してサインアップ ページにアクセスします。ログイン リンクと言語選択リンクもページにあります。

アカウントの設定が完了したら、 Calendlyメニューで、 リンクをコピーする 特定のイベントをスケジュールするには、 イベントの種類 セクション。最初に、Calendly は 3 つの選択肢を提供します (必要に応じて追加作成できます)。

  1. 15分間のミーティング
  2. 30分間のミーティング
  3. 60分間のミーティング

コピーしたリンクをWebflowプロジェクトに貼り付けて続行します。さまざまなリンクオプションが利用可能ですが、この例ではボタンを使用します。 追加 パネル(A)は 要素 タブの下 基本 セクション。次に、ボタンがキャンバスに追加されたら、コピーしたリンクをボタン設定に入力します。リンクの調整についてさらに詳しく知ることができます。

リンク設定パネルには、URL 入力フィールド、新しいタブで開くチェックボックス、プリロードドロップダウンメニュー、すべての設定を表示ボタンが表示されます。入力した URL は強調表示されます。

Calendlyをレイアウトに統合する

この段階では、コードスニペットを取得することが含まれます。 インライン埋め込み。 にいる間 カレンドリー ページで、希望するイベントタイプに関連付けられた共有ボタンを選択します。その後、 ウェブサイトに追加.

左側のステップ 1 では、30 分間の会議を共有します。右側のステップ 2 では、Web サイト リンクへの追加が強調表示されます。

選択する インライン埋め込み 選択して続行 続くをクリックし、 コードをコピー.

ステップ 1 は左側で、埋め込みインライン追加オプションを選択します。埋め込みインラインが強調表示されます。ステップ 2 は右側で、コードをコピーします。右側で青いコード コピー ボタンが強調表示されます。

その後、コピーしたコードをWebflow内のカスタムコード埋め込み要素に貼り付けることができます。 埋め込み 要素を埋め込むには、クイック検索(CMD/CTRL+E)を使用して「埋め込み」を検索するか、 埋め込み 要素から 追加 パネルにコードを貼り付けて、 保存して閉じる オプション。カスタム コードの埋め込みに関する詳細情報が利用可能です。

ポップアップウィジェットのコードを再現する

このフェーズでは、ポップアップウィジェットのコードスニペットを取得します。Calendlyホームページで、目的のイベントタイプにリンクされた歯車アイコンをクリックします。 ウェブサイトに追加 ドロップダウンメニューで ポップアップウィジェット。 選択する 続く をクリックして コードをコピー ボタン。

ポップアップウィジェットを表示したいページ設定にコピーしたコードを配置します。 デザイナーページ設定にアクセスし、コードを入力して タグの前 セクションで設定を保存し、プロジェクトを公開します。

左側のステップ 1 では、[Web サイトに追加] タブでウィジェット ポップアップ ボタンを選択します。右側のステップ 2 では、[コードのコピー] ボタンをクリックします。
ステップ 3: ページ設定のカスタム コード セクションのタグ入力フィールドにコードを貼り付けます。

ポップアップコンテンツ

この段階では、コードスニペットを取得することが含まれます。 ポップアップテキストCalendlyホームページで、希望するイベントタイプに関連する歯車アイコンを選択します。 ウェブサイトに追加 ドロップダウンメニューで ポップアップテキスト オプション。クリック 続く 続いて コードをコピー ボタン。

左側のステップ 1 で、[Web サイトに追加] タブの下にある [テキスト ポップアップ] を選択します。右側のステップ 2 で、右下にある [コードのコピー] ボタンをクリックします。これら 2 つのボタンが強調表示されます。

Webflowプロジェクトに戻ります。左側のツールバーを使用して、追加記号をクリックします。 コンポーネントドラッグして 埋め込み 要素をデザインに取り入れる カレンドリー リンクの配置。コードを貼り付けて続行し、 保存して閉じる.

左側のステップ 1 では、追加パネルのコンポーネント セクションから埋め込み要素を選択し、右側のステップ 2 では、HTML 埋め込みコード エディター内にコードを貼り付けて、[保存] をクリックします。

注記: HTML 埋め込みの親要素 (親要素として任意の div ブロック、セクション、またはコンテナーを使用できます) に適用されたテキスト スタイルの変更は、HTML 埋め込みのテキスト スタイルに反映されます。

ユアン・マック