Teuteuf Widgets Test Page

Notification Widget

To add a notification banner at the top of your page, simply include the following script tag:

<script src="https://widget.praveen-latch.workers.dev/notifications/notifications.js"></script>

That's all you need! The notification banner will automatically appear at the top of your page. All styling and content is defined in a central location, so you don't need to manage any CSS or HTML markup on your end. The widget handles everything automatically, making it easy to keep your notifications consistent across all your pages.

Card Widget

To embed interactive card widgets on your pages, include the card script and initialize it with the initCard() function:

<script src="https://widget.praveen-latch.workers.dev/card/card.js"></script>
<script>
initCard({
  size: "tiny",
  image: "/img/icons/widget-card-icon-60.png",
  isPlayed: true, // determined from localStorage
  url: "https://t30.teuteuf.fr",
  siteName: "Thursday Thirty",
  siteSubtitle: "Weekly Geography Quiz",
});
</script>

This script initializes a card widget on the page, which in turn lets us include an iframe. The configuration allows you to customize the card's appearance (size, icon image), behavior (play state), and target URL. Each site can have its own card widget with its own branding and content.

An example of a T30 card widget is below. Be sure to visit when you have/haven't completed this week's quiz.