Toastr support

Via its integration with the toastr component, Sircl provides an easy wat to show non-blocking notifications also known as toasts.


toastr is a Javascript library for Gnome / Growl type non-blocking notifications also known as toasts.

More information about the toastr library:

For a demonstration, see:


Toastr requires the full (not "slim") edition of jQuery. To setup toastr in combination with Sircl, you need to install following files in order:

  • Cascading style sheets
    • toastr.css
    • sircl.css
  • Javscript:
    • jquery.js
    • toastr.js
    • sircl.js
    • sircl-toastr.js

You can replace sircl.js by sircl-bundle.js, and/or add more Sircl libraries.

The toastr.css and toastr.js files can also be included from CDN using the following elements:

<link href="//" rel="stylesheet" />
<script src="//"></script>

Showing toasts on click

To show toasts on click, add the onclick-showtoastr attribute with as value a (relative) CSS selector to the toasts to show. The toast is defined as an element with following properties:

  • The data-toastr-type attribute defines the type of toast: "success", "info", "warning" or "error".
    Defaults to "info"
  • The data-toastr-title attribute defines a title for the toast.
  • The content of the element is the content of the toast.

Add the hidden attribute to hide the element from the normal page output. Or use for instance a TEMPLATE element.

For instance:

<button type="button" onclick-copytext="[email protected]"
  <span class="spinner"></span> Copy to clipboard
<template id="copiedtoastr" data-toastr-type="success" data-toastr-title="Copied to clipboard">
  The email address was copied to the clipboard.

Showing toasts from page or page part

Whenever a page or page part is loaded, that contains an element with the onload-showtoastr class, a toast is shown based on that element.

For instance:

<div class="onload-showtoastr" data-toastr-type="success" data-toastr-title="Added to cart" hidden>
  The item has been added to your shopping cart.

Showing toasts from response headers

As reponse to Sircl Ajax requests, the server can request to show a toastr by setting the X-Sircl-Toastr response header to a value according this format:


The type is either "success", "info", "warning" or "error".

The content is the content of the alert message.

The title is optional.


X-Sircl-Toastr: success|Your changes have been saved.|Changes saved