F1 Touchpoint のイベント一覧と活用方法

イベント一覧と発生タイミング

以下のイベントは、document.addEventListener() を使用して監視・拡張が可能です。

1. mindtouch-web-widget:f1:ready

概要： F1 ウィジェットが生成されたときにトリガーされるイベント
データ：

js

コピーする編集する

document.addEventListener('mindtouch-web-widget:f1:ready', ({ data }) => { const embedId = data.embedId; });

2. mindtouch-web-widget:f1:loaded

概要： ウィジェットが読み込まれたときにトリガーされるイベント
データ：

js

コピーする編集する

document.addEventListener('mindtouch-web-widget:f1:loaded', ({ data }) => { const embedId = data.embedId; const widget = data.widget; // 任意の URL を開く widget.open('https://success.example.com/foo'); });

3. mindtouch-web-widget:f1:modal-rendered

概要： モーダルラッパーが描画されたときにトリガーされるイベント
データ：

js

コピーする編集する

document.addEventListener('mindtouch-web-widget:f1:modal-rendered', ({ data }) => { const embedId = data.embedId; const modal = data.modal; });

4. mindtouch-web-widget:f1:dialog-rendered

概要： ユーザーに対してダイアログが表示されたときにトリガーされるイベント
データ：

js

コピーする編集する

document.addEventListener('mindtouch-web-widget:f1:dialog-rendered', ({ data }) => { const embedId = data.embedId; const dialog = data.modal; // 説明上は dialog だが、コード例は modal になっているため注意 });

5. mindtouch-web-widget:f1:clicked

概要： ダイアログを起動する要素がクリックされたときにトリガーされるイベント
備考： event.preventDefault() を呼び出すと、ダイアログの起動はキャンセルされます
データ：

js

コピーする編集する

document.addEventListener('mindtouch-web-widget:f1:clicked', (event) => { const embedId = event.data.embedId; const href = event.data.href; // ダイアログの起動をキャンセル event.preventDefault(); });

プロパティ仕様まとめ

実装補足

• widget.open() は mindtouch-web-widget:f1:loaded イベントで取得できる widget オブジェクトに含まれる関数です。

• 任意のタイミングで任意のページを開きたいとき、JavaScript から直接 widget.open() を呼び出すことで制御可能です。

• 各イベントを活用することで、ユーザーアクションや表示のタイミングに応じた高度な連携が可能になります。