アクションのカスタマイズに関してはサポート対象外となります。 詳細は「アクションのカスタマイズ方法のご案内と配信にかかわるトラブルシューティング」をご確認ください。 また、ご利用の際は必ず検証環境などで動作確認をお願いいたします。
本ドキュメントでは、フレックスエディタの「共通コード設定」を使用して、接客アクション全体にカスタムCSSを適用したり、JavaScriptで動作を制御したりする方法を説明します。
「複数のエレメントに共通のスタイルを一括で適用したい」、「JavaScriptでより高度な表示制御を行いたい」場合にご利用ください。
CSSでのカスタマイズ
事前準備
CSSで特定の要素にスタイルを適用するため、対象のエレメントやレイアウトにIDまたはclass属性を付与します。
CSSで指定したいエレメントやレイアウトを選択する
プロパティエディタ内の「属性カスタマイズ」より「ID属性」または「class属性」を設定する
※詳細は、「共通コード設定とユーザー情報変数」をご確認ください。
設定手順
左側のサイドバーの「共通コード設定」をクリックする
「スタイル（.CSS）」タブを選択する
エディタ内に、対象のIDやクラスを指定する形でCSSを記述する
補足
個別のエレメントやレイアウトのプロパティエディタ内にある「CSSカスタマイズ」と、この「共通コード設定」の両方にスタイルを記述した場合は、一般的なCSSセレクタの優先度にてブラウザが判定し、最終的なスタイルが決定されます。どちらが優先されているか検証環境などでご確認ください。
JavaScriptでの制御
設定手順
左側のサイドバーの「共通コード設定」をクリックする
「スクリプト（.ts）」タブを選択する
エディタ内に、TypeScript または JavaScriptのコードを記述する
※参考：フレックスエディタのコード設定によるJavaScriptのサンプルコード
補足
フレックスエディタでは、エレメントのクリック時に特定の動作を指定する「イベントハンドラー」を設定することも可能です。
エラー表示について
記載コードに構文エラーがある場合は以下が表示されます。
エラーの原因となっているコード箇所に、赤い波線の下線
エラー箇所の近くに「構文エラーがあり保存できません」というメッセージ
構文エラーがある状態の場合は、エラー表示される前の状態がプレビューや保存に適用されます。