Hello and welcome!
What I’m about to present is the final part of my journey with Telegram and Contentful.
Following my article published on the Contentful Blog (you can read more here), in this post, I’ll show you how I built a custom app to send messages to your Telegram Channel right from your Contentful entry.
This won’t be a technical section, more of a “show and tell”. However, if you are interested in seeing the code, at the end of the article you will find links to the repositories.
Key Points of the Application
Let’s define what, how, and where our application will operate.
As many of you may already know, the App Framework allows us to customize various parts of the Contentful web interface. In our case, we will modify the configuration screen of the app itself to define some parameters necessary for its overall operation. While the actual app will reside within the sidebar of our entries.
Our application will provide the user with the ability to send content to an external endpoint, leveraging the data from the current entry or completely custom data. The endpoint will then be responsible for retrieving the data and sending it to the associated Telegram channel (this part has been covered on the other article).
Configuration Screen
Let’s start with the initial configuration. As mentioned earlier, without this, our app cannot function. Why is that? Simply because here, we give the user the ability to define multiple endpoints that our app can then use to send information.
Each endpoint can define different logics; for example, we can have an endpoint that relies on a Test channel that we can use to send test messages. Another example could be having different channels for different topics, providing us with the flexibility to communicate different information.
Let’s see how the initial screen looks:
From here, we can add, modify, or delete our endpoints. The entry form includes the following fields:
Name: name of the endpoint.
Url: URL of our external service.
Channel Id: Telegram channel ID.
Channel name: name of the Telegram channel.
Doing so, we obtain a list of endpoints that our app will then utilize:
Sidebar App
As mentioned earlier, we will be working in a specific location, the sidebar.
This allows our application to be available on every entry of a specific content type (or more than one if desired).
Once the app is installed, to display it in the sidebar, we will need to modify the ‘Sidebar’ section of our content type:
..and move our ‘Telegram Sender’ app to the right-hand list, choosing the position, and then saving the content type:
Now, if we go to any Entry of type Recipe, we will see our application ready to be used:
How does it work?
Now that we have configured our app, let’s see how it works.
After clicking ‘Configure message,’ the first crucial step is selecting the endpoint for sending our data:
Once the channel is selected, we will have a form with the following fields:
Media
Text message and parse mode
Link URL and Link name
Let’s examine them in detail.
Media
This field allows us to select media in different ways.
We can create a new media from scratch or choose one from those already present. These first two options are fixed and interact through the Contentful SDK, displaying the default interface. For example, if we select ‘Select existing media,’ the application will open a modal with our saved assets:
The other entries starting with ‘Entry field: …’ are dynamic entries based on the structure of our Content Type. In our example, our recipe, has only one Media-type field named ‘Image.’ Clicking on this option allows us to directly select the image associated with that field. If the field in the entry is not populated, the option in the select would still be present but disabled:
Text Message and Parse Mode:
This is where you can configure the text message to send to the channel. Similar to the media field, we have some dynamic fields based on the structure of our Content Type. Within the options, we have fields of type Symbol/Text. In addition to these, we have a ‘Custom value’ option that allows us to enter free text:
The ‘Parse Mode’ option is specific to Telegram, indicating the format of the text we are entering. The options are: HTML (Default), Markdown, and MarkdownV2.
There are links provided that redirect to the Telegram documentation for more information on these options.
Link URL and Name
These two optional fields allow you to define a link and a label to include in our message. Again, similar to the text message, we have the option to use fields from the entry or enter custom values:
Preview and Send CTA
The application also provides a preview of the message we are about to send. This feature can be useful for users who want to see how the message will appear within the Telegram channel before sending:
When the message is ready, we can click on the ‘Send Message’ CTA, which will send the data to our external endpoint responsible for delivering the message to our Telegram channel. The implementation of the external service will be very similar to what we saw in the previous article.
Conclusion
And with this, our journey through Bots, Webhooks, and custom apps comes to an end.
We’ve seen how, with simple configurations, we can establish our presence on Telegram and leverage the power of webhooks with just a few lines of code.
Last but not least, thanks to the power of the App Framework, we’ve been able to explore the creation of a small app that puts into practice everything we’ve learned in the previous article, all within the Contentful interface.
Below, you can find the links to the repositories used in this series:
