How to make instant view in telegram
Instant View
Instant View allows Telegram users to view articles from around the Web in a consistent way, with zero loading time. When you get a link to an article via Telegram, simply tap the Instant View button, and the page will open instantly.
With Instant View, Telegram users can enjoy articles from any mass media or blogs in a uniform and easily readable way. Instant View pages support text and media of any type and work great even if the original website was not optimized for mobile devices.
On top of this, Instant View pages are extremely lightweight and are cached on the Telegram servers, so they load instantly on pretty much any connection — hence the name. No more waiting for clunky websites to load, now you can get the good stuff right away!
And the best part is that webmasters don't need to change anything on their websites for Instant Views to work.
Instant View Button
Instant View Page
How does this work?
When you share a link via Telegram and a link preview is generated, our Instant View bot also checks if it has an Instant View Template for that website. Templates are sets of instructions we call rules that teach the IV bot to build instant view pages for particular domains or URLs.
If a template exists for the link, the bot uses it to find the relevant content on the page (headings, text, media, embedded elements), remove clutter, and create a slim and beautiful Instant View page.
Anyone can use our Instant View Editor to create templates. Once a template for a URL is approved by our team, all Telegram users will get the option to view the page in the Instant View format whenever they see a link to it on Telegram.
If you publish your content on Telegram yourself, you don‘t even need to wait for us to approve your template. You can just send specially formatted links to your subscribers, and they’ll get Instant View pages built using your template right away.
Read More About Publishing Templates »
Join buttons
Another added bonus if you have a channel is that you can direct users to join your channel from the Instant View pages built from your articles.
Join Button
For this to work, the template must contain a channel property that holds a link to your channel. More in the docs »
Instant View Editor
Telegram's Instant View Editor allows you to create and test templates for any domain. To begin, just go to My Templates, type a target URL for your Instant View template into the box, and hit ‘enter’. This will open the editor. The source page will be displayed on the left.
Tip: Use the Developer Tools in your browser (e.g. Inspect mode in Chrome) to study the HTML markup of the page.
The middle section of the page is where you create your template for the chosen domain name or URL. Templates consist of simple instructions to our IV bot we call rules. You can later study the syntax in detail here. Once you've saved your rules for the page (cmd + S or ctrl + S in the Rules window), the window on the right will display the Instant View page that the IV bot would create based on the current instructions.
Note the status line at the bottom of the page — it displays the result of the last operation. This is also where you'll find the output of the @debug function:
Sample templates
If you'd like an example, you can check out the exact same templates that we're currently using to generate Instant View pages for posts on Medium, Telegra.ph, and the Telegram Blog. We've added many comments to these templates, so they literally speak for themselves.
Feel free to experiment with them and see what changes. Don‘t worry, your changes won’t be applied to the actual Instant View pages that regular Telegram users can see.
Templates tutorial
When creating an Instant View template, you have four main objectives:
- Instant View pages must only be generated for pages that need them.
- All essential content from the source page must be represented.
- All unnecessary elements must be eliminated from the Instant View page.
- Your template must work well with any of the pages it covers.
Accordingly, one of the ways to create a template is to follow these steps:
Step 1. Aim your template
Instant View pages work best with relatively static articles. On the other hand, the main page of a news site that contains ever-changing lists of links to new articles would hardly benefit from the IV treatment.
For the first step, you will likely use conditions to clearly define which parts of the target website will and will not be covered by your template.
Step 2. Grab the essentials
Now it's time to do some real business. An Instant View page requires at least two properties to be created: a title and a body. Take a close look at the target article and make sure that all important elements are carried over to the IV page in a format supported by the Telegram apps.
At this stage, you may need to use functions to transform some elements before they are transferred.
By the time you're done, your IV page should show the entire text of the article, along with all the headings and subheadings, quotes, cover and other photos, videos, and other kinds of embedded content from the source page.
Step 3. Remove the rest
Salvage the remaining useful bits, then use the @remove function to drop the rest. By now you should have a clean and slim IV page that displays the pure content and none of the fluff.
Step 4. Refine your template
At this stage, we advise you to leave the familiar confines of the page you were using for testing and check out different pages from your target website. See if any pages that don't deserve IVs are getting them — and whether IV pages are missing for any that do deserve them.
Also, check whether pages with irregular elements are processed correctly. Pay special attention to ensure that various types of media, embedded content, quotes, and separators are all displayed nicely. Check 5-10 different links and make the relevant adjustments.
See also: Our Perfect Template Checklist »
Naturally, this is just a brief outline of what you could do — Instant View pages offer limitless possibilities.
Tracking changes
Once you're satisfied with your template's generated IV pages, press the Track Changes button. If modified template rules are subsequently applied, they can now be checked across all applicable IV pages within the system.
Track Changes
After Track Changes is enabled, editing your template will not immediately check for changes across all pages. Instead, when you're happy with the currently generated IV page, and no warnings are shown, click Mark as Checked to see if your changes broke anything on the other IV pages impacted by your template.
Pages Modified
If any changes are detected, the status line will display the difference and the result:
Changes Detected
Take care that your changes don‘t break pages that already had good IV pages.
There’s a handy indicator at the top of the page that shows the status of the pages relevant for your template. As long as it's green, everything's fine.
Publishing templates
If the Instant View page has been processed successfully, you'll see a View in Telegram button in the top right corner – you can use it to view the resulting page in-app.
For your own audience
Note that if you send the resulting t.me/iv?url=...&rhash=... link to other Telegram users, they will see an Instant View page built using your template (the rhash parameter in the link determines which template is used to create the page). This means that, as a website owner, you can create a template for your page and publish t.me/iv?url=... links with the corresponding rhash to your Telegram channel — and your subscribers will be able to view your articles in the Instant View format right away.
For all Telegram users
If you'd like your template to become truly public and seen by all users, regardless of the link they get, the template will need to be approved by the Telegram team.
And that‘s it, you’re now ready to move on to the full instant view documentation.
Don't forget that you can also check out our annotated sample templates.
How to craste Telegram Instant View Template
If you still don’t use Telegram, now is the time to start. All users may be interested in the statistics of this non-standard messenger, which indicates the positive dynamics of their popularity. And there are no tricks here: open code and fresh rationalization ideas daily replenish Telegram with new useful features that give an advantage over competitors. Instant page view is one of them.
Fast. Very fast
Telegram instant view is a technology which brief essence is the ability to instantly view all the content of the page to which we give a link, right in the messenger window.
The user does not need to wait for the download, go (even automatically) to the browser or even do something at all: click the “ϟ Instant view” button at the bottom of the message and enjoy the view.
The page in this case will be displayed according to the instructions prescribed by you using XPath 1.0 in the Instant view template (IVT) instant view template and the settings of the telegram bot itself.
All this is focused directly on the recipient of information. He will see only the necessary data, not be distracted by the accompanying content, save time and even resources, if this issue is important for users with limited traffic. A valid template will also allow your content to be cached on the Telegram servers.
Let’s try together
Let's create an IVT for arbitrary publication. To do this, you will need a working Telegram application on your mobile or desktop, and in paragraph № 3 of the subsequent instructions you will be asked for the phone number to which the program is registered.
It is also desirable to have your own Telegram channel for better viewing of the results, but this is not necessary (in the extreme case, the channel is created in three clicks). That's all for the preparation, now we go to the point. I will take as a basis my previous article from Avivi's blog A pig in a poke and Bitrix24 integration:
-
First of all we copy a link to the article: https://avivi.pro/en/blog/a-pig-in-a-poke-and-bitrix24-integration/;
-
Now we open the official documentation;
-
And actually the service Telegram for creation of IVT. After the transition we specify the telephone number and look in the messenger – there will be a notification.
-
We enter the copied link to the article in the single field at the page and push Enter:
-
This action moves us in “sandbox” — a place, where you can see and adapt everything.
A simple interface of three columns reflects the original article, in fact a template, where all the “magic” happens and the result obtained.
-
Now we will work in the second column. First you need to point out the existence of the page we need. If you have Google Chrome like me, feel free to click F12 in the tab with the article, and look for - <head>. I chose a meta-tag that indicates that the article belongs to a blog entry. We register this in IVT.
?exists: /html/head/meta[@content="blogpost"]
How you can see, you can even the needed block with content, for example:
?exists://div[@class="blogpost"]
-
Now for the bot you need to specify the body of the article, where it will parse the information:
body: //div[@class="blogpost"]
Try to choose the most informative block, eliminating all unnecessary and unnecessary at once.
This includes all sorts of banners, menu advertising, etc. - after all, an instant view is needed just to squeeze the most necessary. For comfort, you can later write to the $ body variable:
$body: //div[@class="blogpost"]
And you have the first result in the third column:
On this step you may have a problem with images at this stage: the bot completely refused to parse them and swore an error. But turning to the XPATH documentation, I found a simple solution by changing the <p> tag, in which the image is wrapped, to <div>:
$body//p/img/parent::p
-
Now is the time to direct the beauty in the template: specify the title, subtitle, date of publication, photo of the author.
The bot has already tried for us, but from experience I will say that often he fails to do everything correctly. Sometimes it is prevented by page layout, sometimes by unknown strength. But if you do it manually, you need to do everything right:
cover: //div[@class="blogpost__post"]/img
title: $body//h2[1]
subtitle: “” <!--We don`t have a subtitle -->
author: <!--We don`t need this -->
published_date: $body//div[@class="blog-user__date"]/text()Now we can see very clearly the result of our efforts:
-
Now we get rid of undesirable elements:
@remove: //div[@class="blogitem__top blogpost__top"] @remove: //div[@class="socials__share"]
-
Do not forget to specify (if any) a link for your Telegram-channel.
This will be very useful for its advancement, as it will enable those who wish to join in one click. In addition, your knowledge in setting up instant views will play to the benefit of your image:
channel: "@avivipro"
After this a button for joining to it will appear:
-
Finally when everything’s ready, we generate a link for spreading via the link ‘VIEW IN TELEGRAM’ and we get a needed link. That’s all.
Create by yourself
You may have seen earlier that the “ϟ Instant view” button appears when you share a link to popular sites via Telegram. This is due to the ongoing competition for the creation of IVT, where the Telegram moderators approved the valid templates and they were cached on the server of the cart.
If your template is not moderated, there are at least 2 solutions:
what it is, how to create a template
Instant View (Telegram) is a technology for instantly viewing links to website pages in the Telegram messenger.
In Telegram, links with the ability to instantly view are indicated by a button with an image of a lightning bolt and the inscription "View".
How Instant View works:
- When a link preview is loaded in Telegram, the system automatically checks if there is an Instant View template for it. nine0010
- If the template exists, the Instant View bot finds it using the page URL,
- Following the rules specified in the template, the bot selects the content of the main page and adjusts it to the instant view format,
- Edited content is used to create an Instant View page that will be displayed to users.
Instant View is quite popular for several reasons:
- The content of the link can be viewed immediately, the user does not need to open additional applications,
- Instant View supports not only text, but also media content, which allows you to give users maximum information,
- Using Instant Download does not require a mobile version of the site.
A properly configured Instant View template will correctly display all the information.
To activate Instant View in Telegram, you need to make a special template. nine0003
What is template Instant View in Telegram
The Instant View template is a set of specific commands and rules that tell the Instant View bot what information should be taken from the website page place it on the instant view page. At the same time, the Instant View template does not affect or change the main site code.
The template can be created by the author of the channel or post, as well as the site developer. nine0003
How to create a template Instant View in Telegram
The official site of Instant View https://instantview.telegram.org has everything you need to create an instant view template: 9009
Which pages should be templated Instant View
Instant View is most logical for the following types of content and site pages:
- News,
- Blog entries,
- Manuals,
- Documentation, etc.
The following types of pages and content do not require Instant View:
- Dynamically Updated Articles,
- Catalogs, nine0009 Forum threads,
- Pages available only to logged in users,
- Pages restricted to a paid subscription,
- Search pages and search results, etc.
Working with the editor Instant View
The built-in editor is located on the site in the "My Templates" section. The work of creating a template begins with specifying the URL of the page for which it needs to be created. nine0003
This will open a page with three windows: the original page, the rule block, and the resulting Instant View page.
Properties Instant View page
An Instant View page is an object with certain properties. The main ones are:
To work with properties, you must have at least a basic understanding of the page's HTML code. For convenience, you can right-click on the page to open its code and navigate through the tags with it. nine0003
Rules
Instant View Rules are instructions for the Instant View Bot to select elements from the source page and how they should be presented on the Instant View page.
Each pattern line is a separate rule.
Most of the rules are based on the XPath 1.0 syntax and are used to find the desired node in the source document.
For those who do not want to deal with the rules for a long time, there is a special section with ready-made templates https://instantview.telegram.org/samples/ . nine0003
After all the rules are set, you must click the View in Telegram button, select a channel for publication by writing the accompanying text.
After that, the Instant View link will be published.
| nine0151 | Rating 5 , votes 9 | |||||||
What is Instant View in Telegram - Telegram to you
Instant View allows Telegram users to instantly view articles from the Internet without waiting for the page to load. When you receive a link to an article via Telegram, click the "View" button and the page will instantly open. nine0003
With Instant View, users can get articles from any resource in a single, easy-to-read way. Instant View pages support any type of text and media and work great even if the original site isn't optimized for mobile devices.
In addition, they are very lightweight and cached on Telegram servers, so they load instantly on any connection - hence the name "Instant View".
Best of all, webmasters don't need to change anything on their sites for Instant Views to work.
nine0003
How does it work?
When you share a link via Telegram and a link preview is generated, the Instant View bot also checks for an instant view template for that site. Templates are sets of instructions called “rules” that teach the IV bot to create Instant View pages for specific domains or URLs.
If the link has a template, the bot uses it to find the relevant content on the page (headings, text, media), remove unnecessary elements and create a beautiful instant view page. nine0003
Anyone can use the Instant View editor to create templates. Once the URL template is approved by the Telegram team, all users will be able to view the page in Instant View format.
If you publish your content on Telegram yourself, you don't have to wait for approval. You can send specially formatted links to your subscribers and they will immediately receive Instant View pages created with your template.
Join button
If you have a channel, you can direct users to it from your Instant View pages.
To add a "Join" button, the template must contain a custom property with a link to your channel.
Instant View Editor
IV Telegram Editor allows you to create and test templates for any domain. First, go to My Templates, enter the target URL of the Instant View template in the field, and press Enter. This will open the editor. The original page will be displayed on the left. nine0003
Tip: Use your browser's developer tools (such as Chrome's Inspect mode) to examine the HTML markup on the page. In the middle of the page, you create your template for the selected domain or URL. The templates consist of simple instructions for the bot's IV called “ rules” . After saving your rules for the page (cmd + S or ctrl + S in the "Rules" window), the "Instant View" page created by the IV-bot based on the current instructions will be displayed in the right window. nine0003
Pay attention to the status bar at the bottom of the page - it displays the result of the last operation.
Here you will also find the @debug function output:
Sample Templates
If you want an example, you can check out the exact same templates used to create Instant View pages for posts on Medium, Telegra.ph and on the Telegram blog.
Template Guide
Creating an Instant View template has four main goals:
- Instant view pages should only be created for pages that need them.
- All required content must be provided from the source page.
- All unnecessary elements must be removed from the instant view page.
- Your template should interact well with any of the pages it spans.
So one way to create a template is to do the following:
Step 1: Create your template
Instant View pages work best with more stationary articles. On the other hand, the main page of a news site with constantly changing lists of links to new articles is unlikely to benefit from an IV.
To begin with, to clearly define what parts of the site will and will not affect your template, you will probably use conditions.
Step 2: Add only what you need
For the Instant View page, you need to create at least two properties: title (title) and body (body) . Read the target article carefully and make sure that all important elements are transferred to page IV in a format supported by Telegram applications.
At this stage, you may want to convert some elements before transferring them. When you're done, your IV page should show the body of the article, along with all the headings and subheadings, quotes, covers, photos, videos, and other kinds of embedded content from the source page. nine0003
Step 3: Remove unnecessary information
Use the @remove function to remove unnecessary information from the page. By this time, you should have a lightweight IV page displaying clean content.
Step 4: Refine the template
At this point, you need to check other pages on your site. Check if the pages that really need them have IVs.
Also, make sure that pages with incorrect elements are handled correctly. Care must be taken to ensure that all media types, embedded content, quotation marks and delimiters are well displayed. Check 5-10 different links and adjust accordingly. nine0003
This is just a quick overview of what you can do - Instant View pages offer unlimited possibilities.
Track Changes
After creating the IV pages, click the " Track Changes " button. If modified template rules are applied, they can be validated on all applicable IV pages in the system.
After enabling Track Changes, editing the template will not immediately check for changes on all pages. Instead, if the generated IV page is correct and no warnings are displayed, press "Mark as Checked " to see if your changes broke something on other IVs.
