---
schema_version: "1"
id: 38495bb5bf657dd98e32183e801c23da550acac49781c21870eac37426d8bbe8
title: Custom Block Widget Example
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/marketing-cloud/guides/mc-app-development/example-block-widget.md
canonical_url: https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/example-block-widget.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3bb53d13a636d0f9a5526b75b8778b2347c5d07f373077014fdcc3e5e1d33f1b
products:
  - Marketing Cloud Engagement APIs and Programmatic Languages
  - Marketing Cloud
---
# Custom Block Widget Example

This example is a custom Quilljs block in a single HTML page that is served by a node app and hosted on Heroku.

https://quill-block.herokuapp.com/

<!-- Moved Gist inline (mc-doc/63e9db1867cf3785cd565534f7137848) -->

```js
var BlockSDK = require("blocksdk");
if (window.self === window.top) {
  document.body.innerText =
    "This application is for use in the Marketing Cloud Engagement Content Builder editor only.";
} else {
  var sdk = new BlockSDK();
  sdk.getContent(function (content) {
    var quill = new Quill("#editor-container", {
      theme: "snow",
    });
    quill.root.innerHTML = content;
    function saveText() {
      var html = quill.root.innerHTML;
      sdk.setContent(html);
      sdk.setSuperContent("This is super content: " + html);

      sdk.getData(function (data) {
        var numberOfEdits = data.numberOfEdits || 0;
        sdk.setData({
          numberOfEdits: numberOfEdits + 1,
        });
      });
    }
    quill.on("text-change", saveText);
  });
}
```