cleanUrl: /en/guides/head-html-code-block
<head> <style>.cta{position: fixed; bottom: 16px; left: 0; right: 0; margin: 0 auto; display: flex; align-self: center; align-items: center; justify-content: center; width: 88%; max-width: 708px; height: 48px; background-color: powderblue; color: #0d0d0d; z-index: 999999999; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; transition: 300ms; -webkit-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); -moz-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); font-family: 'inter', sans-serif;cursor: pointer;}.cta:hover{filter: brightness(88%);}</style><script>function handleClick(){window.alert("Hi!");}</script></head><body> <div class="cta" onclick='handleClick()'>I'm button!</div></body>
HTML edition works for all the pages of your website. But sometimes, you want to embed your code on a specific page, not all pages. After reading this guide, you can embed custom HTML code page by page.
HTML code block means a code block with language type of HTML like below.
<head></head>
<body></body>
If you put the HTML code block at the very top of the page(just below the page title, without spaces). We treat the head HTML code block as a special block and applies that code to the page.
We do these,
In short, you can write any HTML code block and put it on the top of the page you want, then it will be applied.
Check out this video for more detail 👇
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d8f697ab-3844-4f34-b42f-9e94c9e9ade4/__2021-02-23__10.33.58.mov
This page also contains head HTML code block. At the bottom of the page, you can find out a custom button. This button is described in head HTML code block like below.