*Elementorとの連携

Elementorとの連携

AmeliaにはネイティブのElementorウィジェットが含まれているため、予約フォーム、イベントレイアウト、そして「お客様マイページ」と「スタッフマイページ」の両方を、Elementorのドラッグ＆ドロップインターフェースを通じて直接追加できます。

ショートコードを手動でコピーする代わりに、ページ上にウィジェットを配置し、表示したいAmeliaフォームを選択できます。また、オプションでサービスカテゴリー、サービス、スタッフ、場所、コース、またはイベントをあらかじめ選択しておくことも可能です。

例えば、「ステップバイステップ」ウィジェットをページにドラッグして、1つのカテゴリーのみを表示するように絞り込んだり、ショートコードを編集することなくイベントウィジェットをリスト表示とカレンダー表示の間で切り替えたりできます。

ElementorでAmeliaウィジェットを追加する方法

開始する前に、AmeliaとElementorの両方がインストールされ、有効化されていることを確認してください。

Elementorで任意のページを開き、ウィジェットパネルで「Amelia」を検索するか、Ameliaセクションに到達するまでスクロールします。利用可能なウィジェットには、すべての予約フォームに加えて、「お客様マイページ」と「スタッフマイページ」が含まれています。

使用したいウィジェットをページ上にドラッグすると、プレビューが自動的に読み込まれ、そのフォームのデフォルトのショートコードが表示されます。

ElementorでAmeliaウィジェットをカスタマイズする方法

ウィジェットをページにドラッグした後、左側のサイドバーに「予約パラメータの事前選択」を含むカスタマイズオプションが表示されます。

このオプションを有効にすると、フォームに表示する内容をフィルタリングできる項目が表示されます。選択したウィジェットに応じて、サービス、サービスカテゴリー、スタッフ、場所、コース、またはそれらの任意の組み合わせをあらかじめ選択できます。

これらのパラメータを調整するとすぐにウィジェットのショートコードが自動的に更新され、プレビューがリアルタイムで更新されるため、すべてが正しく表示されているかを確認できます。

Elementorでイベントウィジェットを使用する方法

「イベントカレンダー」または「イベントリスト」ウィジェットを選択した場合、IDによる単一イベントの事前選択、繰り返しイベントの表示の有効化、またはタグによるイベントの絞り込みも可能です。これらのオプションはElementor以外で使用されるショートコードのロジックと一致していますが、インターフェースによって、公開前に結果を設定およびプレビューするのがより簡単になります。

Elementorのトリガーを使用して予約フォームを手動で読み込む方法

訪問者が特定の要素をクリックした後にのみフォームを表示できる、手動読み込みオプションを含めることができます。トリガーのIDまたはクラス（例：Elementorで作成されたボタン）を入力し、フォームをページに埋め込むのではなくモーダルウィンドウ内に表示したい場合は、「Ameliaポップアップで表示」を有効にします。これは、リクエストがあった場合にのみ予約フォームを開きたいランディングページやレイアウトに便利です。

ElementorでAmeliaを使用する際に留意すべき点

• ウィジェットのプレビューに通知が表示される場合があるため、サービス、スタッフ、およびイベントが存在し、正しく割り当てられていることを確認してください。
• 特定のページでお客様に見せる内容を制限したい場合は、予約パラメータの事前選択を使用してください。
• フィルタを調整した後、期待通りのフォームが正しく読み込まれるかウィジェットのプレビューを確認してください。
• 予約フォームを直接表示するのではなくポップアップで開きたい場合は、手動トリガーを使用してください。
• 設定後、変更をお客様画面に反映させるために、Elementorの「公開」または「更新」ボタンをクリックしてください。
• 公開直後にフォームが更新されない場合は、Webサイトのキャッシュをクリアしてください。