WebflowウェブサイトにEventbriteの注文処理を挿入する

重要： このガイドでは、Webflow の統合機能を利用してカスタム コードを挿入します。統合機能は、有料のサイト プランと、Core、Growth、Agency、Freelancer Workspace プランで利用できます。 

このチュートリアルでは、次のことを学びます。 

1. Eventbriteから統合コードを取得する方法
2. Webflow ウェブサイトにインタラクティブな Eventbrite 注文処理を統合する方法

Eventbriteから統合コードを取得する

始める前に: まだ完了していない場合は、 Eventbriteイベントを開催するまた、イベント ID を保存および調整できるコレクションを Webflow CMS で生成するようにしてください。

Eventbrite からイベント ID と統合コードを取得するには: 

1. 訪問する イベント 
2. 注文処理ウィジェットを埋め込むイベントを選択します
3. に移動 マーケティング メニュー > 組み込み注文処理
4. 選択してください 注文処理の外観 ウェブサイトに好むもの（例：ページ上にモーダルウィンドウを表示するボタン、またはページ上のコンテンツ内に統合されたボタン）
5. クリック コードをコピー 統合コードをコピーする

Webflow ウェブサイトにインタラクティブな Eventbrite 注文処理を統合する

Eventbrite から統合コードを取得して、Web サイトの任意の統合要素に貼り付けることもできますが、埋め込まれた注文処理は静的 (つまり、変更されない) のままであるため、異なるイベントの注文処理を埋め込むたびに、統合コードを手動で更新する必要があります。この方法は、単一のイベントの Eventbrite 注文処理のみを埋め込む場合は適していますが、複数のイベントを処理する場合は適していません。

ここでは、インタラクティブな Eventbrite 注文処理をサイトに統合する方法を学びます。Webflow CMS と動的統合を利用することで、CMS コレクション内のすべてのイベントに対して繰り返される注文処理レイアウトを設計できます。 

これは 3 つのステップに分かれます。 

1. イベントIDのコレクションフィールドを確立する 
2. 動的統合を設定する 
3. CMSのイベントにイベントIDを追加します

重要： CMS コレクション (「イベント」、「ミートアップ」など) を設定し、イベント用に少なくとも 1 つのイベント コレクション アイテムを作成していることを確認します。CMS には、コレクションの構成をガイドするイベント テンプレートも用意されています。

イベントIDのコレクションフィールドを確立する 

最初に、Eventbrite イベント ID (つまり、Eventbrite 統合の固有の識別子) を保存するための CMS コレクション フィールドを確立する必要があります。 

1. 開く CMSパネル
2. イベントコレクションにマウスを移動し、設定「歯車”アイコンが表示されます 
3. 選択する 新しいフィールドを追加
4. 選ぶ プレーンテキスト
5. フィールドにラベルを割り当てます（例：「Eventbrite イベント ID」） 
6. クリック フィールドを保存

動的統合を設定する

動的統合は動的コンテンツでのみ機能するため、コレクション ページまたは静的ページのコレクション リスト内にのみ添付できます。イベント コレクションを参照しているため、イベント コレクションに関連付けられたコレクション ページに統合をリンクするか、コレクション リストをイベント コレクションに接続する必要があります。 

動的統合を設定するには:

1. 進む パネルを追加 > 高度な
2. 挿入 統合 キャンバスに要素を追加する
3. コードエディターにEventbrite統合コードを貼り付けます
4. 見つける イベントID 統合コードで、一重引用符で囲まれたID番号を選択します（例：681294671627） 
5. ID番号をコピーしてハイライトしたままにします
6. タップする フィールドを追加
7. イベントID用に作成したコレクションフィールドを選択します（例：「EventbriteイベントID」）
8. 選択する 保存して閉じる 

‍

CMSのイベントにイベントIDを追加します 

最後に、イベント ID をイベントに組み込みます。 

1. アクセス CMSパネル > イベントコレクション (またはコレクションに選択した名前) 
2. イベントコレクションアイテムを選択してください 
3. 統合コードのID番号（例：681294671627）を、イベントID（例：EventbriteイベントID）に指定したコレクションフィールドに貼り付けます。
4. クリック 保存

インタラクティブな注文処理を組み込むイベントの場合は、次の手順に従います。Eventbrite 統合コードから ID をコピーし、各コレクション項目のイベント ID コレクション フィールドに追加します。 

準備が完了したら、Web サイトを公開して、新しく統合された Eventbrite 注文処理の動作を体験してください。 

専門家のヒント: コレクション ページおよびコレクション リスト内で条件付きの表示を適用して、イベント ID がないイベントの統合注文処理を非表示にすることができます。 

重要： Eventbrite の注文処理はデザイナー キャンバスには表示されません。つまり、デザイナーで処理をプレビューすることはできず、代わりにプレースホルダーが表示されます。Web サイトを公開またはエクスポートすると、配置した場所に処理が表示されます (つまり、表示されます)。カスタム ドメインで Web サイトを起動する前に処理をプレビューする必要がある場合は、サイトを webflow.io ステージング サブドメインに公開できます。