<!doctype html> <html lang="en"> <head> <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script> <script> window.addEventListener('load', () => { console.log('On load'); WA.onInit().then(() => { console.log('After WA init'); const textField = document.getElementById('textField'); textField.value = WA.state.textField; textField.addEventListener('change', function (evt) { console.log('saving variable') WA.state.textField = this.value; }); WA.state.onVariableChange('textField').subscribe((value) => { console.log('variable changed received') textField.value = value; }); document.getElementById('btn').addEventListener('click', () => { console.log(WA.state.loadVariable('textField')); document.getElementById('placeholder').innerText = WA.state.loadVariable('textField'); }); document.getElementById('setUndefined').addEventListener('click', () => { WA.state.textField = undefined; document.getElementById('textField').value = ''; }); }); }) </script> </head> <body> <input type="text" id="textField" /> <button id="setUndefined">Delete variable</button> <button id="btn">Display textField variable value</button> <div id="placeholder"></div> </body> </html>