How to create TG Instant View from Notion page
Tags: notion, telegram, instantview, markdown
Published: 2023-09-18 08:46:57

> Title image is MidJourney generated (Notion blended with Instant View TG)

## How to format in Notion

To ensure everything displays and works correctly, formatting a page in Notion needs to follow these rules:

- The page title will become the **Instant View (IV)** title.
- All images must be inserted through **/embed**. Ordinary insertions will attach the image's URL to amazonaws in such a way that the IV Bot of Telegram cannot fetch it.
- If some paragraphs need to be displayed as Blockquote, in Notion, this block should be made as a **Quote** type.

![How Blockquote looks in IV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guckyde6fay77lhjgxf1.png)*<center>How Blockquote looks in IV</center>*

---

![How the same block was formatted in Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inetq85xsflsv6xiivrh.png)*<center>How the same block was formatted in Notion</center>*

In general, it is unlikely to be able to make large articles in IV, and it is also not worth adding many complex blocks to the article. The simpler - the better.

## How to customize the IV template

Go to [My Templates](https://instantview.telegram.org/my/) and insert the article's link into the field and press Enter.

> To get the link to the page in Notion, select Share in the upper right corner of the screen and switch the Share to web toggle.
> 

In the window that appears in the center, you need to specify the rules by which the IV Bot will parse the page structure. The minimally working template is as follows:

```tsx
~version: "2.1"
body: //body
title: @head//title
@replace_tag(<figure>): $body//p[.//img]
# <aside> ://p[contains(text(), '<aside>')]
author: "eclipse_it"
```

“*~version” -* without specifying a version, the render crashes.

“*body: //body”* - here, the narrowest block in terms of nesting with useful content is specified. When creating an IV template for a regular blog, it is enough to specify any article if such a tag exists:

```tsx
body: //article
```

or div with id="content":

```tsx
body: //div[@id="cover"]
```

or div with class "content-page," for example:

```tsx
body: //div[has-class("content-page")]
```

---

“*title: @head//title*” - The title will be placed in the <title> tag, catch it from there.

“*@replace_tag(\<figure>): $body//p[.//img]*” - ~~don't ask~~ Yes, Notion places the \<img> tag inside \<p>, and the parser crashes on it.

“*author: "eclipse_it*""- channel name or author's name.

“# \<aside> ://p[contains(text(), '\<aside>')]” - here, the line can be removed. I have not yet fully understood how to solve this problem. The thing is that the Callout block from Notion:![The thing is that the Callout block from Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hn00zamt7nfmsaed3ae.png)



In HTML code, it looks like this:


![In HTML code, it looks like this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9s2g5rmmn93ub9zvke1.png)



Therefore, it is necessary to somehow transform this \<p>.

## How to attach IV to a post

After the layout is configured, you need to click **Track Changes** in the upper right corner, then **Mark as checked.**

To get the link -> **View in Telegram**

The obtained link needs to be inserted into the post, but to avoid cluttering the text with a link, you can use the invisible character "ㅤ" (code "U+3164", "&#12644"), on which a link is hung.

![Empty symbol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htxl28fml2fblc6hchlk.png)