Customizing Your Embed

The dashboard generates embed code with your settings baked in. You can also override some of them on a single embed, without changing the view.

RSVPs are configured in the dashboard and per event, not through the embed code: see RSVP.

Theme and colors are saved with the view in the dashboard, not set in the embed code. See Palettes and Advanced Options.

Parameters

On the script tag, add a setting as a data- attribute with dashes, for example data-default-view="grid". On the iframe, add the same setting as a URL parameter, for example ?default_view=grid. An invalid value is ignored and the default applies: the view's saved setting for the view and header settings, and the built-in default for sticky, page_size and the labels. A page_size outside 1 to 100 is moved to the nearest limit.

URL parameter	Script tag attribute	Accepted values	What it does
`header_title`	`data-header-title`	Text, up to 500 characters	Header title. Without it, the header shows the view's name.
`header_description`	`data-header-description`	Text, up to 500 characters	Header description. Without it, the header shows the view's description, then the calendar's.
`header_icon`	`data-header-icon`	An `https` URL	Icon next to the header title.
`header_url`	`data-header-url`	An `https` URL	Link on the header title.
`subscribe_url`	`data-subscribe-url`	An `https`, `mailto` or `webcal` URL	Where the Subscribe button points. Without it, the button offers the view's combined calendar feed.
`default_view`	`data-default-view`	`month`, `week`, `day`, `grid` or `list`	The first view visitors see.
`available_views`	`data-available-views`	A comma-separated list of the same five names	The views visitors can switch between.
`show_past_events`	`data-show-past-events`	`true` or `false`	Whether past events are visible by default.
`show_header`	`data-show-header`	`true` or `false`	Whether the header is shown.
`sticky`	`data-sticky`	`true`, `false`, or a JSON object	Sticky header behavior. For the object form, see sticky header options.
`page_size`	`data-page-size`	A number from 1 to 100	Events per page in grid and list views. The default is 10.

Labels

These two labels are the only ones an embed can change. They follow the same rules as the parameters above.

URL parameter	Script tag attribute	Accepted values	What it does
`i18n.load_more`	`data-i18n-load-more`	Text, up to 200 characters	Label of the pagination button. The default is "Load more".
`i18n.show_earlier`	`data-i18n-show-earlier`	Text, up to 200 characters	Label of the button that shows earlier events. The default is "Show earlier".

Example

On the script tag:

<script
  src="https://embed.already.events/s/my-view.js"
  data-default-view="grid"
  data-page-size="20"
  data-sticky="false"
></script>

On the iframe:

<iframe
  src="https://embed.already.events/v/my-view?default_view=grid&page_size=20&sticky=false"
  style="width: 100%; height: 600px; border: none; color-scheme: light;"
  allow="web-share; clipboard-write"
  title="Event Calendar"
></iframe>