Potion supports commands and settings that are useful to control your site without leaving Notion. These commands are either page properties, callout blocks or toggle blocks.

Page Properties

If you created your site from a Notion Wiki rather than a standard Notion Page, Potion will automatically add some properties to those pages.

These properties offer a convenient way to control settings for the web page Potion creates from your Notion page within leaving the Notion app.

Commands inside page content

You can insert commands directly in your page content and Potion will interpret them as instructions rather than content to render.

These commands are created as a Notion block that starts with a potion: command. The block used to create a command is indicated under each command below.

potion:status:[STATUS]

The home page of a Notion Wiki isn’t listed in the pages of the wiki. This means you can’t use the normal page properties to pause sync while changes are made to it since it doesn’t have these page properties. This command allows pausing and resuming sync of changes made to your wiki home page.

Before making changes, create a callout block whose content is potion:status:pause as shown in the example below. To enable sync again, you can either delete that callout block or change the value from potion:status:pause value to potion:status:live.

Since the wiki home page is also your site’s home page, it can’t be set as draft or archived. The only possible status values are live and pause and any other value will have no effect and your page will be synced as if the status was live.

Example:

Note that when Potion syncs the page and sees that command, it will set the background color of the callout to orange to confirm it has not synched its content or to green if the status is live and sync has resumed.

potion:hidden

This command allows hiding internal notes, documentation, or even child pages on a page without making them visible on your site. These are not simply hidden using CSS, they are skipped entirely when rendering your page and will not appear in the HTML source.

This is a convenient way to add pages to your site and only link them from the main navigation or as standard inline links in text rather than full blocks on your page.

Example:

potion:title

Web page have a title which appears in browser tabs and search engines. By default, Potion will use the title of the Notion page as the title of the web page created from it. If you’d like to put a different title for your page, you may use the potion:title command.

If your site was created from a Notion Wiki and a title is set in the properties of a page (see above), the value from the page properties has precedence and this command block will be ignored.

Example:

potion:description

Defines the meta description to insert in the HTML header of your site. If the page already has a description set in its properties (see above), the description in the properties will have precedence and this command block will be ignored.

If your site was created from a Notion Wiki and a description is set in the properties of a page (see above), the value from the page properties has precedence and this command block will be ignored.

Example:

potion:card:image

When sharing links to your page on a social network or messaging app, the link is often expanded into a card with an image and title. By default, Potion will display the Notion cover image but you may use a separate image for your page using this command.

If a page doesn’t have a cover and a potion:card:image command, the value from it’s parent page will be used.

Anything inside this toggle other than the first image block will be ignored. Be mindful not to put images that are too big in size, the app may not expand it if the file is too big.

Example:

potion:render-cmd:all

Tells Potion to render all command blocks on a page, including the potion:render-cmd:all block itself, as standard content. This is useful if you build a help page that describes Potion commands and want to show them as examples. As you may have guessed, this page uses that command 🙂.

Example:

potion:slot:[TARGET]

Potion pages are built with a layout that contains three special slots beyond the main content: a left side bar, right side bar, and a footer. To take some content from your page out of the main content and place them into those slots, you have two options: synced blocks or toggle blocks.

Putting content in a slot using a toggle block

One way to insert content into slots is using a toggle block. Make sure the text of the toggle block is potion:slot:[TARGET] and child blocks you put in that toggle will be moved out of your main content to the target slot. Note that the toggle element itself will not show up in your main content or the target slot, only the blocks you put under it are rendered on your page.

Example:

Putting content in a slot using a synced block

If you create a synced block whose content starts with potion:slot:[TARGET], that synced block will be inserted in the target slot (minus the potion:slot:[TARGET] paragraph). You can copy that synced block across multiple pages and you’ll get a nice looking side navigation or footer that is easy to maintain and edit.

Example: