Lightning Out を使用した Web サイトへの [受信 新規ゲスト予定] フローの追加
未認証のユーザーに [受信 新規ゲスト予定] フローへのアクセス権を付与する会社の Web サイト (外部 Web サイト) に Lightning Out 連動関係アプリケーションを追加します。
必要なエディション
| 使用可能なインターフェース: Lightning Experience。 |
| 使用可能なエディション: Enterprise Edition および Unlimited Edition |
ゲストユーザーに必要なユーザー権限とオブジェクト権限が付与されていることを確認します。詳細は、「ゲストユーザーへの必要なユーザー権限およびオブジェクト権限の付与」および「予定をスケジュールするゲストユーザーの共有ルールの作成」を参照してください。
メモ Scheduler フローが外部 Web サイトでホストされている場合、フローでは、ゲストユーザープロファイルで設定されている言語ではなくブラウザーで設定されている言語を使用します。
- [受信 新規ゲスト予定] 標準フローテンプレートのコピーを作成します。
-
UI 要素が正確に配置されるように、次の
<style>タグを Web ページに追加します。<style> .slds-visual-picker_vertical .slds-visual-picker__figure { height: inherit !important; } .runtime_appointmentbookingFlowLocation .slds-visual-picker_vertical { display: inline-flex !important; } </style> -
JavaScript Lightning Out ライブラリへの参照を追加するには、
scriptタグを使用します。-
Lightning Out JavaScript ファイルを Web ページに追加します。
<script src="https://YourSiteDomain/lightning/lightning.out.js"></script> -
https://YourSiteDomain/を Experience Cloud サイト URL に置き換えます。
警告scriptタグに SiteURL を追加すると、フローは機能しません。
-
Lightning Out JavaScript ファイルを Web ページに追加します。
-
Web ページで LightningOutGuest アプリケーションを読み込んで有効化するには、次の手順を実行します。
-
標準の Lightning Out JavaScript コードを追加します。
<script> $Lightning.use("runtime_appointmentbooking:lightningOutGuest", function() { // Callback once framework and app load $Lightning.createComponent( "lightning:flow", // top-level component of your app { }, // attributes to set on the component when created "lexcontainer", // the DOM location to insert the component function(component) { // API name of the Flow component.startFlow("Salesforce_Scheduler_Unauthenticated"); } ); }, 'https://YourSiteDomain/SiteURL/' // Site endpoint ); </script> -
lexcontainerを、Lightning コンポーネントを挿入するページの場所に置き換えて、別のタグから Lightning コンポーネントを呼び出します。Lightning コンポーネントを呼び出すサンプルコードを次に示します。
<div id="lexcontainer"> <p>Invoke the Lightning Component specified in the Script.</p> </div> -
https://YourSiteDomain/SiteURLを、必要なオブジェクト権限が付与された [受信 新規ゲスト予定] フローが含まれる Experience Cloud サイトの URL に置き換えます。
-
標準の Lightning Out JavaScript コードを追加します。
-
外部サイトのオリジン URL を CORS に追加するには、次の手順を実行します。
- [設定] で、[クイック検索] ボックスに「CORS」と入力して、[CORS] を選択します。
- [新規] をクリックします。
- [オリジンの URL パターン] 項目に外部サイトのオリジン URL を入力します。
- 変更内容を保存します。
メモ Scheduler フローが外部 Web サイトでホストされている場合、リソースカードにはサービスリソースの写真ではなく標準画像が表示されます。
この記事で問題は解決されましたか?
ご意見をお待ちしております。
