Action SDKの仕様について

Action SDKとは

Action SDKは、スクリプトで利用され、アクションのカスタマイズを容易にするためのユーティリティを提供します。

Action SDKのユーティリティを利用するために、スクリプトでimport文を使用します:

提供されるユーティリティは以下となります:

名前	説明	ユースケース
getState()	現在のステートIDを取得。アクションが表示されて設定されるため、onShowフック関数で利用。	現在のステートを取得
setState(stateId)	現在のステートIDを設定。ステートIDは、ビジュアルエディタのステート一覧にホバーすると確認できる。	- 表示するステートを指定。
getStates()	ステートID一覧を取得。アクションが表示されて設定されるため、onShowフック関数で利用。	- ステートのランダム表示
isOpened()	アクションの表示・非表示の状態を取得	- アクションの表示・非表示の確認
getVariables()	変数の一覧を取得
setVariables(variables)	変数の初期値を設定。設定した変数は、ビジュアルエディタのテキストフォームなどで利用。	- 現在の時刻を表示 - カウントダウン・アップを表示
getEventHandlers()	イベントハンドラーの一覧を取得
setEventHandlers(eventHandlers)	イベントハンドラーの登録。登録したハンドラーは、ビジュアルエディタでアクション本体とのテキストボタンのクリック時の動作で利用。	- Slackへ通知するハンドラを設定
getSystem()	KARTEの設定を取得。取得できる設定は、APIキー、接客ID、アクションショートID。	- 動的にカスタマイズしたいアクションの特定
destroyAction()	アクションの破棄	- 特定のDOM要素がある時だけ、アクションを実行
showAction()	アクションを表示	- 時間やスクロールでフックしてアクションを表示
closeAction(trigger=’none’)	アクションを閉じる。第一引数に閉じた時のトリガーが指定。デフォルトは`none`。	- 時間やスクロールでフックしてアクションを閉じる
onTime(millisec, fn)	時間でフックしてスクリプトを実行	- 時間フックのアクションの表示・非表示
onScroll(rate, fn)	スクロール率でフックしてスクリプトを実行	- スクロールフックのアクションの表示・非表示
loadGlobalScript(src)	ESM対応していないJavaScriptをページに読み込む	- 古い外部スクリプトの使用
loadGlobalStyle(href)	Styleファイルをページに読み込む	- ページのデザインをカスタマイズする外部ファイルのCSSの読み込み
loadStyle(href)	Styleファイルをアクションへ読み込む	- アクションのデザインをカスタマイズする外部ファイルのCSSの読み込み
applyGlobalCss(css)	グローバルCSSをページに適用	- ページのデザインをカスタマイズするCSSの適用
applyCss(css)	CSSをアクションへ適用	- アクションのデザインをカスタマイズするCSSの適用
getActionRoot()	アクションのルートのDOM要素を取得	- アクションのDOM要素のアクセスに利用
widget	旧エディタのWidget API互換インターフェース

詳細な情報は以下のドキュメントを参照してください:

KARTE Action SDK API リファレンス

具体的な利用方法

ステートとアクションのIDの取得

import { showAction, getSystem, getState } from '@plaidev/karte-action-sdk';

export default () => {
  showAction();

  // 旧Widget APIのwidget.getState
  const stateId = getState();
  const { shortenId } = getSystem();
  console.log('State ID' , stateId);
  console.log('Action ID' , shortenId);
};

ステートの移動

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

export default () => {
  showAction();

  const stateId = '/'
  // 旧Widget APIのwidget.setState
  setState(stateId);  // ステートIDはビジュアルエディタでステート名のツールチップで確認できる
};

アクションの表示・非表示

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

export default () => {
  // 30秒後にアクションを閉じる
  // 旧Widget APIのwidget.hide
  onTime(30 * 1000, closeAction);
  
  // 50%スクロールでアクションを表示
  // 旧Widget APIのwidget.show
  onScroll(0.5, showAction);
};

export default onCreate;

Updated 5 months ago

What’s Next

アクションフック関数とアクションの状態