New: Learn Statamic on Laracasts!


Addon by Matt Rothenberg

Webmentions Main Screenshot

A custom tag for Statamic v3

What is this?

As per, is an open-source project and hosted service for receiving webmentions and pingbacks on behalf of your indieweb site.

Which is a fancy way of saying after signing up for this service, you can easily add the following snippets to your website in order to collect mentions/pingbacks (be sure to replace <username> with your, well, username 😅.

<link rel="webmention" href="<username>/webmention" />
<link rel="pingback" href="<username>/xmlrpc" />

Assuming you've done so, this plugin gives to you a {{ webmentions }} tag that you can use in your Statamic site to display those collected mentions and pingbacks!


composer require mattrothenberg/webmentions

Demo 🚀

The sky's the limit when it comes to how you present your Webmention data! Here's a demo of the example Vue component found in this repo!. Beware the component assumes you have Tailwind and v-tooltip installed.


Usage (Antlers)

This addon exposes a new tag called webmentions. Use it as follows, making sure to pass a url parameter.

  {{ if no_results }}
    <p>No results.</p>
  {{ else }}      
    <p>Total: {}</p>
          {{ url }}
          {{ author }}
            {{ name }}
          {{ /author }}
  {{ /if }}

Usage (Vue)

If you want to pipe the mentions data to a Vue component, here's how.

{{ webmentions url=""  }}
  {{ if no_results }}
    <p>No results.</p>
  {{ else }}
    <mention-list :mentions="{{ mentions | json | entities }}"></mention-list>
{{ /webmentions }}

Mentions Schema

Each mention object exposes the following attributes that you can access in your template.

Learn more at

  "type": "entry",
  "author": {
    "type": "card",
    "name": "Tantek Çelik",
    "url": "",
    "photo": ""
  "url": "",
  "published": "2013-04-22T15:03:00-07:00",
  "wm-received": "2013-04-25T17:09:33-07:00",
  "wm-id": 900,
  "content": {
    "text": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback",
    "html": "Another milestone: <a href=\"https:\/\/\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a href=\"http:\/\/\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>"
  "mention-of": "",
  "wm-property": "mention-of",
  "wm-private": false


  • [x] Add fancy Vue component example
  • [ ] Expose method that talks to, thereby getting a breakdown of the types of mentions.