ご注意ください

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

ご注意ください

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

本ドキュメントでは、フレックスエディタの「共通コード設定」を使用して、JavaScriptで動作を制御する際のサンプルコードを示します。

JavaScriptでの制御

設定手順

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

サンプルコード

import {
  showAction,
  closeAction,
  onShow,
  onClose,
  onChangeState
} from '@plaidev/karte-action-sdk';

export default ({ send, data }) => {
  // 接客を表示
  showAction();

  // ステート変更時のハンドリング
  onChangeState((props, newState) => {
    console.log('ステートが更新されました');
  });

  // 接客表示時のハンドリング
  onShow(() => {
    console.log('接客が表示されました');
  });

  // 接客終了時のハンドリング
  onClose(() => {
    console.log('接客が閉じられました');
  });

  // 要素クリック時の処理例
  const myElement = document.getElementById('xxxx');
  if (myElement) {
    myElement.addEventListener('click', (e) => {
      e.preventDefault();
      closeAction();

      // カスタムイベント送信の例
      send('my-event', {
        param1: 'xxxx'
      });
    });
  }
};

SDKリファレンス

@plaidev/karte-action-sdk からimportすることで利用可能なアクション制御を行うメソッドの一覧です

showAction

接客を表示します。実行されると message_open イベントが発生します。

例）即時表示

import { showAction } from '@plaidev/karte-action-sdk'

export default ({ send, data }) => {
  showAction();
};

例）特定要素がクリックされたら接客を表示する例

import { showAction } from '@plaidev/karte-action-sdk'

export default ({ send, data }) => {
  const triggerElement = document.getElementById('xxxxx')

  triggerElement.addEventListener('click', () => {
    showAction()
  })
};

closeAction

接客を非表示にします。実行されると message_close イベントが発生します。

例）特定要素がクリックされたときに接客を非表示

import { showAction, closeAction } from '@plaidev/karte-action-sdk'

export default ({ send, data }) => {
  const closeTrigger = document.getElementById('xxxxx')

  showAction()

  closeTrigger.addEventListener('click', () => {
    closeAction();
  })
};