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.

This allows you to create your own input fields and buttons, and use JavaScript to read the input value and send it to Pushwoosh as either a custom event or a user tag.

General Steps:

1. In the Rich Media editor, add a Custom HTML element.
2. Write the HTML for your input field and button. Assign unique id attributes to them so you can reference them in your script.
3. Add a <script> block to handle the logic.
4. In the script, get the input and button elements using document.getElementById().
5. Attach an onclick event handler to the button to capture the input's value and call the appropriate Pushwoosh SDK function.

Below are two common examples.

Option 1: Send the Input as a Custom Event

This method sends the captured data as an attribute of a custom event. The event will be created automatically the first time it is triggered.

<!-- 1. HTML for the input field and button -->
<input type="text" placeholder="Enter your email" id="emailField">
<div class="buttons">
  <a class="ok-button" id="submitBtn" href="#">Submit</a>
</div>

<!-- 2. JavaScript to send the event -->
<script type="text/javascript">
  var submitButton = document.getElementById('submitBtn');
  var inputField = document.getElementById('emailField');

  submitButton.onclick = function(event) {
    // Prevents the link from navigating
    event.preventDefault();

    // Check if the Pushwoosh postEvent function is available
    if (window.pushwoosh && window.pushwoosh.postEvent) {
      // Send event 'UserSubmittedEmail' with the input value
      window.pushwoosh.postEvent('UserSubmittedEmail', { email: inputField.value });
    }

    // Optionally, close the In-App message after submission
    if (window.pushManager && window.pushManager.closeInApp) {
      window.pushManager.closeInApp();
    }
  };
</script>

Option 2: Save the Input as a User Tag

This method saves the captured data directly to a user's profile as a tag.

Important: You must pre-create the tag (e.g., YourTagName) in your Pushwoosh Control Panel and set its type (e.g., String) before using this code.

<!-- 1. HTML for the input field and button -->
<input type="text" placeholder="Enter value" id="tagField">
<div class="buttons">
  <a class="ok-button" id="confirmBtn" href="#">Confirm</a>
</div>

<!-- 2. JavaScript to set the user tag -->
<script type="text/javascript">
  var confirmButton = document.getElementById('confirmBtn');
  var inputField = document.getElementById('tagField');

  confirmButton.onclick = function(event) {
    // Prevents the link from navigating
    event.preventDefault();

    // Check if the Pushwoosh sendTags function is available
    if (window.pushwoosh && window.pushwoosh.sendTags) {
      // Set the tag 'YourTagName' with the input value
      // Replace 'YourTagName' with the actual name of your pre-created tag.
      window.pushwoosh.sendTags({ YourTagName: inputField.value });
    }

    // Optionally, close the In-App message after submission
    if (window.pushManager && window.pushManager.closeInApp) {
      window.pushManager.closeInApp();
    }
  };
</script>