Contentstack Read-Only Custom Field or Widget

<html>
  <head>
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" media="all"
      href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.css"></script>
    <script type="text/javascript"
      src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.js"></script>
  </head>
  <body>
    <div id="usermessage"></div>
    <script type="text/javascript">
ContentstackUIExtension.init().then(function(extension)
{
  extension.window.updateHeight(300); // comment this line to use this code as a widget
  extension.window.enableAutoResizing(); // comment this line to use this code as a widget
  document.getElementById("usermessage").innerHTML =
    extension.field.getData(); // value for custom field - comment this line to use this code as a widget
//    extension.entry._data["fieldname"]; // field from entry for widget - enable this line to use this code as a widget
});
    </script>
  </body>
</html>