"Keep it secret, keep it safe" – wise words from Gandalf that carry immense significance even in today's digital world. Confidentiality is key in communication, especially when sensitive information is involved. Thankfully, we have DataMotion to the rescue. In this blog, we'll create a form that sends data securely using DataMotion's Secure Message Center APIs.

So grab your staff and wizard hat, because in just a few steps, you'll be a DataMotion wizard!

Prerequisites:

• Familiarity with HTML and JavaScript
• Knowledge of Fetch API to make HTTP requests
• A DataMotion account to get the magical keys (APIs)

Set up Your Parchment - HTML

Every wizard needs a parchment to write their spell, or in our case, a form for our users to input their messages. In your HTML file, create a simple form:

<!-- ... -->
<form id="secure-message-form">
  <div class="form-group">
    <label for="sender-email">Your Email:</label>
    <input type="email" class="form-control" id="sender-email" required>
  </div>
  <!-- ... remaining fields and the closing tags ... -->
</form>
<!-- ... -->

Thanks to Bootstrap, our form looks neat and professional!

Capture the Spell - Form Handling with JavaScript

We need to prevent the page from reloading when the form is submitted (the default action), ensuring our user's message doesn't vanish into thin air. This is where JavaScript comes in:

document.getElementById("secure-message-form").addEventListener("submit", function(event) {
  // The `event.preventDefault();` line stops the page from reloading
  event.preventDefault();

  // Get form values
  var senderEmail = document.getElementById("sender-email").value;
  var recipientEmail = document.getElementById("recipient-email").value;
  var message = document.getElementById("message").value;

  // ... the magic begins ...
});

With this, we're grabbing the form values and readying them for secure transmission.

Crafting the Message Scroll - Request Payload

In order to send the secure message, we need to put our message into a format that DataMotion's API can understand. This is what we call the payload of our request:

var payload = {
  attachments: [],
  bcc: [],
  cc: [],
  htmlBody: "",
  subject: "Secure Message",
  textBody: message,
  to: [recipientEmail],
  notificationTemplate: "",
  attributes: {
    crmCustomId: ""
  }
};

We have our payload ready, it's time to fetch our access token.

Unlocking the Gate - Fetching the Access Token

Like every magical realm, DataMotion API has a key - the access token. We need to fetch this key to send our secure message. This is how we do it:

fetch("https://api.datamotion.com/SMC/Messaging/v3/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    grant_type: "client_credentials",
    client_id: "your-client-id",
    client_secret: "your-client-secret"
  })
})
.then(function(response) {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error("Failed to retrieve DataMotion access token");
  }
})
.then(function(data) {
  var accessToken = data.access_token;

  // ... let's send our secure message ...
});

With our access token in hand, we can proceed to send our message.

Dispatching the Message Scroll - Sending the Message

The final step is to send the message using DataMotion's API. Our request contains the access token and our payload:

fetch("https://api.datamotion.com/SMC/Messaging/v3/content/messages", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + accessToken
  },
  body: JSON.stringify(payload)
})
.then(function(response) {
  if (response.ok) {
    alert("Secure message sent successfully!");
    // Reset form after successful submission
    document.getElementById("secure-message-form").reset();
  } else {
    throw new Error("Failed to send secure message");
  }
})
.catch(function(error) {
  alert("Error: " + error.message);
});

And there you have it! Your message is now securely delivered, Gandalf-style! So go ahead, put on your wizard hat, wave your staff, and send secure messages with the power of DataMotion APIs.

GitHub Repository