How can I capture user input from a field in a Rich Media message and send it as an event or tag?

When you need to capture user input (like an email address or feedback) and trigger an action with a custom button, the standard 'Form' element may not be suitable. The recommended approach is to use the Custom HTML element in the Rich Media editor.

The Pushwoosh SDK injects a global pushwoosh object into the in-app page, which exposes postEvent, sendTags, getTags, closeInApp and getCustomData.

General steps

1. In the Rich Media editor, add a Custom HTML element.
2. Write the HTML for your input field and button, giving each a unique id.
3. Add a <script> block with your logic.
4. Read the elements with document.getElementById().
5. On click, read the input value and call the appropriate pushwoosh method.

Option 1: send the input as a custom event

The event is created automatically the first time it is triggered.

<input type="text" placeholder="Enter your email" id="emailField">
<div class="buttons">
  <a class="ok-button" id="submitBtn" href="#">Submit</a>
</div>

<script type="text/javascript">
  var submitButton = document.getElementById('submitBtn');
  var inputField = document.getElementById('emailField');

  submitButton.onclick = function(event) {
    event.preventDefault();

    if (window.pushwoosh && window.pushwoosh.postEvent) {
      window.pushwoosh.postEvent(
        'UserSubmittedEmail',
        { email: inputField.value },
        function () { window.pushwoosh.closeInApp(); },
        function (error) { console.log('Post event failed: ', error); }
      );
    }
  };
</script>

Option 2: save the input as a user tag

Important: create the tag (for example YourTagName) with the right type in the Pushwoosh Control Panel before using this code.

<input type="text" placeholder="Enter value" id="tagField">
<div class="buttons">
  <a class="ok-button" id="confirmBtn" href="#">Confirm</a>
</div>

<script type="text/javascript">
  var confirmButton = document.getElementById('confirmBtn');
  var inputField = document.getElementById('tagField');

  confirmButton.onclick = function(event) {
    event.preventDefault();

    if (window.pushwoosh && window.pushwoosh.sendTags) {
      window.pushwoosh.sendTags({ YourTagName: inputField.value });
    }

    if (window.pushwoosh && window.pushwoosh.closeInApp) {
      window.pushwoosh.closeInApp();
    }
  };
</script>

Closing the in-app

Call pushwoosh.closeInApp(); from JavaScript, or simply use the custom scheme URL on a button or link: <a href="pushwoosh://close">. The legacy pushManager object is still shipped by the SDKs for backward compatibility, but it exposes only a subset of the methods — write new templates against pushwoosh.