font-family: Lato, sans-serif;
color: rgba(0, 0, 0, 0.87);
border-bottom: 1px solid #039be5;
background-color: #039be5;
justify-content: flex-start;
<span class="title sans">Message.showToast example</span>
<form action="" id="messageForm">
<label for="messageInput" class="sans">Message:</label>
<input type="text" id="messageInput" placeholder="Enter a message" class="sans">
<label for="messageNumber" class="sans">Timeout (in seconds): </label>
<input type="number" id="messageNumber" min="1" max="1000" value="1" class="sans">
<button type="submit" id="messageSubmit" class="btn sans">Submit</button>
}).then(function(dronedeployApi) {
var messageForm = document.getElementById('messageForm');
messageForm.addEventListener('submit', function showMessage(event) {
var message = document.getElementById('messageInput').value;
var timeout = Number(document.getElementById('messageNumber').value) * 1000;
dronedeployApi.Messaging.showToast(message, {