Categories
Tutorials

Web Widgets: Embed Random Quotes, Weather and Pomodoro Timers in Pagico

With the new Web Widget feature introduced in the May 2024 edition of Pagico, you can now extend Pagico’s functionality to a whole new level. This guide talks about how to embed random quotes, weather info, and Pomodoro Timers right into your projects or contacts in Pagico. Let’s dive in!

Web Widgets Overview

Starting with the May 2024 edition of Pagico, Web Link objects can be rendered as widgets. To create new web widgets, simply click on the “+” button in a project or a contact, then choose the Web Link option.

For a Web Link object, you can specify a URL (for webpages or embedding entire web pages) or custom HTML codes. Whether to use URL or HTML codes depends on the provider of the widget.

The height of Web Widgets can be adjusted by dragging the bottom edge of the visible area of the widget, and the width of the Web Widgets can be adjusted by dragging the right edge of the visible area (or by using the Layout Options in the Object Options menu).

Web Widget Examples

Embedding Random Quotes

Having inspirational quotes embedded right in your projects and contacts could be quite beneficial to your productivity. Any online random quotes generator should be embeddable in Pagico. Here’s one example:

  1. Click on this link to visit the Notion Quotes Widget website (N17 is not affiliated with this service)
  2. Click on the “Copy URL” button.
  3. In Pagico, open up a project or contact. Click on the “+” button, then choose “Web Link”
  4. In the Web Link properties panel, paste in the link you obtained from step 2 above, turn ON the Render as Widget option, then save.

Embedding Weather Info

Weather Info embedded in Pagico

Making a travel plan? Then having the weather info of the destination is critically important. Here’s how to embed weather info of any location:

  1. Click on this link to visit WeatherWidget.io (N17 is not affiliated with this service)
  2. Make your selections in the settings section, such as the location, label and language, etc.
  3. Click on the “Get Code” button to see the code panel, then click on the “Copy to Clipboard” button.
  4. In Pagico, open up a project or contact. Click on the “+” button and choose “Web Link”
  5. In the Web Link properties panel, paste in the HTML code you obtained into the HTML Codes section (leave the Web Address field blank), turn ON the Render as Widget option, then save.
  6. Adjust the height of the rendered widget by dragging the bottom edge of the widget visible area. If width adjustment is needed, use the various layout choices available in the object options menu.

Embedding a Pomodoro Timer

Pomodoro Timers are great at helping you staying focused while maintaining a balance between work and break. Here’s how to embed a Pomodoro timer right in your project or contact:

  1. Click on this link to visit StudyWithMe (N17 is not affiliated with this service)
  2. Copy the address in the address bar of your browser (by selecting the entirety of the text, then right-click and choose “Copy”)
  3. In Pagico, open up a project or contact. Click on the “+” button and choose “Web Link”
  4. In the Web Link properties panel, paste in the link into the Link” field, turn ON the Render as Widget option, then save.
  5. Done! Adjust the height of the rendered widget by dragging the bottom edge of the widget visible area. If width adjustment is needed, use the various layout choices available in the object options menu.

That’s it for now! We will publish more widget ideas as we go.