Custom HTML and JavaScript

Custom HTML (PRO)

In the HTML/JS code tab you can add your own block that appears below the link list. Content tags are allowed: div, section, p, h1-h6, span, a, img, ul, ol, li, details, summary, button, canvas, svg and similar. Links may use only the https:, mailto: and tel: schemes, and we add rel="noopener nofollow ugc" to a.

<section class="promo">
  <h2>-20% coupon until the end of the month</h2>
  <p>Subscribe to the newsletter and get the code.</p>
  <a href="https://example.com/newsletter">Subscribe me</a>
</section>

Custom JavaScript (PRO)

The code runs in an isolated frame (sandbox="allow-scripts allow-popups"). You have access to your own page's DOM, canvas, requestAnimationFrame, timers, IntersectionObserver, Date and Math.

// Floating hearts after clicking the avatar
var av = document.querySelector('.av');
av.addEventListener('click', function (e) {
  for (var i = 0; i < 8; i++) {
    var h = document.createElement('span');
    h.textContent = '❤';
    h.style.cssText = 'position:fixed;left:' + e.clientX + 'px;top:' + e.clientY + 'px;pointer-events:none;transition:all 1s ease-out';
    document.body.appendChild(h);
    requestAnimationFrame(function (n) { return function () {
      n.style.transform = 'translate(' + (Math.random()*120-60) + 'px,-' + (60+Math.random()*80) + 'px)';
      n.style.opacity = 0;
    };}(h));
    setTimeout(function (n) { return function () { n.remove(); }; }(h), 1100);
  }
});

An error in your code breaks only your frame. The platform footer and the rest of the site keep working.

Code security

• The code runs in a frame without access to the session, the panel or other users' data.
• The CSP policy blocks network connections, external scripts and forms.
• The code is checked on save (CSS with a parser, HTML with an allowlist of elements), and CSP is the second line of defense.
• An administrator can suspend a profile that violates the terms, e.g. phishing or malicious code.

Open the panel