Verblr has been placed on hiatus for the time being. Thank you for your support!

SDK // Listen Button

The Verblr Listen button allows your readers to listen to the content on your website with one click, within seconds, right in their browser.
Setting up Listen buttons on your website only takes a moment.

Publisher Key

To use Listen buttons on your website you need to sign up for a free Publisher Key.

Your Publisher Key is associated with your website(s), and Listen buttons will only work on pages with a URL that matches one of your website prefixes.
For example, configuring the website prefix:
https://example.com/something/

Will allow you to embed Listen buttons on pages such as:
https://example.com/something/2020/11/my-article.html

To get your Publisher key:

  1. • Login or sign up to your Verblr dashboard here
  2. • Follow the instructions to set up your Verblr Listen buttons
  3. • Take note of the Publisher Key shown
Once done, follow the guide that fits your website best:
  1. Wordpress plugin
  2. HTML + JavaScript

Option 1 : Wordpress

  1. • Install the Verblr plugin
  2. • Open the Verblr plugin settings
  3. • Paste your Publisher key in the box
  4. • Save the changes
The plugin can automatically insert a listen button before and after your post content, but you can also insert the Listen button wherever you like by using the shortcode:

[verblr-listen-button]
That's it! Verblr Listen buttons will now appear with your posts.

Option 2 : HTML + JavaScript

If you are using Verblr Listen buttons on your website, first include the Verblr SDK in your website source:
<script src="https://api.verblr.com/v2/sdk/lib.js" type="text/javascript">
</script>
When the SDK initializes it will automatically create Listen buttons from elements with the following attributes:
<span data-vrb-pub-key="{{publisher-key}}" data-vrb-role="listen"> 
</span>
Where {{publisherKey}} should be replaced with your Publisher key.
By default the verbalizer works best on websites that use Open Graph tags.
<body>
	...
	<main role="main">
		<article>
			{{articleContent}}
		</article>
	</main>
</body>
Where {{articleContent}} is the main text and images of your article.
Optionally you can provide some or all of the following parameters to control the verbalized content:
<span data-vrb-pub-key="{{publisher-key}}" data-vrb-role="listen"> 
({
    "url" : "https://example.com/some/article.html",
    "title" : "Example Article",
    "content" : "This is my article",
    "published" : "Wed, 18 2020 07:00:00 GMT",
    "modified" : "Wed, 14 Jun 2017 07:00:00 GMT",
    "authorName" : "John Smith",
    "artwork" : "https://example.com/some/image.png"
})
</span>