<!doctype html>
<html>

<head>
  <meta charset="utf8">
  <title>Custom widget</title>
  <script src="/grist-plugin-api.js"></script>
  <script>
    grist.ready();
    grist.enableKeyboardShortcuts();
  </script>
  <style>
    body {
      margin: 0;
      font-size: 13px;
      color: var(--grist-theme-text, #262633);
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    }

    .title {
      font-size: 20px;
      font-weight: 600;
    }

    .title-light {
      font-size: 16px;
      font-weight: 400;
      color: var(--grist-theme-text-light, #929299);
    }

    a {
      color: var(--grist-theme-link, #16B378);
      text-decoration: none;
    }

    a:hover, a:focus {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div style="padding: 20px">
    <div>
      <span class="title">Custom widget</span>
      <span class="title-light">(not configured)</span>
    </div>
    <p>
      The Custom widget allows a user to insert almost anything in their document.
      Creating a custom widget currently requires knowledge of web development,
      and access to a public web server (for example, GitHub Pages).
    </p>
    <p>
      To configure this widget, open the right panel by clicking <i>Widget options</i> in the section menu.
    </p>
    <p>
      Learn more about Custom Widgets at:
      <a target="_blank" href="https://support.getgrist.com/widget-custom">
        https://support.getgrist.com/widget-custom
      </a>
    </p>
  </div>
</body>

</html>