ご注意ください

エレメントビルダーv2をフレックスエディタという名称に変更しました。 メイン機能に大きな変更はありません。

ご注意ください

フレックスエディタのご利用には、KARTE β機能トライアル利用規約への同意と、プラグインの解放が必要です。プラグインが開放されていないと一覧に表示されませんのでご注意ください。 利用を希望される場合は、担当のカスタマーサクセスもしくはチャットサポートにご連絡ください。 また、β機能のため予告なく仕様変更になる場合がございますことご了承ください。

ご注意ください

アクションのカスタマイズに関してはサポート対象外となります。 詳細は「アクションのカスタマイズ方法のご案内と配信にかかわるトラブルシューティング」をご確認ください。 また、ご利用の際は必ず検証環境などで動作確認をお願いいたします。

本ドキュメントでは、フレックスエディタの「共通コード設定」を使用して、接客アクション全体にカスタムCSSを適用したり、JavaScriptで動作を制御したりする方法を説明します。
「複数のエレメントに共通のスタイルを一括で適用したい」、「JavaScriptでより高度な表示制御を行いたい」場合にご利用ください。

CSSでのカスタマイズ

事前準備

CSSで特定の要素にスタイルを適用するため、対象のエレメントやレイアウトにIDまたはclass属性を付与します。

  1. CSSで指定したいエレメントやレイアウトを選択する
  2. プロパティエディタ内の「属性カスタマイズ」より「ID属性」または「class属性」を設定する
    ※詳細は、「共通コード設定とユーザー情報変数」をご確認ください。

設定手順

  1. 左側のサイドバーの「共通コード設定」をクリックする
  2. 「スタイル（.CSS）」タブを選択する
  3. エディタ内に、対象のIDやクラスを指定する形でCSSを記述する

補足

個別のエレメントやレイアウトのプロパティエディタ内にある「CSSカスタマイズ」と、この「共通コード設定」の両方にスタイルを記述した場合は、一般的なCSSセレクタの優先度にてブラウザが判定し、最終的なスタイルが決定されます。どちらが優先されているか検証環境などでご確認ください。

JavaScriptでの制御

設定手順

  1. 左側のサイドバーの「共通コード設定」をクリックする
  2. 「スクリプト（.ts）」タブを選択する
  3. エディタ内に、TypeScript または JavaScriptのコードを記述する

補足

フレックスエディタでは、エレメントのクリック時に特定の動作を指定する「イベントハンドラー」を設定することも可能です。