Putting a page on your own site

What people see

The page people answer, inside a frame on your page, growing and shrinking to fit what's in it. Answers go straight to your page on Whenabouts, the same as if they'd opened the link.

Across the top is a strip with our name, our website's address and "Report this page". It's there on every plan and can't be turned off, so a form can never be made to look like it belongs to somebody else. On the free plan, the foot of the page also says "Made with Whenabouts". A paid plan's colour and logo show inside the frame too.

Setting it up

On the page's console, under "Share it", choose "Put it on your site". The page has to be saved to an account, and you have to be signed in to that account. People it has added to help can see the setup page, but adding, checking and taking off sites is up to the account's owner, like the page's link and look. If the page isn't on an account yet, the setup page offers "Save this to your account" first.

A page can be shown on 3 sites on the free plan and 20 on a paid one, going by the plan of the account the page belongs to. Sites you've added but not proved yet count.

Proving the site is yours

Before a site can show a page, it has to prove it's yours, so nobody else can wrap your form in their own site.

1. Under "Where do you want to put it", type your site's address, like https://riversidechoir.org, and press "Add a site". It has to be https. www.riversidechoir.org and riversidechoir.org count as two sites, so add the one your page is really on.
2. Put a plain text file on your site at /.well-known/whenabouts-embed.txt, containing the code the page shows you on a line of its own. Other lines in the file are fine.
3. Press "Check it". We fetch the file, and the site shows as "Proved", or tells you whether the file couldn't be read or didn't have the right line in it.

"Take off" stops a site showing the page right away.

The snippet

Once a site is proved, paste this where you want the page to appear:

<div data-whenabouts="https://whenabouts.link/e/spring-concert"></div>
<script src="https://whenabouts.link/embed.js" async></script>

Copy it from the setup page rather than from here: it has your page's own address in it. If the page has its own link ending, the snippet uses it, so changing the ending later means pasting the snippet again.

Two things are optional on the div: data-title, the frame's name for screen readers, and data-height, how tall it starts, in pixels, before it fits itself to what's in it. 640 if you leave it out.

<div data-whenabouts="https://whenabouts.link/e/spring-concert"
     data-title="Spring concert volunteers"
     data-height="900"></div>

If your site has its own Content Security Policy, allow https://whenabouts.link in script-src and frame-src.

What changes inside a frame

• The page can't remember somebody's answer on their device, because browsers don't send it the little file that does that inside somebody else's site. To change an answer, people use the link in their email, so it's worth asking them to leave one.
• For the same reason, a page asking when you're free isn't filled in from anybody's usual week, and the line about keeping it in an account isn't shown.
• Links in the strip at the top and in the footer, and "Add it to your calendar" on a grid with a time locked in, open in a new tab.

What can't be shown this way

• A page with a PIN. Its PIN screen refuses to load inside a frame, so take the PIN off if you want it on your site.
• A page that's paused while we look at it.
• The console, sign-in, or anything else on whenabouts.me. Only the pages people answer can be framed, and only on sites that page has proved.

If a paid plan ends, sites already added keep working, but you can't add more to a page that has 3 or more.