Our customers have been asking to embed EtherPad in their websites ever since we launched. Today, we're excited to announce a preview release of Embeddable EtherPad for the developer community, which allows EtherPad documents to be embedded in other web pages.

We have big plans for Embeddable EtherPad, and there will be enhancements in the weeks and months to come that make EtherPad embedding easier. In the meantime, if you know a bit about iframe elements, you can get started right away.

Embedding How-To

There are two main ways to embed pads.

* Embedding an Editable Pad

The first option is to embed an entire editable pad. All your visitors will have full access to the pad, and can modify it, save revisions, and view its history.

To embed a pad in your web page, point an iframe's src to an EtherPad URL. For example:

<iframe width=630 height=400 src="http://etherpad.com/foobar?fullScreen=1" />

This works for Professional Edition pads too. (If the pad isn't public, your visitors will be prompted to log in.)

* Embedding a Read-Only Pad (Broadcasting)

The second option is to embed a read-only view of a pad that updates live. We refer to this live updating as "broadcasting". It is useful for, among other things, live-blogging to a wide audience.

To embed the live-upating view, point an iframe's src to the time-slider view of your pad. For example:

<iframe width=630 height=400 src="http://etherpad.com/ep/pad/view/foobar/latest?fullScreen=1" />

Note that the above iframe code gives away the URL of the pad, so anyone can go and change the pad's text! To get around this, go to the time-slider page and click "Link to read-only page." You'll be taken to a page whose URL you can safely give out and embed without allowing others to edit your pad.

Advanced Options

There are a few advanced options available for you to customize how pads appear.

  1. Append &sidebar=0 to your URL to hide the sidebar on the pad and read-only pages.
  2. Append &displayName=name to your URL to name your users. (The name you choose will only be applied if your user hasn't visited EtherPad before and set their own name.)
  3. Append &slider=0 to hide the time-slider from the read-only page.

Using Embeddable EtherPad

We're working hard to make it easier for our users to embed an EtherPad page, and we're really excited about some of the possibilities. We envision bloggers live-blogging with auto-updating posts right in their blogs, teachers including pads in their class websites, and authors including a time-slider view of their work right in their webpages. Tell us how you're using Embeddable EtherPad in the comments below!

blog comments powered by Disqus