It is quite straightforward with code like this:

<div style="background:#fff; padding:3px">
  <iframe style="border:1px solid gray; height:700px; width:617px"
    src="http://piratepad.net/yourpadname?fullScreen=1">
  </iframe>
  <div>
    <strong>Hide the chat column to get proper space for editing.<br/>
    Or <a href="http://piratepad.net/yourpadname?fullScreen=1">edit 
    this pad fullscreen on piratepad.net</a>.</strong>
  </div>
</div>
<p>
  If trolls delete your content, use the "Time Slider" button 
  and copy it back to the current version. 
  If the pad makes trouble, contact mail@example.com.
</p>

This is the best solution I found to embed an Etherpad Lite provided by an external service. There's a newer version that allows more pretty embedding, but so far you can only use it when installing on an own server as the services providing it have a bug that leads to data loss when using in Firefox. Here is the background info for that:

  • There are two versions of Etherpad Lite: those with chat in a column on the right (like piratepad.net), and those with chat in a small box at the bottom, and many other design changes (example from notes.occupy.net). The first kind of sites run Etherpad Lite too, not the original Etherpad it seems [source]. But probably an older version. Because the newer pads (with chat in a bottom box) in my tests all did not save anything when embedding in Firefox, probably because of this issue. It is said to be solved now, but until the public services update to that newest version you have to either set up your own Etherpad Lite server or embed the old version from piratepad.net or the like.
  • These "old version pads" do need a ?fullScreen=1 GET parameter to make them adapt as good as possible to a limited iframe size, avoiding scrollbars that result from an otherwise fixed pad width. When embedding the new version pads, you don't need the fullscreen parameter because they use fluid layout (indeed, that parameter is gone there).
  • Even in fullscreen mode, the "old version pads" have not much space for editing because of the right chat column. In this version, the alwaysShowChat GET parameter does not work. So I chose to put a hint at the bottom that the chat column can at least be minimized.
  • Also, all the other embed GET parameters do not work in these "old version pads". So we have not many ways to make the embedding prettier.

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>