The Custom HTML block puts your own HTML on the page as you write it. Use it for an embed code from another service, such as a booking widget, a map, a podcast player or an ad tag.
You can add it to a Section or a Post Content section, and inside a Collection, a Group, a No Results block or a Paywall. In the block picker it sits under Content. To add a script to every page, such as analytics, use Add analytics and other scripts instead.
General
Setting
What it does
HTML
The code the block puts on the page, up to 10,000 characters. Past that, the field shows "Too long" with the count and saves nothing more. It can hold <script>, <style> and <iframe> tags. Select the block on the canvas to see the field in the right sidebar.
The HTML field can also hold Ghost's own data and helpers, such as {{@site.title}} or {{@site.url}}, which Ghost fills in on your site. Fantasma checks the code as you type and lists what it finds under the field:
An error stops the change from being saved: a broken {{ }} expression, a helper Ghost doesn't know, or a partial. Ghost would refuse the whole theme because of it. The block keeps its last valid code, and the field says "The last valid version stays on the page until this is fixed."
A warning saves the change and tells you what to check, such as a tag that is opened and never closed, or a name Ghost will show as nothing.
How it looks in Fantasma
On the canvas of the Fantasma editor, the block shows your HTML in a frame of its own, with Ghost data filled in from the preview data. Scripts run there, so a widget appears as it will on your site. The frame does not load your theme's fonts and styles, so text inside it can look plainer than on your site. An empty block shows a Custom HTML placeholder.
On your site, the HTML sits in the page itself and takes your theme's styles.
A Custom HTML block has the Display settings of every block, and CSS classes and Custom CSS from Advanced settings. It has no HTML anchor. To link to a part of your code, give an element inside it an id, such as id="booking".
The Custom HTML block puts your own HTML on the page as you write it. Use it for an embed code from another service, such as a booking widget, a map, a podcast player or an ad tag.
You can add it to a Section or a Post Content section, and inside a Collection, a Group, a No Results block or a Paywall. In the block picker it sits under Content. To add a script to every page, such as analytics, use Add analytics and other scripts instead.
General
<script>,<style>and<iframe>tags. Select the block on the canvas to see the field in the right sidebar.The HTML field can also hold Ghost's own data and helpers, such as
{{@site.title}}or{{@site.url}}, which Ghost fills in on your site. Fantasma checks the code as you type and lists what it finds under the field:{{ }}expression, a helper Ghost doesn't know, or a partial. Ghost would refuse the whole theme because of it. The block keeps its last valid code, and the field says "The last valid version stays on the page until this is fixed."How it looks in Fantasma
On the canvas of the Fantasma editor, the block shows your HTML in a frame of its own, with Ghost data filled in from the preview data. Scripts run there, so a widget appears as it will on your site. The frame does not load your theme's fonts and styles, so text inside it can look plainer than on your site. An empty block shows a Custom HTML placeholder.
On your site, the HTML sits in the page itself and takes your theme's styles.
A Custom HTML block has the Display settings of every block, and CSS classes and Custom CSS from Advanced settings. It has no HTML anchor. To link to a part of your code, give an element inside it an
id, such asid="booking".