エレメントビルダーv2をフレックスエディタという名称に変更しました。 メイン機能に大きな変更はありません。
アクションのカスタマイズに関してはサポート対象外となります。 詳細は「アクションのカスタマイズ方法のご案内と配信にかかわるトラブルシューティング」をご確認ください。 また、ご利用の際は必ず検証環境などで動作確認をお願いいたします。
本ドキュメントでは、フレックスエディタの「共通コード設定」を使用して、JavaScriptで動作を制御する際のサンプルコードを示します。
JavaScriptでの制御
設定手順
- 左側のサイドバーの「共通コード設定」をクリックする
- 「スクリプト（.ts）」タブを選択する
- エディタ内に、TypeScript または JavaScriptのコードを記述する
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();
})
};onShow
接客の表示時に任意の処理を実行することが可能です。
接客内の全ての要素のレンダリングが完了したタイミングで実行されます。
import { showAction, onShow } from '@plaidev/karte-action-sdk';
export default ({ send, data }) => {
showAction();
onShow(() => {
console.log('接客が表示されました');
});
};onClose
接客の非表示に任意の処理を実行することが可能です。
import { showAction, onClose } from '@plaidev/karte-action-sdk';
export default ({ send, data }) => {
showAction();
onClose(() => {
console.log('接客が閉じられました');
});
};onChangeState
接客のステート変更時に任意の処理を実行することが可能です。
import { showAction, onChangeState } from '@plaidev/karte-action-sdk';
export default ({ send, data }) => {
showAction();
onChangeState((props, newState) => {
console.log('ステートが「' + newState + '」に変更されました。');
});
};setEventHandlers
フレックスエディタ内で 「クリック時の動作」 として設定可能なカスタムのイベントハンドラーを登録します。setEventHandlers で登録したハンドラー名を「クリック時の動作」 > 「イベントハンドラー」 を選択すると表示される 「ハンドラー名」 に設定することでクリック時の動作として実行可能になります。
import {
showAction,
closeAction,
setEventHandlers
} from '@plaidev/karte-action-sdk';
export default ({ send, data }) => {
showAction();
// ハンドラーに設定する関数を用意
const onClickCustomClose = () => {
// 任意の処理を記載
closeAction();
}
// ハンドラーを登録（key:ハンドラー名, value:ハンドラーの関数）
setEventHandlers({
onClickCustomClose: onClickCustomClose
})
};
コードの記載後にボタンやリンクなどの「クリック時の動作設定」から「イベントハンドラー」を選択しハンドラー名に「onClickCustomClose」を指定することで、動作設定が完了します
getActionRoot
表示した接客内の要素を取得・操作するには getActionRoot でアクションのルート要素を取得し、これを経由して取得や操作を行います。
- フレックスエディタにおける接客のルート要素は
shadowRootとなっており、Javascriptによるdocument.querySelector('xxx')などの要素の取得では取得不可能です。 showActionの実行後にアクション内の要素がレンダリングされるまでにはタイムラグが生じるため、showActionの実行直後にはアクション内の要素は存在しないためご注意ください。
例）アクション内の特定要素（#action-button）を取得する
import { showAction, onShow, getActionRoot, setEventHandlers } from '@plaidev/karte-action-sdk'
export default ({ send, data }) => {
const actionRoot = getActionRoot();
showAction()
// NG: アクション内の要素はshadowRootという通常のjavascriptで干渉されない箇所にレンダリングされているため取得不可能
document.querySelector('#action-button')
// NG: まだアクション内の要素はレンダリングされていないため取得不可能
actionRoot.querySelector('#action-button')
// OK: onShowでアクションが表示されたタイミングで要素を取得
onShow(() => {
const actionButton = actionRoot.querySelector('#action-button')
})
// OK: クリック発生などのイベントハンドラ内で要素を取得
const onClickTrigger = () => {
const actionButton = actionRoot.querySelector('#action-button')
}
setEventHandlers({
onClickTrigger: onClickTrigger
})
};send
KARTEのイベントを発生させます。第一引数にイベント名、第二引数に任意のパラメータを指定することが可能です。
例）初期化時にカスタムイベントを発生させる
import { showAction } from '@plaidev/karte-action-sdk'
export default ({ send, data }) => {
showAction();
send('my-event', {
param1: 'xxxx'
});
};data
ユーザー情報変数やカスタム変数、その他プリセットで初期登録されている変数は data から取得可能です。
例）ユーザー情報変数からusernameとして設定した変数の取得
import { showAction } from '@plaidev/karte-action-sdk'
export default ({ send, data }) => {
showAction();
// ユーザー情報変数からユーザー名を username として変数設定している場合の取得例
console.log(data.username)
};